/* =========================================================
   LANDING PAGE BÀN GHẾ GIÁM ĐỐC — bổ sung cho style.css
   Theo công thức 16 bước bán hàng. Dùng lại biến màu mệnh Thổ.
   ========================================================= */

/* Nhãn "bước" nhỏ (tinh tế, không phô) */
.step-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;color:#fff;background:linear-gradient(135deg,var(--brand),var(--gold));padding:4px 12px;border-radius:999px;margin-bottom:14px}

/* Hero biến thể tối sang trọng cho dòng cao cấp */
.hero-gd{background:linear-gradient(180deg,#2A1E14,#3A2A1C);color:#F4EFE8;overflow:hidden;position:relative}
.hero-gd::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(194,98,45,.4),transparent 70%)}
.hero-gd .h-eyebrow{color:var(--gold)}
.hero-gd h1{color:#fff;font-size:clamp(36px,5vw,66px)}
.hero-gd h1 .accent{color:transparent;background:linear-gradient(100deg,var(--gold),#E8A24C,var(--gold));background-size:220% auto;-webkit-background-clip:text;background-clip:text;animation:shine 5s linear infinite}
.hero-gd .lead{color:rgba(244,239,232,.82)}
.hero-gd .hero-stats{border-top-color:rgba(244,239,232,.18)}
.hero-gd .hero-stats .num{color:#fff}
.hero-gd .hero-stats .lbl{color:rgba(244,239,232,.65)}

/* PAIN — khơi gợi vấn đề */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pain{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease)}
.pain:hover{transform:translateY(-6px)}
.pain .x{width:46px;height:46px;border-radius:12px;background:#F6E3DD;color:var(--maroon);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:14px}
.pain h3{font-family:var(--font);font-size:17px;margin-bottom:8px}
.pain p{color:var(--ink-soft);font-size:14.5px}

/* BENEFITS — lợi ích dạng lưới icon */
.benes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bene{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;align-items:flex-start;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bene:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.bene .ic{width:50px;height:50px;border-radius:14px;flex-shrink:0;background:linear-gradient(135deg,#fff,#F3EAD9);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 6px 16px -10px rgba(194,98,45,.6)}
.bene b{font-size:16px}
.bene p{color:var(--ink-soft);font-size:14px;margin-top:4px}

/* USP strip — vì sao chọn chúng tôi */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.usp .u{padding:22px}
.usp .u .n{font-family:var(--serif);font-size:40px;font-weight:800;color:var(--brand)}
.usp .u .t{font-size:14px;color:var(--ink-soft);margin-top:4px}

/* OFFER — ưu đãi đặc biệt */
.offer{background:linear-gradient(135deg,#3A2A1C,#5A3A1E);color:#F4EFE8;border-radius:26px;padding:44px;position:relative;overflow:hidden;text-align:center}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 0%,rgba(176,131,43,.35),transparent 60%)}
.offer>*{position:relative;z-index:2}
.offer .big{font-family:var(--serif);font-size:clamp(30px,4vw,52px);color:var(--gold);font-weight:800;margin:6px 0}
.offer .gifts{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.offer .gift{background:rgba(244,239,232,.1);border:1px solid rgba(244,239,232,.2);border-radius:14px;padding:16px 22px;min-width:200px}
.offer .gift .ic{font-size:26px}
.offer .gift b{display:block;margin-top:6px}
.offer .gift span{font-size:13px;opacity:.8}

/* GUARANTEE — cam kết */
.guars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.guar{text-align:center;padding:26px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease)}
.guar:hover{transform:translateY(-6px)}
.guar .ic{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px}
.guar b{display:block;font-size:16px;margin-bottom:6px}
.guar p{font-size:13.5px;color:var(--ink-soft)}

/* URGENCY — thanh thúc giục */
.urgency{background:var(--maroon);color:#fff;border-radius:18px;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.urgency .txt b{font-size:18px}
.urgency .txt p{opacity:.85;font-size:14px}
.countdown{display:flex;gap:10px}
.countdown .box{background:rgba(255,255,255,.15);border-radius:10px;padding:10px 14px;text-align:center;min-width:62px}
.countdown .box .d{font-family:var(--serif);font-size:26px;font-weight:800;line-height:1}
.countdown .box .l{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.06em}

/* SPEC — thông số */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.spec{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.spec .k{color:var(--ink-soft);font-size:14px}
.spec .v{font-weight:700;font-size:14.5px;text-align:right}

/* Product card: nút "giá liên hệ" */
.card .price--contact{font-size:16px;color:var(--brand);font-family:var(--font);font-weight:800}

/* Khung ảnh "bổ sung sau" (placeholder) */
.ph{background:repeating-linear-gradient(45deg,#EFE6D7,#EFE6D7 12px,#E8DDC9 12px,#E8DDC9 24px);display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;color:#9a8a72;padding:20px}

@media(max-width:1024px){
  .pains,.usp,.guars{grid-template-columns:repeat(2,1fr)}
  .specs,.benes{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pains,.usp,.guars{grid-template-columns:1fr}
  .offer{padding:30px 22px}
  .urgency{flex-direction:column;align-items:flex-start}
}