/* ============================================================
   ĐẶC SAN 25 NĂM QUẢNG CÁO VIỆT — daihoi.tiepthigiadinh.vn
   Giao diện: nền đen ấn phẩm, vàng kim, hiệu ứng ánh sáng.
   HTML + CSS + JS thuần, không framework.
   ============================================================ */

:root{
  --ink:        #09090b;
  --ink-2:      #0e0e11;
  --surface:    rgba(255,255,255,.035);
  --surface-2:  rgba(255,255,255,.055);
  --line:       rgba(226,190,112,.16);
  --line-soft:  rgba(255,255,255,.08);

  --gold-1:     #f6e3b0;
  --gold-2:     #e0bb6c;
  --gold-3:     #b8873a;
  --gold-grad:  linear-gradient(135deg,#f9ecc6 0%,#e3c074 38%,#b8873a 72%,#f1dda6 100%);

  --txt:        #ece8e0;
  --txt-2:      #a9a39a;
  --txt-3:      #7c766d;
  --red:        #d2232a;

  --sans:       'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif:      'Playfair Display', 'Times New Roman', Georgia, serif;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --wrap: 1180px;
  --shadow: 0 24px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.18; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 14px}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---------- Nền hiệu ứng ---------- */
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.orb-1{width:620px; height:620px; top:-240px; right:-160px;
  background:radial-gradient(circle,rgba(224,187,108,.30),rgba(224,187,108,0) 70%)}
.orb-2{width:520px; height:520px; top:52%; left:-220px;
  background:radial-gradient(circle,rgba(210,35,42,.18),rgba(210,35,42,0) 70%)}
.grain{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:3px 3px}
body > *:not(.bg-fx){position:relative; z-index:1}

/* ---------- Nút ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{
  background:var(--gold-grad); color:#241a06;
  box-shadow:0 10px 30px rgba(224,187,108,.26), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gold::after{
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg); animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,62%{left:-130%} 88%,100%{left:150%}}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(224,187,108,.4)}
.btn-line{background:var(--surface); color:var(--txt); border-color:var(--line)}
.btn-line:hover{background:var(--surface-2); border-color:var(--gold-2); color:var(--gold-1); transform:translateY(-2px)}
.btn-sm{padding:11px 20px; font-size:14px}
.btn-block{display:flex; width:100%; padding:17px 26px; font-size:16px}

/* ---------- Thanh điều hướng ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(9,9,11,.72);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s ease, background .3s ease;
}
.topbar.is-stuck{background:rgba(9,9,11,.92); box-shadow:0 10px 36px rgba(0,0,0,.5)}
.topbar-in{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0}
.brand-logo{
  width:42px; height:42px; flex:none; border-radius:11px; overflow:hidden;
  background:#fff; padding:2px; box-shadow:0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.4);
}
.brand-logo img{width:100%; height:100%; object-fit:contain; border-radius:9px}
.brand-txt{display:flex; flex-direction:column; min-width:0}
.brand-txt b{font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.brand-txt i{font-style:normal; font-size:11.5px; color:var(--txt-3); white-space:nowrap}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  padding:9px 14px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--txt-2);
  transition:color .2s ease, background .2s ease;
}
.nav a:hover,.nav a.active{color:var(--gold-1); background:var(--surface)}

.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); padding:0; cursor:pointer}
.burger span{display:block; width:18px; height:1.6px; background:var(--gold-1); margin:4px auto; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* ---------- Tiêu đề chung ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); margin:0 0 18px;
  padding:7px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface);
}
.dia{color:var(--gold-1); font-size:10px}
.h-sec{
  font-family:var(--serif); font-size:clamp(28px,4.4vw,48px); font-weight:600;
  line-height:1.16; max-width:18ch; margin-bottom:16px;
}
.gold-text{
  display:block;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sub{color:var(--txt-2); max-width:62ch; font-size:15.5px}
.section{padding:88px 0; scroll-margin-top:84px}

/* ---------- Thẻ ---------- */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border:1px solid var(--line-soft); border-radius:var(--r-l);
  padding:28px; position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,227,176,.5),transparent);
  opacity:.6;
}

/* ---------- HERO ---------- */
.hero{padding:64px 0 24px; position:relative}
.hero-in{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(38px,6.1vw,68px); line-height:1.08; letter-spacing:-.02em;
  margin:0 0 20px;
}
.hero h1 .gold-text{margin-top:4px}
.lede{color:var(--txt-2); font-size:17px; max-width:54ch; margin-bottom:30px}
.hero-act{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px}
.hero-dl{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14.5px; color:var(--txt-2); margin:0}
.hero-dl b{color:var(--txt)}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--gold-2); flex:none;
  box-shadow:0 0 0 0 rgba(224,187,108,.6); animation:pulse 2.2s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 12px rgba(224,187,108,0)}
  100%{box-shadow:0 0 0 0 rgba(224,187,108,0)}
}
.chip{
  padding:5px 13px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--gold-1); background:rgba(224,187,108,.1); border:1px solid var(--line);
}

.hero-art{position:relative; padding:14px}
.cover-glow{
  position:absolute; inset:-6% -4% -10%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%,rgba(224,187,108,.4),rgba(224,187,108,0) 68%);
  filter:blur(26px); animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75; transform:scale(1)} 50%{opacity:1; transform:scale(1.05)}}
.cover{
  position:relative; margin:0; border-radius:var(--r-l); overflow:hidden;
  border:1px solid rgba(246,227,176,.3);
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.4) inset;
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.cover:hover{transform:perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-6px)}
.cover img{width:100%; height:auto}
.cover figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 20px 14px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:#efe6d2;
  background:linear-gradient(transparent,rgba(5,5,6,.85));
}
.cover-badge{
  position:absolute; top:-2px; right:-4px; z-index:2;
  padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600; color:#241a06;
  background:var(--gold-grad); box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.cover-badge b{font-weight:800}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:56px; border:1px solid var(--line-soft); border-radius:var(--r-m);
  background:var(--line-soft); overflow:hidden;
}
.stats li{background:var(--ink-2); padding:24px 20px; text-align:center}
.stats b{
  display:block; font-family:var(--serif); font-size:clamp(22px,3vw,32px); font-weight:600;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stats span{display:block; font-size:13px; color:var(--txt-3); margin-top:4px}

/* ---------- Băng chạy ---------- */
.ribbon{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(224,187,108,.07),rgba(224,187,108,.14),rgba(224,187,108,.07));
  padding:14px 0; margin:40px 0 0;
}
.ribbon-track{display:flex; align-items:center; gap:26px; white-space:nowrap; width:max-content;
  animation:marquee 34s linear infinite}
.ribbon-track span{
  font-family:var(--serif); font-size:18px; letter-spacing:.04em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ribbon-track i{color:var(--gold-3); font-style:normal; font-size:11px}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Thư mời ---------- */
.letter-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:22px; margin-top:34px; align-items:start}
.letter{padding:36px 38px}
.letter p{color:var(--txt-2); font-size:15.6px}
.letter .to{color:var(--gold-1); font-weight:500}
.letter .drop::first-letter{
  float:left; font-family:var(--serif); font-size:58px; line-height:.9; font-weight:600;
  padding:4px 12px 0 0;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.letter .thanks{color:var(--txt); font-weight:500; margin-bottom:0}
.sign{margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft)}
.sign-line{display:block; width:62px; height:2px; margin-bottom:12px; background:var(--gold-grad); border-radius:2px}
.sign b{display:block; font-size:14px; letter-spacing:.1em; color:var(--gold-1)}
.sign i{font-style:normal; font-size:13.5px; color:var(--txt-3)}

.values{display:grid; gap:14px}
.val{padding:24px 26px; transition:transform .3s ease, border-color .3s ease}
.val:hover{transform:translateY(-3px); border-color:var(--line)}
.val-ico{
  display:inline-block; font-family:var(--serif); font-size:15px; font-weight:600;
  width:38px; height:38px; line-height:38px; text-align:center; border-radius:50%;
  border:1px solid var(--line); color:var(--gold-1); background:rgba(224,187,108,.08); margin-bottom:12px;
}
.val h3{font-size:17px; margin-bottom:6px}
.val p{color:var(--txt-2); font-size:14.6px; margin:0}

/* ---------- Ấn phẩm ---------- */
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
.spec{padding:24px 26px; transition:transform .3s ease, border-color .3s ease}
.spec:hover{transform:translateY(-3px); border-color:var(--line)}
.spec b{display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); margin-bottom:8px}
.spec span{color:var(--txt-2); font-size:15px}

/* ---------- Bảng giá ---------- */
.group{margin-top:44px}
.group-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:22px}
.gno{
  font-family:var(--serif); font-size:15px; font-weight:600; flex:none;
  width:46px; height:46px; line-height:44px; text-align:center; border-radius:14px;
  border:1px solid var(--line); color:var(--gold-1); background:rgba(224,187,108,.08);
}
.group-head h3{font-family:var(--serif); font-size:25px; font-weight:600; margin-bottom:3px}
.group-head p{color:var(--txt-3); font-size:14.5px; margin:0}

.pgrid{display:flex; flex-wrap:wrap; gap:16px; justify-content:center}
.pkg{
  flex:1 1 300px; max-width:calc(33.333% - 11px);
  display:flex; flex-direction:column; padding:26px 24px 24px; border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line-soft); position:relative; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pkg:hover{transform:translateY(-5px); border-color:var(--line); box-shadow:0 20px 44px rgba(0,0,0,.45)}
.pkg.star{
  border-color:rgba(224,187,108,.45);
  background:linear-gradient(180deg,rgba(224,187,108,.13),rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(224,187,108,.14), 0 18px 46px rgba(0,0,0,.45);
}
.pkg.star::after{
  content:''; position:absolute; inset:-40% -60% auto; height:70%;
  background:radial-gradient(ellipse at 50% 0,rgba(224,187,108,.35),transparent 70%);
  pointer-events:none;
}
.flag{
  align-self:flex-start; margin-bottom:12px; padding:5px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#241a06; background:var(--gold-grad);
}
.pkg h4{font-family:var(--serif); font-size:23px; font-weight:600; margin:0 0 12px}
.pkg .pages,.pkg .gift{
  position:relative; padding-left:20px; color:var(--txt-2); font-size:14.4px; margin-bottom:6px;
}
.pkg .pages::before,.pkg .gift::before{
  content:'✦'; position:absolute; left:0; top:0; font-size:9px; color:var(--gold-2); line-height:1.9;
}
.pkg .price{
  margin:16px 0 18px; padding-top:16px; border-top:1px dashed rgba(255,255,255,.12);
  font-family:var(--serif); font-size:27px; font-weight:600; letter-spacing:-.01em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pkg .btn{margin-top:auto; width:100%}

.benefit{
  margin-top:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 22px; border-radius:var(--r-m);
  border:1px dashed var(--line); background:rgba(224,187,108,.05); color:var(--txt-2); font-size:14.6px;
}
.benefit b{color:var(--gold-1); font-weight:600}
.terms{margin-top:28px; padding:24px 26px}
.terms h3{font-size:16px; color:var(--gold-1); margin-bottom:8px}
.terms p{color:var(--txt-2); font-size:14.6px; margin:0}
.terms b{color:var(--txt)}

/* ---------- Quy trình ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; counter-reset:s}
.step{padding:30px 26px 26px; transition:transform .3s ease, border-color .3s ease}
.step:hover{transform:translateY(-4px); border-color:var(--line)}
.step-no{
  display:block; font-family:var(--serif); font-size:34px; font-weight:600; line-height:1; margin-bottom:14px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.step h3{font-size:18px; margin-bottom:7px}
.step p{color:var(--txt-2); font-size:14.6px; margin:0}

/* ---------- Đăng ký ---------- */
.register{padding-bottom:104px}
.reg-grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:20px; margin-top:34px; align-items:start}
.side{padding:28px 28px 26px; position:sticky; top:92px}
.side-sel{
  padding:16px 18px; border-radius:var(--r-m); border:1px solid var(--line);
  background:rgba(224,187,108,.08); margin-bottom:16px;
}
.side-sel span,.side-dl span{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3)}
.side-sel b{
  display:block; margin-top:5px; font-family:var(--serif); font-size:20px; font-weight:600;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.side-dl{padding:0 2px 18px; border-bottom:1px solid var(--line-soft); margin-bottom:18px}
.side-dl b{display:block; font-size:19px; margin-top:5px}
.side-dl i{font-style:normal; font-size:13.5px; color:var(--gold-2)}
.side-contact li{display:flex; flex-direction:column; gap:2px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
.side-contact li:last-child{border:0}
.side-contact span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.side-contact a{font-size:15px; color:var(--txt); transition:color .2s ease}
.side-contact a[href]:hover{color:var(--gold-1)}
.side-note{margin:16px 0 0; font-size:13px; color:var(--txt-3); line-height:1.55}

.form{padding:32px 34px 30px}
.form h3{font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:20px}
.field{margin-bottom:16px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; font-size:13.5px; font-weight:500; color:var(--txt-2); margin-bottom:7px}
.req{color:var(--gold-2)}
input,select,textarea{
  width:100%; padding:14px 16px; border-radius:14px;
  background:rgba(0,0,0,.35); border:1px solid var(--line-soft); color:var(--txt);
  font-family:var(--sans); font-size:15px; line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{resize:vertical; min-height:92px}
input::placeholder,textarea::placeholder{color:#55514b}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold-2); background:rgba(0,0,0,.5);
  box-shadow:0 0 0 4px rgba(224,187,108,.14);
}
select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
select option,select optgroup{background:#15151a; color:var(--txt)}
input.bad,select.bad{border-color:#e05a4e; box-shadow:0 0 0 4px rgba(224,90,78,.14)}
.form-foot{margin:14px 0 0; text-align:center; font-size:13.5px; color:var(--txt-3)}
.form-foot a{color:var(--gold-1); font-weight:600}
.form-msg{
  margin-top:18px; padding:18px 20px; border-radius:var(--r-m);
  border:1px solid var(--line); background:rgba(224,187,108,.1);
  font-size:14.6px; color:var(--txt);
}
.form-msg.err{border-color:rgba(224,90,78,.5); background:rgba(224,90,78,.12)}
.form-msg b{color:var(--gold-1)}
.form-msg.err b{color:#ffb4ab}
.form-msg pre{
  margin:12px 0 0; padding:14px; border-radius:12px; background:rgba(0,0,0,.45);
  font-size:12.5px; line-height:1.6; color:var(--txt-2); white-space:pre-wrap; word-break:break-word;
  max-height:220px; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- Chân trang ---------- */
.foot{border-top:1px solid var(--line-soft); background:rgba(0,0,0,.45); padding:52px 0 0}
.foot-in{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; padding-bottom:36px}
.foot-brand{display:flex; gap:14px; align-items:flex-start}
.foot-brand b{display:block; font-size:16px}
.foot-brand span{display:block; font-size:13.5px; color:var(--txt-3)}
.foot-col{display:flex; flex-direction:column; gap:7px}
.foot-col b{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); margin-bottom:4px}
.foot-col a,.foot-col span{font-size:14.6px; color:var(--txt-2); transition:color .2s ease}
.foot-col a:hover{color:var(--gold-1)}
.foot-end{padding:18px 20px 26px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--txt-3)}

/* ---------- Nút nổi & thanh CTA ---------- */
.fab{position:fixed; right:18px; bottom:22px; z-index:55; display:flex; flex-direction:column; gap:10px}
.fab-btn{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-grad); box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 6px rgba(224,187,108,.12);
  transition:transform .25s ease;
}
.fab-btn:hover{transform:scale(1.08)}
.fab-btn svg{width:21px; height:21px; fill:#241a06}

.mbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:58;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(9,9,11,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);
}
.mbar-call{
  flex:1; display:flex; align-items:center; justify-content:center; padding:13px;
  border-radius:999px; border:1px solid var(--line); color:var(--gold-1);
  font-size:14.5px; font-weight:600; background:var(--surface);
}
.mbar .btn{flex:1.2}

/* ---------- Hiện dần khi cuộn ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ============================================================
   ĐÁP ỨNG
   ============================================================ */
/* Nhóm 5 gói: xuống hàng 3 + 2, hàng cuối canh giữa */
@media (min-width:1041px){
  .pkg{min-width:300px}
}

@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .hero-art{max-width:460px}
  .letter-grid{grid-template-columns:1fr}
  .values{grid-template-columns:repeat(3,1fr)}
  .reg-grid{grid-template-columns:1fr}
  .side{position:static}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{
    position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    padding:14px 20px 20px; background:rgba(9,9,11,.97);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-soft); box-shadow:0 20px 40px rgba(0,0,0,.5);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s ease;
  }
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:13px 14px; font-size:16px; border-radius:12px}
  .burger{display:block}
  .nav-cta{display:none}
  .section{padding:64px 0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .pkg{max-width:calc(50% - 8px)}
  .values{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .fab{bottom:86px}
  .mbar{display:flex}
  .foot-end{padding-bottom:86px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding-top:40px}
  .brand-txt i{display:none}
  .brand-txt b{font-size:14px}
  .hero h1{font-size:clamp(32px,9vw,44px)}
  .lede{font-size:16px}
  .hero-act{gap:10px}
  .hero-act .btn{width:100%}
  .card{padding:22px 20px; border-radius:var(--r-m)}
  .letter{padding:24px 22px}
  .letter .drop::first-letter{font-size:46px}
  .form{padding:24px 20px}
  .side{padding:22px 20px}
  .spec-grid,.steps{grid-template-columns:1fr}
  .pkg{flex:1 1 100%; max-width:100%}
  .stats{grid-template-columns:1fr 1fr}
  .stats li{padding:18px 12px}
  .row{grid-template-columns:1fr; gap:0}
  .h-sec{font-size:clamp(25px,7.4vw,34px); max-width:none}
  .group-head h3{font-size:21px}
  .ribbon-track span{font-size:15px}
  .foot-in{grid-template-columns:1fr; gap:22px}
  .fab{right:14px; bottom:84px}
  .fab-btn{width:44px; height:44px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}