/* ═══════════════════════════════════════════════════
   Bột & Nụ Thần Hương — Kim Tâm Cát
   Bảng màu: KEM · ĐỎ TƯƠI · mực đen
   ═══════════════════════════════════════════════════ */

:root{
  /* mực — đen trung tính, không ngả nâu */
  --ink:#211E1E;
  --ink-2:#4A4444;
  --muted:#877E7E;

  /* kem */
  --cream:#FFF8EE;
  --cream-2:#FCEDDB;
  --paper:#FFFFFF;

  /* đỏ tươi */
  --red:#E11B22;
  --red-deep:#A81219;
  --red-dark:#7C0D12;
  --red-soft:#FCE2E0;

  --line:#F1DFCB;
  --line-red:#F3D2CF;

  --shadow:0 1px 2px rgba(33,30,30,.05), 0 8px 26px rgba(33,30,30,.07);
  --shadow-lg:0 2px 6px rgba(33,30,30,.06), 0 22px 56px rgba(124,13,18,.14);
  --r-s:8px; --r-m:14px; --r-l:22px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink-2);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); line-height:1.18; margin:0 0 .5em; font-weight:700}
p{margin:0 0 1em}
a{color:var(--red-deep)}

.wrap{width:min(1140px,92vw); margin-inline:auto}
.wrap.narrow{width:min(780px,92vw)}
.narrow-x{max-width:720px; margin-inline:auto}
.center{text-align:center}

.demo-note{
  background:var(--ink); color:#FFF0EE; text-align:center;
  font-size:13.5px; padding:7px 14px; letter-spacing:.02em;
}

/* ── nhãn nhỏ trên tiêu đề ─────────────────────── */
.eyebrow{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--muted); margin:0 0 12px;
}
.eyebrow.gold{color:var(--red)}

.sec{padding:88px 0}
.sec-title{font-size:clamp(28px,4.2vw,42px); letter-spacing:-.01em}
.sec-title.big{font-size:clamp(32px,5.2vw,54px)}
.sec-lead{font-size:19px; color:var(--ink-2)}
.fineprint{font-size:13.5px; color:var(--muted); margin-top:28px}

/* ── nút ───────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:17px; font-weight:700; line-height:1;
  padding:17px 30px; border-radius:var(--r-s); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background:linear-gradient(180deg,#EC2A31,#C9151C); color:#fff;
  box-shadow:0 2px 0 var(--red-dark), 0 10px 24px rgba(168,18,25,.34);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 2px 0 var(--red-dark), 0 16px 32px rgba(168,18,25,.42)}
.btn-primary:active{transform:translateY(1px); box-shadow:0 1px 0 var(--red-dark)}
.btn-outline{background:transparent; color:var(--red-deep); border-color:var(--red)}
.btn-outline:hover{background:var(--red-soft)}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn-wide{width:100%}

/* ═══ 1. MỞ ĐẦU ══════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 80% 6%, rgba(255,140,120,.30), transparent 62%),
    linear-gradient(165deg,#E11B22 0%,#C3151C 48%,#8E1015 100%);
  color:#FFEDE9; padding:64px 0 84px;
}
.hero-smoke{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(560px 340px at 8% 92%, rgba(255,205,150,.22), transparent 70%),
    radial-gradient(380px 280px at 60% 58%, rgba(255,255,255,.10), transparent 70%);
}
.hero-grid{
  position:relative; display:grid; gap:56px; align-items:center;
  grid-template-columns:1.1fr .9fr;
}
.hero .eyebrow{color:#FFD9C9}
.hero h1{
  color:#FFFFFF; font-size:clamp(34px,5.6vw,60px); letter-spacing:-.02em; margin-bottom:20px;
}
.lead{font-size:19.5px; color:#FFE2DA; max-width:56ch}
.lead strong{color:#FFFFFF}

.hero-points{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:11px}
.hero-points li{position:relative; padding-left:30px; color:#FFE6DE; font-size:16.5px}
.hero-points li::before{
  content:""; position:absolute; left:0; top:.55em; width:17px; height:17px;
  border-radius:50%; background:#FFF3E6;
  box-shadow:0 0 0 4px rgba(255,255,255,.16);
}
.hero-points li::after{
  content:""; position:absolute; left:5.5px; top:calc(.55em + 4px);
  width:5px; height:9px; border:2px solid var(--red-deep); border-top:0; border-left:0;
  transform:rotate(42deg);
}

.hero-price{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 22px; border-radius:var(--r-m);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,240,235,.34);
  margin-bottom:24px;
}
.price-now{font-family:var(--serif); color:#FFFFFF; line-height:1; white-space:nowrap}
.price-now .num{font-size:44px; font-weight:700; letter-spacing:-.02em}
.price-now .cur{font-size:22px; margin-left:3px}
.price-note{font-size:14.5px; color:#FFE2DA; line-height:1.5}
.price-note strong{color:#FFFFFF}

.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero .btn-primary{
  background:#FFF7EC; color:var(--red-deep);
  box-shadow:0 2px 0 rgba(124,13,18,.5), 0 12px 26px rgba(80,6,10,.3);
}
.hero .btn-primary:hover{background:#fff}
.hero .btn-ghost{color:#FFEDE9; border-color:rgba(255,237,233,.45)}
.hero .btn-ghost:hover{border-color:#FFEDE9; background:rgba(255,255,255,.1)}
.hero-gift{margin-top:22px; font-size:15px; color:#FFE2DA}
.hero-gift strong{color:#FFFFFF}

/* ảnh mở đầu — ảnh DỌC, giữ nguyên tỉ lệ 2:3 */
.hero-visual{display:grid; gap:18px}
.product-card{margin:0}
.product-img{
  position:relative; aspect-ratio:2/3; border-radius:var(--r-l); overflow:hidden;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,240,235,.3); box-shadow:var(--shadow-lg);
}
.product-img img{width:100%; height:100%; object-fit:cover}
.product-card figcaption{margin-top:14px; text-align:center}
.seal{
  display:inline-block; font-size:13.5px; color:#FFE2DA;
  border:1px dashed rgba(255,237,233,.5); border-radius:100px; padding:7px 16px;
}
.seal strong{color:#FFFFFF}

.trust-row{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; text-align:center;
}
.trust-row li{padding:14px 8px; border-radius:var(--r-s); background:rgba(255,255,255,.12)}
.trust-row b{display:block; font-family:var(--serif); font-size:27px; color:#FFFFFF; line-height:1}
.trust-row span{display:block; margin-top:5px; font-size:12.5px; color:#FFD9CF; line-height:1.4}

/* ═══ 2. VẤN ĐỀ ══════════════════════════════════ */
.sec-pain{background:var(--cream-2)}
.sec-pain .sec-title{text-align:center; margin-bottom:44px}
.pain-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.pain{
  display:flex; gap:16px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-m); padding:22px 24px; box-shadow:var(--shadow);
}
.pain-ico{font-size:26px; line-height:1.2}
.pain p{margin:0; font-size:16.5px}
.pain em{color:var(--red); font-style:normal; font-weight:600}
.pain-close{
  margin:40px auto 0; max-width:660px; text-align:center;
  font-family:var(--serif); font-size:21px; line-height:1.6; color:var(--ink);
}
.pain-close strong{color:var(--red-deep)}

/* ═══ 3. GIẢI PHÁP ═══════════════════════════════ */
.sec-solution{padding:96px 0}
.sec-solution .sec-lead{max-width:640px; margin-inline:auto}

/* ═══ 3b. ẢNH THẬT ═══════════════════════════════ */
.sec-gallery{background:var(--cream-2)}
.sec-gallery .sec-lead{margin-bottom:12px}

.gal-block{margin-top:56px}
.gal-block:first-of-type{margin-top:40px}
.gal-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:22px; border-bottom:2px solid var(--line-red);
}
.gal-head h3{margin:0; font-size:25px}
.gal-head span{font-size:15px; color:var(--muted)}
.gal-head b{color:var(--red-deep)}

/* ảnh ngang dẫn đầu — đúng tỉ lệ 3:2, không cắt */
.gal-lead{margin:0 0 16px}
.gal-lead img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--r-l); border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--paper);
}
.gal-lead figcaption{
  margin-top:12px; text-align:center; font-size:15.5px; color:var(--muted);
}

/* cặp ảnh dọc — đúng tỉ lệ 2:3, không cắt */
.gal-pair{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.gal-pair figure{margin:0}
.gal-pair img{
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border-radius:var(--r-l); border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--paper);
}
.gal-pair figcaption{
  margin-top:11px; font-size:15px; color:var(--muted); line-height:1.55; text-align:center;
}

/* hàng ba ảnh dọc */
.gal-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gal-trio figure{margin:0}
.gal-trio img{
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border-radius:var(--r-l); border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--paper);
}
.gal-trio figcaption{
  margin-top:11px; font-size:15px; color:var(--muted); line-height:1.55; text-align:center;
}

/* ảnh ngang đứng một mình thì cho hẹp lại cho cân */
.gal-solo{max-width:860px; margin-inline:auto}

/* khối quà tặng */
.gal-gift{
  margin-top:56px; display:grid; grid-template-columns:.8fr 1.2fr; gap:36px;
  align-items:center; background:var(--paper); border:2px solid var(--red);
  border-radius:var(--r-l); padding:30px clamp(22px,3.5vw,38px); box-shadow:var(--shadow-lg);
}
.gal-gift img{
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border-radius:var(--r-m); border:1px solid var(--line);
}
.gal-gift h3{font-size:26px; margin-bottom:12px}
.gal-gift p{font-size:16.5px; margin-bottom:0}
.gal-gift .gift-tag{
  display:inline-block; background:var(--red); color:#fff; font-size:12.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; margin-bottom:14px;
}

/* ═══ 4. THÀNH PHẦN ══════════════════════════════ */
.sec-ingredients{
  background:linear-gradient(165deg,#C3151C,#8E1015); color:#FFE2DA;
}
.sec-ingredients h2, .sec-ingredients h3{color:#FFFFFF}
.sec-ingredients .sec-lead{color:#FFD9CF; margin-bottom:48px}
.sec-ingredients .eyebrow.gold{color:#FFD9C9}
.sec-ingredients .fineprint{color:#F3B7AC}
.ing-cols{display:grid; grid-template-columns:1fr 1fr; gap:44px}
.ing-col h3{font-size:18px; padding-bottom:12px; border-bottom:1px solid rgba(255,240,235,.3); margin-bottom:6px}
.ing-list{list-style:none; margin:0; padding:0}
.ing-list li{padding:13px 0; border-bottom:1px solid rgba(255,240,235,.14)}
.ing-list b{display:block; color:#FFFFFF; font-size:16.5px; font-weight:600}
.ing-list span{display:block; font-size:14.5px; color:#FFC9BF}

/* ═══ 5. CÁCH DÙNG ═══════════════════════════════ */
.sec-use .sec-title{margin-bottom:44px}
.use-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.use-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:30px 28px 26px; box-shadow:var(--shadow); position:relative;
}
.use-num{
  font-family:var(--serif); font-size:15px; font-weight:700; color:var(--red);
  letter-spacing:.14em; margin-bottom:10px;
}
.use-card h3{font-size:23px; margin-bottom:12px}
.use-card p{font-size:16px; color:var(--ink-2)}
.use-when{list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.use-when li{position:relative; padding-left:19px; font-size:14.8px; color:var(--muted); margin-bottom:7px}
.use-when li::before{content:"—"; position:absolute; left:0; color:var(--red)}
.use-foot{
  margin:36px auto 0; max-width:640px; text-align:center; font-size:17px; color:var(--muted);
}
.use-foot b{color:var(--ink)}

/* ═══ 6. DỊP DÙNG ════════════════════════════════ */
.sec-occasion{background:var(--cream-2)}
.sec-occasion .sec-title{margin-bottom:40px}
.occ-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.occ{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--r-s); padding:22px 24px;
}
.occ h4{font-size:18px; margin-bottom:8px}
.occ p{margin:0; font-size:15.5px; color:var(--muted)}

/* ═══ 6b. PHẢN HỒI KHÁCH ═════════════════════════ */
.sec-review .sec-lead{margin-bottom:40px}

/* ba cột: ảnh dọc · hai ảnh ngang xếp chồng · ảnh dọc — không cắt ảnh nào */
.kh-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:54px}
.kh-row figure{margin:0; align-self:start}
.kh-row > *{align-self:start}
.kh-tall img{width:100%; height:auto; aspect-ratio:2/3; object-fit:cover}
.kh-stack{display:grid; gap:18px; align-content:start}
.kh-stack img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.kh-row img{
  border-radius:var(--r-m); border:1px solid var(--line); box-shadow:var(--shadow);
}
.kh-cap{
  grid-column:1/-1; margin:4px 0 0; text-align:center;
  font-size:14.5px; color:var(--muted);
}

.rv-groups{display:grid; gap:34px}
.rv-group{
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:var(--r-l); padding:30px clamp(20px,3.5vw,36px); box-shadow:var(--shadow);
}
.rv-group h3{font-size:21px; margin-bottom:14px; display:flex; align-items:center; gap:10px}
.rv-ico{font-size:24px; line-height:1}
.rv-quote{
  margin:0 0 22px; padding:0 0 0 18px; border-left:2px solid var(--line-red);
  font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink-2);
}
.rv-quote em{font-style:normal; font-weight:700; color:var(--red-deep)}

/* ảnh chụp màn hình: xếp kiểu gạch, giữ NGUYÊN cả tấm, không cắt */
.rv-shots{columns:4 190px; column-gap:14px}
.rv-shots img{
  width:100%; height:auto; margin:0 0 14px; break-inside:avoid;
  border-radius:var(--r-s); border:1px solid var(--line); background:#fff;
  box-shadow:0 2px 10px rgba(33,30,30,.09);
}
.rv-shots img:hover{filter:brightness(1.03)}

.rv-note{
  margin:36px auto 0; max-width:700px; text-align:center;
  font-size:14px; line-height:1.7; color:var(--muted);
  padding:16px 22px; border:1px dashed var(--line-red); border-radius:var(--r-m);
}

/* ═══ 7. BÍ PHÁP ═════════════════════════════════ */
.secret-box{
  background:linear-gradient(165deg,#C3151C,#8E1015); color:#FFE2DA;
  border-radius:var(--r-l);
  padding:48px clamp(26px,5vw,54px); box-shadow:var(--shadow-lg);
}
.secret-box h2{color:#FFFFFF; margin-bottom:16px}
.secret-box h2 em{color:#FFD9C9; font-style:italic}
.secret-box .eyebrow{color:#FFD9C9}
.secret-box > p{color:#FFD9CF; font-size:17px}
.secret-steps{counter-reset:s; list-style:none; margin:26px 0; padding:0}
.secret-steps li{
  counter-increment:s; position:relative; padding-left:48px; margin-bottom:16px;
  color:#FFE2DA; font-size:16.5px;
}
.secret-steps li::before{
  content:counter(s); position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%; display:grid; place-content:center;
  background:#FFF7EC; color:var(--red-deep); font-weight:700; font-size:15px; font-family:var(--sans);
}
.secret-note{
  margin:0; padding:16px 20px; border-radius:var(--r-s);
  background:rgba(0,0,0,.22); border:1px solid rgba(255,240,235,.3);
  font-size:14.8px; color:#FFE2DA;
}

/* ═══ 8. BẢNG GIÁ ════════════════════════════════ */
.sec-price .sec-title{margin-bottom:46px}
.pack-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start}
.pack{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:32px 28px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.pack h3{font-size:20px; margin-bottom:4px}
.pack-qty{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.pack-price{font-family:var(--serif); font-size:22px; color:var(--ink); line-height:1; margin-bottom:6px}
.pack-price span{font-size:40px; font-weight:700; letter-spacing:-.02em}
.pack-price small{font-size:14px; color:var(--muted); font-family:var(--sans); margin-left:4px}
.pack-save{font-size:14.5px; color:var(--red); font-weight:600; margin:0 0 10px}
.pack ul{list-style:none; margin:18px 0 26px; padding:18px 0 0; border-top:1px solid var(--line); flex:1}
.pack ul li{position:relative; padding-left:24px; font-size:15.5px; margin-bottom:10px; color:var(--ink-2)}
.pack ul li::before{content:"✓"; position:absolute; left:0; color:var(--red); font-weight:700}
.pack ul li i{font-style:italic; color:var(--muted)}

.pack-best{
  border:2px solid var(--red); box-shadow:var(--shadow-lg); position:relative;
  background:linear-gradient(180deg,#FFFDFB,#FFF4F2);
}
.pack-flag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:100px;
  white-space:nowrap;
}

/* máy tính đơn */
.calc{
  margin-top:34px; background:linear-gradient(165deg,#C3151C,#8E1015); color:#FFE2DA;
  border-radius:var(--r-l);
  padding:34px clamp(24px,4vw,44px); box-shadow:var(--shadow-lg);
  display:grid; gap:18px; max-width:640px; margin-inline:auto;
}
.calc h3{color:#FFFFFF; font-size:21px; margin:0; text-align:center}
.calc-row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.calc-row label{font-size:16px; color:#FFD9CF}
.stepper{display:flex; align-items:center; border:1px solid rgba(255,240,235,.4); border-radius:var(--r-s); overflow:hidden}
.stepper button{
  width:46px; height:46px; border:0; background:rgba(255,255,255,.14); color:#FFFFFF;
  font-size:22px; cursor:pointer; line-height:1;
}
.stepper button:hover{background:rgba(255,255,255,.26)}
.stepper input{
  width:66px; height:46px; border:0; background:transparent; color:#FFFFFF;
  text-align:center; font-size:19px; font-weight:700; font-family:var(--sans);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.calc-out{margin:0; display:grid; gap:10px}
.calc-out > div{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.calc-out dt{color:#FFC9BF; font-size:15px}
.calc-out dd{margin:0; color:#FFE2DA; font-size:16px; font-weight:600}
.calc-out dd.save{color:#FFF3E6}
.calc-total{padding-top:12px; border-top:1px solid rgba(255,240,235,.28)}
.calc-total dt{color:#FFD9CF !important; font-size:17px !important}
.calc-total dd{font-family:var(--serif); font-size:30px !important; color:#FFFFFF !important; line-height:1}
.calc-gift{margin:0; font-size:14.5px; color:#FFD9CF}
.calc-hint{margin:0; font-size:14.5px; color:#FFE9C9}
.calc-hint b{color:#FFFFFF}
.calc .btn-primary{
  background:#FFF7EC; color:var(--red-deep);
  box-shadow:0 2px 0 rgba(124,13,18,.5), 0 12px 26px rgba(80,6,10,.3);
}
.calc .btn-primary:hover{background:#fff}

/* ═══ 9. GIÁ TRỊ ═════════════════════════════════ */
.sec-values{background:var(--cream-2)}
.sec-values .sec-lead{margin-bottom:40px}
.value-row{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:14px; text-align:center;
}
.value-row li{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:22px 16px}
.value-row b{display:block; font-family:var(--serif); font-size:19px; color:var(--red-deep); margin-bottom:6px}
.value-row span{font-size:14px; color:var(--muted); line-height:1.5}

/* ═══ 10. FAQ ════════════════════════════════════ */
.sec-faq .sec-title{margin-bottom:36px}
.faq{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 54px 20px 24px; position:relative;
  font-family:var(--serif); font-size:19px; font-weight:700; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:26px; font-weight:400; color:var(--red); line-height:1;
}
.faq[open] summary::after{content:"−"}
.faq p{margin:0; padding:0 24px 22px; font-size:16px; color:var(--ink-2)}

/* ═══ 11. ĐẶT HÀNG ═══════════════════════════════ */
.sec-order{padding-bottom:110px}
.order-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(28px,5vw,52px); box-shadow:var(--shadow-lg);
}
.order-sub{color:var(--muted); font-size:16px; margin-bottom:26px}
.field{margin-bottom:18px}
.field label{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:7px}
.field label span{color:var(--red)}
.field label small{font-weight:400; color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-family:var(--sans); font-size:16.5px; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-s);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--red); background:#fff;
  box-shadow:0 0 0 4px rgba(225,27,34,.14);
}
.field input.bad,.field textarea.bad{border-color:var(--red); background:#FFF5F4}
.field-row{display:grid; grid-template-columns:2fr 1fr; gap:14px}
.error{margin:6px 0 0; font-size:13.5px; color:var(--red-deep); min-height:0}
.error:empty{display:none}

.order-sum{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--red-soft); border:1px solid var(--line-red); border-radius:var(--r-s);
  padding:16px 20px; margin:22px 0 18px; font-size:16px; color:var(--ink-2);
}
.order-sum b{font-family:var(--serif); font-size:26px; color:var(--red-deep)}
.order-fine{margin:12px 0 0; text-align:center; font-size:13.5px; color:var(--muted)}
.ok{
  margin:16px 0 0; padding:14px 18px; border-radius:var(--r-s);
  background:#F2F8EF; border:1px solid #C6DFBB; color:#3D6330; font-size:15.5px;
}
.order-alt{margin:26px 0 0; text-align:center; font-size:16px; color:var(--muted)}
.phone-link{font-weight:700; font-size:19px; color:var(--red-deep); text-decoration:none}
.order-alt small{font-size:12.5px}
.order-alt code{background:var(--cream-2); padding:2px 6px; border-radius:4px; font-size:12px}

/* ═══ FOOTER ═════════════════════════════════════ */
.foot{background:var(--ink); color:#B9AFAF; padding:52px 0 96px}
.foot-brand{color:#FFF0EE; font-size:16px; margin-bottom:12px}
.foot-brand strong{color:#FF7A72}
.foot-note{font-size:13.5px; line-height:1.7; margin:0; color:#948B8B}
.foot-note strong{color:#D9CFCF}

/* ═══ THANH DÍNH ĐÁY ═════════════════════════════ */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px clamp(14px,4vw,28px);
  background:rgba(142,16,21,.97); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,240,235,.28);
  transform:translateY(110%); transition:transform .28s ease;
}
.sticky-bar.show{transform:translateY(0)}
.sticky-price b{font-family:var(--serif); font-size:22px; color:#FFFFFF}
.sticky-price span{font-size:13.5px; color:#FFD9CF; margin-left:6px}
.sticky-bar .btn{padding:14px 26px; font-size:16px}
.sticky-bar .btn-primary{
  background:#FFF7EC; color:var(--red-deep);
  box-shadow:0 2px 0 rgba(80,6,10,.6);
}

/* ═══ KHUNG XEM ẢNH LỚN ══════════════════════════ */
.zoom{cursor:zoom-in; transition:filter .25s ease}
.zoom:hover{filter:brightness(1.05)}

.lightbox{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(24,10,11,.95); padding:56px 16px 72px;
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:min(1100px,94vw); max-height:82vh; width:auto; height:auto;
  object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lb-close,.lb-nav{
  position:absolute; background:rgba(255,255,255,.14); color:#FFF7EC;
  border:1px solid rgba(255,240,235,.34); cursor:pointer; line-height:1;
  border-radius:50%; display:grid; place-items:center; transition:background .15s ease;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-close{top:16px; right:16px; width:46px; height:46px; font-size:30px}
.lb-nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:34px}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-cap{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  margin:0; max-width:min(760px,90vw); text-align:center;
  font-size:14.5px; color:#F0D8D4; line-height:1.6;
}

/* ═══ HIỆU ỨNG HIỆN DẦN ══════════════════════════ */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}

/* ═══ MÀN HÌNH NHỎ ═══════════════════════════════ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:38px}
  .hero-visual{max-width:400px; margin-inline:auto; width:100%}
  .ing-cols{grid-template-columns:1fr; gap:28px}
  .use-grid{grid-template-columns:1fr}
  .occ-grid{grid-template-columns:1fr 1fr}
  .pack-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .pack-best{order:-1}
  .value-row{grid-template-columns:repeat(2,1fr)}
  .gal-gift{grid-template-columns:1fr; gap:24px; text-align:center}
  .gal-gift img{max-width:300px; margin-inline:auto}
  .kh-row{grid-template-columns:1fr 1fr}
  .kh-stack{grid-column:1/-1; grid-template-columns:1fr 1fr; display:grid}
  .rv-shots{columns:3 160px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .sec{padding:62px 0}
  .hero{padding:44px 0 130px}
  .pain-grid{grid-template-columns:1fr}
  .occ-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .sec-order{padding-bottom:130px}
  .foot{padding-bottom:130px}
  .pain-close{font-size:19px}
  .gal-pair{gap:12px}
  .gal-trio{grid-template-columns:1fr 1fr; gap:12px}
  .gal-trio figure:last-child{grid-column:1/-1; max-width:60%; margin-inline:auto}
  .gal-head h3{font-size:22px}
  .kh-row{grid-template-columns:1fr; gap:14px}
  .kh-stack{grid-template-columns:1fr 1fr; gap:14px}
  .rv-shots{columns:2 130px; column-gap:10px}
  .rv-shots img{margin-bottom:10px}
  .rv-quote{font-size:17.5px}
  .lb-nav{width:42px; height:42px; font-size:28px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lightbox{padding:52px 8px 64px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none}
}


/* ── khối "gọi để chốt đơn" khi chưa nối Google Sheet ── */
.ok.goi-de-chot{
  background:var(--red-soft); border:2px solid var(--red); color:var(--ink-2);
  display:grid; gap:12px; padding:22px 24px; text-align:center;
}
.ok-tieu-de{font-family:var(--serif); font-size:21px; color:var(--red-deep); line-height:1.35}
.ok-don{
  background:var(--paper); border:1px solid var(--line-red); border-radius:var(--r-s);
  padding:14px 16px; font-size:16px; line-height:1.75; text-align:left;
}
.ok-don b{color:var(--red-deep); font-size:18px}
.ok-nhac{font-size:14px; color:var(--muted)}