/* =========================================================
   LANDING SÀN GỖ LEEXO — bổ sung cho /assets/css/style.css
   Clone form + màu của /tuhoso (mệnh Thổ: nâu gỗ / cam đất / gold).
   ========================================================= */

/* Nhãn "bước" nhỏ */
.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 tối sang trọng */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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 */
.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}

/* ===== Bổ sung riêng cho SÀN GỖ ===== */

/* Lưới 4 dòng sàn (overview) */
.lines{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.line-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column}
.line-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.line-card .thumb{aspect-ratio:4/3;overflow:hidden;background:#EFE6D7}
.line-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.line-card:hover .thumb img{transform:scale(1.07)}
.line-card .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.line-card .body h3{font-family:var(--serif);font-size:20px}
.line-card .body p{color:var(--ink-soft);font-size:14px;flex:1}
.line-card .body .go{color:var(--brand);font-weight:700;font-size:14px;margin-top:6px}

/* Khối từng dòng sàn */
.cat-block{padding-top:0}
.cat-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;margin-bottom:34px}
.cat-intro .feats{margin-top:18px}
@media(max-width:860px){.cat-intro{grid-template-columns:1fr}}

/* Chip lọc thư viện */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 10px 24px -12px rgba(194,98,45,.8)}

/* feats list (dùng lại) */
.feats{list-style:none;display:grid;gap:10px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-soft)}
.feats li .ic{width:24px;height:24px;border-radius:50%;background:var(--bg-2);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px}

/* story / banner / testi / trust / cta — dùng lại lớp chung của style.css; bổ sung nếu thiếu */
.story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.story-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.story-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.story-grid{grid-template-columns:1fr}}

.banner{position:relative;border-radius:26px;overflow:hidden;min-height:340px;display:flex;align-items:center}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .inner{position:relative;z-index:2;max-width:560px;padding:46px;color:#fff}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,20,12,.86),rgba(28,20,12,.35))}
.banner .inner{position:relative;z-index:3}
.banner h2{color:#fff}
.banner p{color:rgba(255,255,255,.85);margin:10px 0 18px}

.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);position:relative}
.testi .q{font-family:var(--serif);font-size:60px;color:var(--bg-3);line-height:.5;height:26px}
.testi p{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px}
.testi .who{display:flex;gap:12px;align-items:center}
.testi .who .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.testi .who b{font-size:15px}
.testi .who span{font-size:12.5px;color:var(--ink-soft);display:block}
.testi .stars{color:var(--gold);font-size:13px}
@media(max-width:860px){.testi-grid{grid-template-columns:1fr}}

.cta{background:linear-gradient(135deg,#2A1E14,#3A2A1C);border-radius:26px;padding:46px;color:#F4EFE8;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-80px;bottom:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(194,98,45,.35),transparent 70%)}
.cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.cta h2{color:#fff}
.cta p{color:rgba(244,239,232,.82);margin:10px 0 20px}
.cta .contacts{display:grid;gap:12px}
.cta .contacts a{display:flex;gap:10px;align-items:center;color:#F4EFE8;font-size:14.5px}
.cta .contacts a .ic{width:34px;height:34px;border-radius:9px;background:rgba(244,239,232,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.form{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.form label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:12px 0 6px}
.form input,.form select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.form input:focus,.form select:focus{outline:none;border-color:var(--brand)}
.form .btn{width:100%;justify-content:center;margin-top:18px}
@media(max-width:860px){.cta-grid{grid-template-columns:1fr}}

/* Nút nổi gọi/Zalo */
.fab{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:12px}
.fab a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);transition:transform .3s}
.fab a:hover{transform:scale(1.08)}
.fab .call{background:var(--brand)}
.fab .zalo{background:#0068FF;font-size:15px;font-weight:800}
@media(prefers-reduced-motion:no-preference){.fab .call{animation:float 3s ease-in-out infinite}}

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