/* ==========================================================================
   SONIC LAB — AURA ONE · Tai nghe không dây chống ồn (landing sản phẩm phần cứng)
   Phong cách: BENTO GRID + GRADIENT MESH (kiểu trang sản phẩm Apple/Nothing 2024).
   Nền gần trắng #FAFAFA, vài "blob" gradient mesh pastel (đào / tím nhạt / bạc hà)
   được làm mờ nằm SAU các ô bento. TOÀN BỘ trang là các ô bento to nhỏ khác nhau
   trên lưới 12 cột (grid-template-areas), mỗi ô bo 28px, nền trắng hoặc rất nhạt,
   viền mảnh 1px, KHÔNG đổ bóng. Số liệu thông số là số khổng lồ, nét mảnh
   (font-weight 200–300): "40h", "−45dB", "12mm". Không có thanh nav truyền thống —
   chỉ một viên nang nhỏ nổi giữa trên cùng với 3 chấm + "Mua ngay".
   Không có section xen kẽ: hero chính là hàng bento đầu tiên (ô khổng lồ có ảnh
   sản phẩm trên mesh + tên sản phẩm 96px nét mảnh, cạnh ô giá + ô chọn màu đổi
   màu mesh bằng biến CSS/JS). Các hàng sau: ô thông số (pin 40 giờ, chống ồn
   −45dB có sóng âm CSS, driver 12mm vòng đồng tâm, Bluetooth 5.4 chấm nhấp nháy),
   ô câu chuyện tính năng cuộn (ảnh dính bên trái, 3 bước bên phải đổi độ mờ bằng
   IntersectionObserver), bảng so sánh 3 model, "trong hộp có gì" icon vẽ bằng
   CSS/SVG, ô ảnh chi tiết cao, ô trích dẫn khách hàng, thông số kỹ thuật 2 cột,
   ô đặt trước có form tính tổng, FAQ nhỏ bằng <details>. Footer = ô rộng cuối.
   Font: "Onest" (200/300 cho số, 600 cho tiêu đề — thay cho Geist không có trên
   Google Fonts) + "Inter" cho thân chữ.
   Ảnh: link trực tiếp (images.txt) qua biến --img trên .ph, hòa vào mesh bằng
   mix-blend-mode: multiply.
   ========================================================================== */
:root{
  --bg:#FAFAFA; --tile:#FFFFFF; --tile-soft:#F5F5F7; --line:#E6E6EA; --line-2:#D9D9DF;
  --ink:#111114; --ink-2:#4A4A55; --muted:#8A8A96;
  --peach:#FFD9C7; --lilac:#DCD3FF; --mint:#CFF3E4; --sky:#D6E8FF; --butter:#FFF1C2;
  --accent:#111114;
  /* màu mesh của ô hero — JS đổi theo swatch */
  --m1:#FFD9C7; --m2:#DCD3FF; --m3:#CFF3E4;
  --ff-d:'Onest','Inter',system-ui,sans-serif;
  --ff-b:'Inter',system-ui,-apple-system,sans-serif;
  --r:28px; --r-sm:16px; --pill:999px;
  --gap:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-b);color:var(--ink);background:var(--bg);line-height:1.6;font-size:15px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:600;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(48px,7vw,96px);font-weight:300;letter-spacing:-.04em;line-height:.95}
h2{font-size:clamp(22px,2.4vw,30px)}
h3{font-size:18px}
p{color:var(--ink-2)}
.container{width:min(1200px,94%);margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:13px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Mesh blobs nền trang ---------- */
.mesh-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mesh-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.mesh-bg .b1{width:620px;height:620px;left:-160px;top:-120px;background:radial-gradient(circle at 40% 40%,var(--peach),transparent 70%)}
.mesh-bg .b2{width:560px;height:560px;right:-140px;top:120px;background:radial-gradient(circle at 50% 50%,var(--lilac),transparent 70%)}
.mesh-bg .b3{width:520px;height:520px;left:30%;top:52%;background:radial-gradient(circle at 50% 50%,var(--mint),transparent 70%)}
.mesh-bg .b4{width:480px;height:480px;right:5%;bottom:-160px;background:radial-gradient(circle at 50% 50%,var(--sky),transparent 70%)}

/* ---------- Viên nang nổi (thay nav) ---------- */
.capsule{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;border-radius:var(--pill);background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.capsule__brand{font-family:var(--ff-d);font-weight:600;font-size:13px;letter-spacing:.04em;margin-right:6px}
.capsule__dots{display:flex;gap:4px;margin-right:6px}
.capsule__dots a{position:relative;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.capsule__dots a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.2s}
.capsule__dots a:hover::before,.capsule__dots a.is-active::before{background:var(--ink);transform:scale(1.25)}
.capsule__dots a::after{content:attr(data-tip);position:absolute;top:34px;left:50%;transform:translateX(-50%) translateY(-4px);white-space:nowrap;font-size:11px;background:var(--ink);color:#fff;padding:4px 8px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s}
.capsule__dots a:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:500;font-size:14px;border:1px solid var(--ink);cursor:pointer;transition:.2s;line-height:1.2}
.btn:hover{background:#2A2A30;border-color:#2A2A30}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--tile-soft);border-color:var(--line-2)}
.btn--sm{padding:7px 14px;font-size:13px}
.btn--lg{padding:14px 26px;font-size:15px}
.burger{display:none}

/* ---------- Bento ---------- */
main{padding:84px 0 40px}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);grid-auto-rows:minmax(150px,auto)}
.tile{position:relative;isolation:isolate;background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:26px;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile--soft{background:var(--tile-soft)}
.tile--mesh{background:var(--tile)}
.tile--mesh::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:
  radial-gradient(circle at 20% 30%,var(--m1),transparent 45%),
  radial-gradient(circle at 80% 25%,var(--m2),transparent 45%),
  radial-gradient(circle at 55% 85%,var(--m3),transparent 45%);
  filter:blur(40px);opacity:.9;transition:background .6s}
.tile--mesh>*{position:relative;z-index:1}
.tile__title{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.tile__foot{margin-top:auto}
.big{font-family:var(--ff-d);font-weight:200;letter-spacing:-.04em;line-height:1;font-size:clamp(56px,6.5vw,92px);color:var(--ink)}
.big small{font-size:.38em;font-weight:300;letter-spacing:-.02em;margin-left:2px}
.big--md{font-size:clamp(40px,4.4vw,60px)}
.mid{font-family:var(--ff-d);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1}
.ph{background:var(--img) center/contain no-repeat;mix-blend-mode:multiply}
.ph--cover{background-size:cover}

/* Khu vực grid trang chủ */
.bento--home{grid-template-areas:
  "hero hero hero hero hero hero hero hero price price price price"
  "hero hero hero hero hero hero hero hero color color color color"
  "pin pin pin anc anc anc drv drv drv bt bt bt"
  "story story story story story story story story tall tall tall tall"
  "cmp cmp cmp cmp cmp cmp cmp box box box box box"
  "quote quote quote quote quote spec spec spec spec spec spec spec"
  "pre pre pre pre pre pre pre faq faq faq faq faq"
  "foot foot foot foot foot foot foot foot foot foot foot foot"}
.t-hero{grid-area:hero}.t-price{grid-area:price}.t-color{grid-area:color}
.t-pin{grid-area:pin}.t-anc{grid-area:anc}.t-drv{grid-area:drv}.t-bt{grid-area:bt}
.t-story{grid-area:story}.t-tall{grid-area:tall}.t-cmp{grid-area:cmp}.t-box{grid-area:box}
.t-quote{grid-area:quote}.t-spec{grid-area:spec}.t-pre{grid-area:pre}.t-faq{grid-area:faq}
.t-foot{grid-area:foot}

/* Hero tile */
.t-hero{min-height:560px;padding:34px;justify-content:space-between}
.t-hero .hero__img{position:absolute;right:-4%;top:6%;width:62%;height:90%;z-index:0;mix-blend-mode:multiply}
.t-hero .hero__img .ph{width:100%;height:100%}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--pill);background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:12px;font-weight:500}
.hero__badge i{width:6px;height:6px;border-radius:50%;background:#2FA97A}
.hero__bottom{max-width:520px}
.hero__bottom h1{margin:6px 0 10px}
.hero__bottom p{font-size:16px;max-width:400px}
.hero__cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* Tai nghe vẽ bằng CSS (dùng khi không có ảnh) */
.hp{position:absolute;inset:0;display:grid;place-items:center;z-index:0}
.hp svg{width:80%;height:80%;max-height:460px}
.hp .band{fill:none;stroke:var(--ink);stroke-width:14;stroke-linecap:round}
.hp .cup{fill:#fff;stroke:var(--ink);stroke-width:3}
.hp .pad{fill:var(--ink);opacity:.9}

/* Giá */
.t-price .price{font-family:var(--ff-d);font-weight:300;font-size:clamp(38px,4vw,52px);letter-spacing:-.04em;line-height:1}
.t-price .price s{font-size:.45em;color:var(--muted);font-weight:400;margin-left:8px;letter-spacing:0}
.t-price .note{font-size:13px;color:var(--muted)}

/* Chọn màu */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:40px;height:40px;border-radius:50%;border:2px solid transparent;outline:1px solid var(--line-2);outline-offset:3px;cursor:pointer;background:var(--c);transition:.2s;padding:0}
.swatch:hover{transform:scale(1.06)}
.swatch.is-active{outline-color:var(--ink);outline-width:2px}
.swatch--suong{--c:linear-gradient(135deg,#F6F1EC,#E8E2DC)}
.swatch--than{--c:linear-gradient(135deg,#2B2B30,#0F0F12)}
.swatch--bacha{--c:linear-gradient(135deg,#D9F5E8,#9FDCC2)}
.swatch--khoi{--c:linear-gradient(135deg,#D8CFFB,#A99BE6)}
.swatch-name{font-weight:500;font-size:14px}

/* Chống ồn — sóng âm */
.wave{display:flex;align-items:center;gap:4px;height:44px}
.wave span{width:4px;border-radius:2px;background:var(--ink);height:30%;animation:wave 1.2s ease-in-out infinite}
.wave span:nth-child(2n){animation-delay:.15s}.wave span:nth-child(3n){animation-delay:.3s}.wave span:nth-child(4n){animation-delay:.45s}.wave span:nth-child(5n){animation-delay:.6s}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}
.wave--calm span{background:var(--line-2);animation-duration:2.4s}
/* Driver — vòng đồng tâm */
.rings{position:absolute;right:-30px;bottom:-30px;width:170px;height:170px;pointer-events:none}
.rings i{position:absolute;inset:0;border:1px solid var(--line-2);border-radius:50%}
.rings i:nth-child(2){inset:22px}.rings i:nth-child(3){inset:44px}.rings i:nth-child(4){inset:66px;background:var(--ink);border-color:var(--ink)}
/* Bluetooth — chấm nhấp nháy */
.pulse{position:relative;width:14px;height:14px;display:inline-block}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3B82F6}
.pulse::after{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}
.pulse-row{display:flex;align-items:center;gap:12px}

/* Câu chuyện cuộn */
.t-story{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.story__img{mix-blend-mode:multiply;position:sticky;top:84px;align-self:start;height:min(560px,calc(100vh - 100px));padding:26px}
.story__img .ph{width:100%;height:100%;transition:opacity .5s}
.story__steps{padding:26px 30px 26px 0;display:flex;flex-direction:column}
.step{min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:.18;transition:opacity .5s;padding:20px 0}
.step.is-on{opacity:1}
.step .num{font-family:var(--ff-d);font-weight:200;font-size:56px;letter-spacing:-.04em;line-height:1;color:var(--muted)}
.step h3{font-size:24px}
.story__img--mesh{background:
  radial-gradient(circle at 25% 30%,var(--lilac),transparent 55%),
  radial-gradient(circle at 75% 75%,var(--mint),transparent 55%)}

/* Ảnh chi tiết cao */
.t-tall{padding:0;min-height:520px;background:linear-gradient(180deg,#fff,var(--tile-soft))}
.t-tall .ph{position:absolute;inset:0}
.t-tall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(255,255,255,.96));pointer-events:none}
.t-tall .cap{position:absolute;left:22px;bottom:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:13px;z-index:1}
.t-tall .cap b{font-family:var(--ff-d);font-weight:600;display:block;font-size:16px}

/* Bảng so sánh */
.table-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.cmp th,.cmp td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{font-family:var(--ff-d);font-weight:600;font-size:15px;color:var(--ink)}
.cmp th small{display:block;font-family:var(--ff-b);font-weight:400;color:var(--muted);font-size:12px}
.cmp td:first-child{color:var(--muted);width:32%}
.cmp tr:last-child td{border-bottom:0}
.cmp .hl{background:var(--tile-soft)}
.chip{display:inline-block;padding:2px 9px;border-radius:var(--pill);font-size:11px;font-weight:500;background:var(--ink);color:#fff;letter-spacing:.04em;text-transform:uppercase}
.chip--soft{background:var(--tile-soft);color:var(--ink);border:1px solid var(--line)}
.dot-yes{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.dot-no{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2)}

/* Trong hộp */
.inbox{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.inbox li{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px}
.inbox svg{width:34px;height:34px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* Trích dẫn */
.t-quote{justify-content:space-between}
.quote{font-family:var(--ff-d);font-weight:300;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;line-height:1.3}
.quote::before{content:"\201C";font-size:2.2em;line-height:0;display:block;color:var(--line-2);margin-top:14px;font-weight:200}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.who i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--peach),var(--lilac))}
.who b{display:block;font-weight:600}
.stars{color:var(--ink);letter-spacing:2px;font-size:12px}

/* Thông số kỹ thuật key/value */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{text-align:right;font-weight:500}
.kv--one{grid-template-columns:1fr}

/* Form */
.form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:5px}
.field label{font-size:12px;font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1px solid var(--line-2);border-radius:14px;background:#fff;outline:none;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--pill);overflow:hidden}
.qty button{width:40px;height:40px;background:#fff;border:0;cursor:pointer;font-size:18px}
.qty button:hover{background:var(--tile-soft)}
.qty input{width:52px;text-align:center;border:0;outline:none;font-weight:500;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--line)}
.total b{font-family:var(--ff-d);font-weight:300;font-size:32px;letter-spacing:-.03em}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.check input{margin-top:3px}
.msg{font-size:13px;color:#2FA97A;min-height:18px}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:500;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ff-d);font-weight:300;font-size:20px;color:var(--muted);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{font-size:13px;padding-top:8px}

/* Footer tile */
.t-foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;background:var(--tile-soft)}
.t-foot .brand{font-family:var(--ff-d);font-weight:600;font-size:20px;letter-spacing:-.02em}
.t-foot .brand small{display:block;font-family:var(--ff-b);font-weight:400;font-size:13px;color:var(--muted);margin-top:6px;max-width:320px}
.foot-cols{display:flex;gap:40px;flex-wrap:wrap}
.foot-cols h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px}
.foot-cols li{font-size:14px;padding:3px 0}
.foot-cols a:hover{text-decoration:underline}
.foot-bottom{width:100%;border-top:1px solid var(--line);padding-top:14px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Trang phụ: tiêu đề trang ---------- */
.page-head{grid-column:1/-1;padding:24px 8px 8px}
.page-head h1{font-size:clamp(40px,5.5vw,72px)}
.page-head p{max-width:560px;font-size:16px;margin-top:8px}
.page-head .crumb{font-size:12px;color:var(--muted);margin-bottom:8px}

/* Grid trang thông số */
.bento--spec{grid-template-areas:
  "head head head head head head head head head head head head"
  "am am am am am am pw pw pw pw pw pw"
  "ct ct ct ct ct ct ct ct ct ct ct ct"
  "cmp cmp cmp cmp cmp cmp cmp cmp cmp cmp cmp cmp"
  "dev dev dev dev dev dev dev dev app app app app"
  "sz sz sz sz env env env env dl dl dl dl"
  "foot foot foot foot foot foot foot foot foot foot foot foot"}
.t-head{grid-area:head}.t-am{grid-area:am}.t-pw{grid-area:pw}.t-ct{grid-area:ct}.t-dev{grid-area:dev}.t-app{grid-area:app}.t-sz{grid-area:sz}.t-env{grid-area:env}.t-dl{grid-area:dl}
.t-ct{flex-direction:row;flex-wrap:wrap;gap:30px;padding:0}
.t-ct .kv{flex:1;padding:26px}
.t-ct .ct-img{flex:0 0 36%;min-height:300px;position:relative}
.t-ct .ct-img .ph{position:absolute;inset:0}
.dev-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dev-list li{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;font-size:14px}
.dev-list li b{display:block;font-weight:600;font-family:var(--ff-d)}
.dev-list li span{font-size:12px;color:var(--muted)}
.codec{display:flex;gap:8px;flex-wrap:wrap}
.codec span{padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--pill);font-size:13px;font-weight:500}

/* Grid trang đặt trước */
.bento--pre{grid-template-areas:
  "head head head head head head head head head head head head"
  "prod prod prod prod prod prod prod cfg cfg cfg cfg cfg"
  "prod prod prod prod prod prod prod form form form form form"
  "ship ship ship ship pay pay pay pay warr warr warr warr"
  "foot foot foot foot foot foot foot foot foot foot foot foot"}
.t-prod{grid-area:prod}.t-cfg{grid-area:cfg}.t-form{grid-area:form}.t-ship{grid-area:ship}.t-pay{grid-area:pay}.t-warr{grid-area:warr}
.t-prod{min-height:640px;justify-content:space-between}
.t-prod .prod__img{mix-blend-mode:multiply;position:absolute;left:8%;right:8%;top:14%;bottom:14%;z-index:0}
.t-prod .prod__img .ph{width:100%;height:100%}
.engrave{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);font-family:var(--ff-d);font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:14px;color:var(--ink);padding:6px 14px;border:1px solid rgba(17,17,20,.25);border-radius:var(--pill);background:rgba(255,255,255,.5);backdrop-filter:blur(6px);z-index:2;white-space:nowrap;transition:.2s}
.engrave:empty{opacity:0}
.prod__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.opt-list{display:grid;gap:8px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px}
.opt b{font-weight:500}
.ship-date{font-family:var(--ff-d);font-weight:300;font-size:30px;letter-spacing:-.03em}
.steps-mini{display:grid;gap:8px;font-size:13px}
.steps-mini li{display:flex;gap:10px;align-items:flex-start}
.steps-mini i{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:11px;font-family:var(--ff-d)}
.pay-logos{display:flex;gap:8px;flex-wrap:wrap}
.pay-logos span{padding:6px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px;font-weight:500;background:#fff}

/* Grid trang hỗ trợ */
.bento--help{grid-template-areas:
  "head head head head head head head head head head head head"
  "s1 s1 s1 s2 s2 s2 s3 s3 s3 s4 s4 s4"
  "faqa faqa faqa faqa faqa faqa faqb faqb faqb faqb faqb faqb"
  "warr warr warr warr warr warr warr warr ct ct ct ct"
  "foot foot foot foot foot foot foot foot foot foot foot foot"}
.t-s1{grid-area:s1}.t-s2{grid-area:s2}.t-s3{grid-area:s3}.t-s4{grid-area:s4}.t-faqa{grid-area:faqa}.t-faqb{grid-area:faqb}.t-ctc{grid-area:ct}
.t-step .num{font-family:var(--ff-d);font-weight:200;font-size:64px;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.t-step h3{font-size:18px}
.t-step p{font-size:13px}
.t-step .ico{width:56px;height:56px;border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;margin-top:auto}
.t-step .ico svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.warr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.warr-grid div{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.warr-grid b{font-family:var(--ff-d);font-weight:200;font-size:40px;letter-spacing:-.04em;display:block;line-height:1}
.warr-grid span{font-size:13px;color:var(--muted)}
.contact-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.contact-list li:last-child{border-bottom:0}
.contact-list span{color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .big{font-size:clamp(48px,6vw,72px)}
  .t-hero{min-height:500px}
  .t-hero .hero__img{width:56%}
  .dev-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .bento,.bento--home,.bento--spec,.bento--pre,.bento--help{grid-template-columns:repeat(2,1fr);grid-template-areas:none}
  .bento>.tile,.page-head{grid-area:auto;grid-column:span 1}
  .page-head,.t-hero,.t-story,.t-cmp,.t-spec,.t-pre,.t-foot,.t-ct,.t-prod,.t-form,.t-faqa,.t-faqb,.t-warr,.t-dev{grid-column:span 2}
  .t-hero .hero__img{width:70%;right:-14%;top:0;height:60%}
  .t-hero .hero__bottom{margin-top:220px}
  .t-story{grid-template-columns:1fr}
  .story__img{position:relative;top:0;height:320px}
  .story__steps{padding:0 26px 26px}
  .step{min-height:0;opacity:1;padding:14px 0}
  .t-prod{min-height:520px}
}
@media (max-width:640px){
  main{padding-top:76px}
  .bento,.bento--home,.bento--spec,.bento--pre,.bento--help{grid-template-columns:1fr}
  .bento>.tile,.page-head,.t-hero,.t-story,.t-cmp,.t-spec,.t-pre,.t-foot,.t-ct,.t-prod,.t-form,.t-faqa,.t-faqb,.t-warr,.t-dev{grid-column:span 1}
  .tile{padding:22px;border-radius:22px}
  h1{font-size:clamp(44px,13vw,64px)}
  .t-hero{min-height:0;padding:24px}
  .t-hero .hero__img,.t-hero .hp{position:relative;width:100%;height:260px;right:0;top:0;order:1}
  .t-hero .hero__bottom{margin-top:0}
  .capsule{top:10px;padding:5px 5px 5px 12px}
  .capsule__brand{display:none}
  .kv{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .inbox{grid-template-columns:1fr}
  .dev-list{grid-template-columns:1fr}
  .warr-grid{grid-template-columns:1fr}
  .t-ct{flex-direction:column}
  .t-ct .ct-img{flex:none;height:220px;width:100%}
  .t-tall{min-height:380px}
  .t-prod{min-height:440px}
  .big{font-size:56px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}