/* ============================================================
   DR AI, Landing page styles
   ============================================================ */

/* ---------- Header ---------- */
header#top-header{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .3s, box-shadow .3s; }
header#top-header.scrolled{ background:var(--bg); box-shadow:0 1px 0 var(--line-soft); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:82px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:46px; height:46px; }
.brand .bt{ font-family:var(--serif); font-size:1.35rem; font-weight:700; letter-spacing:.08em; line-height:1; }
.brand .bs{ font-size:.62rem; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-2); margin-top:4px; }
.menu{ display:flex; align-items:center; gap:30px; }
.menu a{ font-size:.94rem; font-weight:500; color:var(--ink-soft); position:relative; transition:color .2s; }
.menu a::after{ content:''; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--gold-grad-h); transition:width .3s; }
.menu a:hover{ color:#fff; } .menu a:hover::after{ width:100%; }
.burger{ display:none; width:46px; height:46px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line-soft); color:var(--gold-1); font-size:1.2rem; }

/* ---------- Section base ---------- */
.sec{ position:relative; z-index:2; padding:74px 0; }
.sec.tight{ padding:52px 0; }
.sec h2{ font-family:var(--serif); font-weight:700; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.15; margin:.35em 0 .5em; }
.sec p.lead{ font-size:1.08rem; color:var(--ink-soft); max-width:62ch; }
.two{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.two.rev{ grid-template-columns:.95fr 1.05fr; }
.two.rev .media{ order:-1; }

/* Portrait frame */
.portrait{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:900/1180; box-shadow:var(--shadow); }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(11,11,13,.55)); }
.portrait-wrap{ position:relative; }
.portrait-wrap::before{ content:none; }

/* ---------- HERO ---------- */
#top{ padding-top:126px; padding-bottom:52px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:1.08; margin:.3em 0 .45em; }
.hero h1 em{ font-style:italic; }
.hero .sub{ font-size:1.14rem; color:var(--ink-soft); max-width:52ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-stats{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-media{ position:relative; }
.hero-portrait{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:900/1220; box-shadow:var(--shadow); }
.hero-portrait img{ width:100%; height:100%; object-fit:cover; }
.hero-portrait::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg,transparent 40%,rgba(11,11,13,.5)); }
.float-card{ position:absolute; z-index:3; padding:14px 16px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:12px; }
.float-card .ic{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:1.1rem; background:var(--gold-2); color:#1a1305; }
.float-card b{ display:block; font-size:1.02rem; }
.float-card span{ font-size:.76rem; color:var(--ink-mut); }
.fc-rating{ top:8%; left:-26px; animation:floaty 5s ease-in-out infinite; }
.fc-count{ bottom:12%; right:-24px; animation:floaty 6s ease-in-out infinite .6s; }
@keyframes floaty{ 50%{ transform:translateY(-12px); } }

/* ---------- Banner thương hiệu ---------- */
.banner-hero{ display:block; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; transition:transform .3s, box-shadow .3s; }
.banner-hero img{ width:100%; height:auto; display:block; }
.banner-hero:hover{ transform:translateY(-3px); box-shadow:0 30px 70px -26px rgba(0,0,0,.8); }

/* ---------- Stat strip ---------- */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; padding:22px; }
.stat .n{ font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700; }
.stat .l{ font-size:.86rem; color:var(--ink-mut); margin-top:4px; }

/* ---------- Pain / list ---------- */
.pain-list{ display:grid; gap:14px; margin-top:8px; }
.pain-item{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:var(--r);
  background:rgba(224,108,108,.05); border:1px solid rgba(224,108,108,.14); }
.pain-item .x{ color:var(--bad); font-weight:800; margin-top:2px; }

/* ---------- So sánh Trước / Sau ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; align-items:stretch; }
.cmp{ padding:30px; border-radius:var(--r-lg); border:1px solid var(--line-soft); background:var(--panel); }
.cmp-before{ background:rgba(224,108,108,.05); border-color:rgba(224,108,108,.16); }
.cmp-after{ background:rgba(231,200,115,.06); }
.cmp-head{ font-family:var(--serif); font-size:1.18rem; font-weight:700; margin:0 0 20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmp-tag{ font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.35em .8em; border-radius:var(--r-pill); background:rgba(224,108,108,.16); color:var(--bad); }
.cmp-tag.gold{ background:var(--gold-2); color:#1a1305; }
.cmp ul{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.cmp li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-size:.96rem; line-height:1.5; }
.cmp .x{ color:var(--bad); font-weight:800; flex:none; }
.cmp .ck{ color:var(--gold-2); font-weight:800; flex:none; }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; gap:16px; } }

/* Feature/value cards */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat{ padding:28px; border-radius:var(--r-lg); }
.feat .ic{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; font-size:1.5rem;
  background:rgba(231,200,115,.1); border:1px solid var(--line); margin-bottom:16px; }
.feat h3{ font-family:var(--serif); font-size:1.25rem; margin:0 0 8px; }
.feat p{ color:var(--ink-mut); font-size:.95rem; margin:0; }

/* ---------- Offer / roadmap + countdown ---------- */
#offer{ background:linear-gradient(180deg,rgba(23,21,27,.6),transparent); }
.road{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px; }
.step{ padding:24px; border-radius:var(--r-lg); position:relative; }
.step .no{ font-family:var(--serif); font-size:2.2rem; font-weight:700; }
.step h4{ margin:6px 0 6px; font-size:1.06rem; }
.step p{ margin:0; color:var(--ink-mut); font-size:.9rem; }
.countdown{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:36px; flex-wrap:wrap; }
.cd-box{ min-width:96px; padding:16px 10px; text-align:center; border-radius:var(--r); }
.cd-box b{ font-family:var(--serif); font-size:2.2rem; display:block; line-height:1; }
.cd-box span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mut); }
.cd-colon{ font-family:var(--serif); font-size:2rem; color:var(--gold-3); }

/* ---------- Price/value box ---------- */
.value-box{ display:grid; grid-template-columns:1.2fr .8fr; gap:0; border-radius:var(--r-xl); overflow:hidden; }
.value-list{ padding:40px; }
.value-list li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line-soft); list-style:none; }
.value-list li:last-child{ border-bottom:0; }
.value-list .ck{ color:var(--gold-2); font-weight:800; }
.value-list ul{ margin:0; padding:0; }
.value-price{ padding:40px; background:rgba(231,200,115,.06); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; text-align:center; }
.value-price .old{ text-decoration:line-through; color:var(--ink-mut); font-size:1.1rem; }
.value-price .now{ font-family:var(--serif); font-size:3rem; font-weight:700; }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tcard{ padding:28px; border-radius:var(--r-lg); }
.tcard .stars{ color:var(--gold-2); letter-spacing:2px; }
.tcard p{ color:var(--ink-soft); font-style:italic; margin:14px 0 18px; }
.tperson{ display:flex; align-items:center; gap:12px; }
.tperson .av{ width:44px; height:44px; border-radius:50%; background:var(--gold-grad); color:#241a06; display:grid; place-items:center; font-weight:800; }
.tperson b{ display:block; } .tperson span{ font-size:.82rem; color:var(--ink-mut); }

/* ---------- FAQ ---------- */
.faq-item{ border:1px solid var(--line-soft); border-radius:var(--r); margin-bottom:12px; overflow:hidden; background:var(--panel); }
.faq-q{ width:100%; text-align:left; padding:20px 22px; background:transparent; color:var(--ink); font-size:1.02rem; font-weight:600; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq-q .pm{ color:var(--gold-2); font-size:1.4rem; transition:transform .3s; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a > div{ padding:0 22px 20px; color:var(--ink-mut); }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); }

/* ---------- Final CTA ---------- */
#contact .cta-card{ text-align:center; padding:64px 40px; border-radius:var(--r-xl); position:relative; overflow:hidden; }
#contact .cta-card::before{ content:none; }

/* ---------- Videos ---------- */
.yt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.yt-card{ border-radius:var(--r); overflow:hidden; cursor:pointer; position:relative; background:var(--panel); border:1px solid var(--line-soft); }
.yt-thumb{ aspect-ratio:16/9; position:relative; overflow:hidden; }
.yt-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.yt-card:hover .yt-thumb img{ transform:scale(1.06); }
.yt-play{ position:absolute; inset:0; display:grid; place-items:center; }
.yt-play span{ width:54px; height:54px; border-radius:50%; background:rgba(11,11,13,.55); border:1px solid var(--line); display:grid; place-items:center; color:var(--gold-1); backdrop-filter:blur(4px); }
.yt-title{ padding:12px 14px; font-size:.86rem; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Footer ---------- */
footer.site{ position:relative; z-index:2; border-top:1px solid var(--line-soft); padding:56px 0 40px; margin-top:40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot-grid a{ color:var(--ink-mut); display:block; padding:5px 0; }
.foot-grid a:hover{ color:var(--gold-1); }
.foot-bottom{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--ink-faint); font-size:.86rem; }

/* ---------- FAB (1 nút bung ra) ---------- */
.fab{ position:fixed; right:24px; bottom:24px; z-index:55; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.fab-main{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:2rem; line-height:1; font-weight:300;
  background:var(--gold-2); color:#1a1305; border:none; box-shadow:0 10px 30px -8px rgba(0,0,0,.6); cursor:pointer; transition:transform .3s cubic-bezier(.2,.9,.2,1), background .2s; }
.fab-main:hover{ background:var(--gold-1); }
.fab.open .fab-main{ transform:rotate(45deg); }
.fab-actions{ display:flex; flex-direction:column; gap:12px; align-items:flex-end; margin-bottom:2px;
  opacity:0; transform:translateY(14px) scale(.94); pointer-events:none; transition:opacity .25s ease, transform .25s cubic-bezier(.2,.9,.2,1); }
.fab.open .fab-actions{ opacity:1; transform:none; pointer-events:auto; }
.fab-item{ display:flex; align-items:center; gap:10px; background:transparent; border:none; cursor:pointer; text-decoration:none; padding:0; }
.fab-lb{ background:var(--panel); border:1px solid var(--line); color:var(--ink); font-size:.85rem; font-weight:600;
  padding:8px 13px; border-radius:var(--r-pill); white-space:nowrap; box-shadow:var(--shadow-soft); }
.fab-ic{ width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:1.2rem;
  background:var(--bg-2); border:1px solid var(--line); color:var(--gold-1); box-shadow:var(--shadow-soft); transition:transform .2s; }
.fab-item:hover .fab-ic{ transform:scale(1.08); }
.fab-ic.gold{ background:var(--gold-2); color:#1a1305; border-color:transparent; }

/* ---------- Booking popup ---------- */
.popup-bg{ position:fixed; inset:0; z-index:80; background:rgba(6,6,8,.72); backdrop-filter:blur(6px); display:none; place-items:center; padding:20px; }
.popup-bg.show{ display:grid; }
.popup{ width:min(460px,100%); border-radius:var(--r-xl); overflow:hidden; animation:pop .4s cubic-bezier(.2,.9,.2,1); }
@keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.96);} }
.popup-head{ padding:26px 28px 6px; }
.popup-head h3{ font-family:var(--serif); font-size:1.5rem; margin:0; }
.popup-body{ padding:20px 28px; display:grid; gap:14px; }
.popup-foot{ padding:6px 28px 26px; }
.popup-x{ position:absolute; top:16px; right:18px; width:36px; height:36px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line-soft); color:var(--ink-soft); }
.popup-success{ display:none; padding:40px 28px; text-align:center; }
.popup-success.show{ display:block; }
.popup-success .big{ font-size:3rem; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.two,.two.rev{ grid-template-columns:1fr; gap:30px; }
  .two.rev .media{ order:0; }
  .hero-media,.two .media{ max-width:440px; margin-inline:auto; }
  .feat-grid,.testi-grid,.stat-strip{ grid-template-columns:1fr 1fr; }
  .road{ grid-template-columns:1fr 1fr; }
  .yt-grid{ grid-template-columns:1fr 1fr; }
  .value-box{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .menu{ position:fixed; inset:70px 0 auto 0; flex-direction:column; background:rgba(11,11,13,.97); padding:20px; gap:6px; transform:translateY(-120%); transition:transform .35s; border-bottom:1px solid var(--line); }
  .menu.open{ transform:none; }
  .menu a{ padding:14px 12px; width:100%; min-height:48px; display:flex; align-items:center; }
  .burger{ display:grid; }

  /* --- Header gọn trên điện thoại --- */
  .nav{ height:70px; gap:10px; }
  .brand img{ width:38px; height:38px; }
  .brand .bt{ font-size:1.05rem; white-space:nowrap; }
  .brand .bs{ display:none; }              /* ẩn dòng phụ cho khỏi vỡ */
  .nav > div:last-child .btn-gold{ display:none; } /* ẩn CTA header, đã có nút FAB */

  /* --- Tap target chuẩn 48px ở footer --- */
  .foot-grid a{ min-height:46px; display:flex; align-items:center; }

  /* --- FAB nhỏ lại, không che nội dung --- */
  .fab{ right:14px; bottom:14px; }
  .fab-main{ width:54px; height:54px; font-size:1.8rem; }
  .fab-ic{ width:44px; height:44px; font-size:1.1rem; }
  .feat-grid,.testi-grid,.stat-strip,.road,.yt-grid{ grid-template-columns:1fr; }

  /* --- Ẩn thẻ nổi để KHÔNG che ảnh trên điện thoại --- */
  .float-card{ display:none; }

  /* --- Khoảng cách gọn trên điện thoại --- */
  #top{ padding-top:104px; padding-bottom:28px; }
  .sec{ padding:44px 0; }
  .sec.tight{ padding:32px 0; }
  .hero-grid,.two,.two.rev{ gap:24px; }
  .sec h2{ font-size:clamp(1.6rem,6vw,2rem); }
  footer.site{ padding:40px 0 32px; margin-top:24px; }
}