/* DAK LAB — giao diện chung các trang (12/10/2026). Màu, chữ theo DAK LAB design system. */
:root{--ink:#141414;--ink-soft:#1f1f1f;--paper:#fbf9f5;--cream:#f5f1e8;--white:#fff;--clay:#c96a3f;--clay-deep:#a9532c;--clay-bright:#de8a62;--forest:#2d4a35;--forest-bg:#e6ede7;--forest-bright:#7fae8a;--stone:#8a8378;--muted:#6b655b;--body2:#3a3631;--line:#e4dfd4;--line-dark:#2e2e2e;--stone-light:#a39c90;
--sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--clay-deep)}a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--clay-deep);outline-offset:2px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:1160px;margin:0 auto;padding-inline:40px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--clay-deep)}
.h1{font-size:62px;line-height:1.03;font-weight:800;letter-spacing:-.03em}
.h1 em,.h2 em{font-style:normal;color:var(--clay)}
.h2{font-size:42px;line-height:1.08;font-weight:800;letter-spacing:-.025em}
.lead{font-size:18px;line-height:1.55;color:var(--body2);max-width:36em}
.sec{padding:104px 0}
.band{background:var(--cream);border-block:1px solid var(--line)}
.dark{background:var(--ink);color:var(--cream)}
.dark .eyebrow{color:var(--clay-bright)}
.dark .lead{color:var(--stone-light)}
.dark .h2 em{color:var(--clay-bright)}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:44px}
.head.c{align-items:center;text-align:center}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:4px;background:var(--ink);color:var(--paper);text-decoration:none;font:700 15px/1.2 var(--sans);border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{color:var(--paper);transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,20,20,.18)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--stone)}
.btn-ghost:hover{color:var(--ink);background:var(--cream);box-shadow:none}
.dark .btn{background:var(--cream);color:var(--ink)}
.dark .btn:hover{color:var(--ink)}
.dark .btn-ghost{background:transparent;color:var(--cream);border-color:#7a7368}
.dark .btn-ghost:hover{color:var(--cream);background:var(--ink-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--cream);color:var(--clay-deep);border:1px solid var(--line)}
.chip.sys{background:var(--forest-bg);color:var(--forest);border-color:#cfdcd2}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--muted);list-style:none;padding:0;margin:0}
.checks li{display:inline-flex;align-items:center;gap:7px}
.checks li::before{content:"";width:14px;height:14px;flex:none;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%232d4a35' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E")}

/* đầu trang */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,249,245,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo b{font-weight:800;letter-spacing:1.5px;font-size:17px}
.nav nav{display:flex;gap:26px;font-size:14.5px;font-weight:700}
.nav nav a{color:var(--ink);text-decoration:none;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav nav a:hover::after,.nav nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{min-height:44px;padding:0 18px;font-size:14px}

/* mở đầu */
.hero{padding:72px 0 64px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:48px;align-items:center}
.hero .txt{display:flex;flex-direction:column;gap:22px}
.hero.one .wrap{grid-template-columns:1fr}
.hero.one .txt{max-width:46em}
.art{position:relative}
.art .main{animation:float 8s ease-in-out infinite}
.pop{position:absolute;background:var(--white);border:1px solid var(--line);box-shadow:0 12px 28px rgba(20,20,20,.12);padding:10px 14px;font-size:13px;font-weight:700;display:flex;gap:8px;align-items:center;white-space:nowrap}
.pop .dot{width:8px;height:8px;border-radius:99px;background:var(--forest-bright);flex:none;animation:pulse 2s infinite}
.pop.p1{left:-4%;top:14%;animation:float 6s ease-in-out -1s infinite}
.pop.p2{right:-2%;top:46%;animation:float 7s ease-in-out -3s infinite}
.pop.p3{left:6%;bottom:6%;animation:float 9s ease-in-out -2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,174,138,.7)}70%{box-shadow:0 0 0 8px rgba(127,174,138,0)}100%{box-shadow:0 0 0 0 rgba(127,174,138,0)}}

/* ô chọn vấn đề */
.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pk{display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.pk:hover{color:var(--ink);transform:translateY(-4px);border-color:var(--ink);box-shadow:5px 5px 0 var(--clay)}
.pk .ic{width:46px;height:46px;border-radius:99px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--clay-deep);transition:background .2s,color .2s}
.pk:hover .ic{background:var(--clay);color:var(--white)}
.pk h3{font-size:17px;font-weight:800;line-height:1.3}
.pk p{font-size:13.5px;color:var(--muted);flex-grow:1}
.pk .go{font-size:13.5px;font-weight:700;color:var(--clay-deep)}

/* thẻ gói */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.of{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;scroll-margin-top:96px}
.of:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,20,20,.05),0 18px 36px rgba(20,20,20,.1)}
.of.flash,.mo.flash{animation:flash 1.6s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(201,106,63,0)}20%{box-shadow:0 0 0 6px rgba(201,106,63,.45)}}
.of .pic{overflow:hidden;border-bottom:1px solid var(--line)}
.of .pic img{aspect-ratio:20/11;object-fit:cover;width:100%;transition:transform .5s}
.of:hover .pic img{transform:scale(1.04)}
.of .bd{padding:22px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.of .bd>.chip,.card .bd>.chip{align-self:flex-start}
.of h3{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.of ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--body2)}
.of li{display:flex;gap:8px}.of li::before{content:"—";color:var(--clay)}
.of .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.of .price b{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.of .price b.ask{font-size:15px}
.of .price a{font-size:14px;font-weight:700;text-decoration:none}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.mo{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:14.5px;transition:border-color .15s,transform .15s}
.mo:hover{color:var(--ink);border-color:var(--ink);transform:translateX(3px)}
.mo span span{font-weight:400;font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.mo i{font-style:normal;color:var(--clay);font-weight:800}

/* bằng chứng */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:var(--line-dark)}
.tl .bar{position:absolute;left:21px;top:8px;width:2px;height:0;background:var(--clay);transition:height 1.6s ease}
.tl.on .bar{height:calc(100% - 16px)}
.tl li{display:flex;gap:20px;padding:14px 0;position:relative}
.tl .n{width:44px;height:44px;flex:none;border-radius:99px;background:var(--ink);border:2px solid var(--line-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--clay-bright);position:relative;z-index:1;transition:border-color .3s,background .3s}
.tl.on .n{border-color:var(--clay)}
.tl h3{font-size:17px;font-weight:700;color:var(--cream)}
.tl p{font-size:14px;color:var(--stone-light)}
.proof figure{margin:0}
.proof figcaption{font-size:12.5px;color:var(--stone-light);margin-top:10px}

/* bấm thử */
.try{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:64px;align-items:center}
.tabs{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.tabs button{display:flex;gap:16px;align-items:flex-start;text-align:left;background:var(--white);border:1px solid var(--line);padding:16px 18px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.tabs button:hover{border-color:var(--stone)}
.tabs button[aria-selected="true"]{border-color:var(--ink);box-shadow:4px 4px 0 var(--clay)}
.tabs .n{font-size:20px;font-weight:800;color:var(--clay);line-height:1.1;min-width:28px}
.tabs b{display:block;font-size:15.5px}
.tabs small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.phone{justify-self:center;width:100%;max-width:360px;background:var(--ink);padding:12px;border-radius:40px;box-shadow:0 30px 60px rgba(20,20,20,.25)}
.phone .scr{position:relative;border-radius:30px;overflow:hidden;background:var(--white);aspect-ratio:9/18}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.phone .notch{width:90px;height:22px;background:var(--ink);border-radius:0 0 14px 14px;margin:0 auto -22px;position:relative;z-index:2}
.open{display:block;text-align:center;margin-top:14px;font-weight:700;font-size:14px;text-decoration:none;min-height:44px;line-height:44px}

/* ba bước */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;background:var(--line)}
.stp{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.stp .n{width:56px;height:56px;border-radius:99px;background:var(--paper);border:2px solid var(--clay);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--clay);position:relative;z-index:1}
.band .stp .n{background:var(--cream)}
.stp h3{font-size:18px;font-weight:800;margin-top:6px}
.stp p{font-size:14px;color:var(--muted)}

/* hỏi đáp */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-size:17px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--clay-deep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 18px;color:var(--body2);max-width:62ch}

/* lưới thẻ chung */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,20,20,.05),0 16px 32px rgba(20,20,20,.1)}
.card .pic{position:relative;overflow:hidden;background:var(--cream);border-bottom:1px solid var(--line)}
.card .pic img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;transition:transform .5s}
.card:hover .pic img{transform:scale(1.04)}
.card .pic img.m{position:absolute;right:14px;bottom:-30px;width:24%;aspect-ratio:auto;border-radius:12px;border:4px solid var(--ink);box-shadow:0 12px 24px rgba(20,20,20,.2)}
.card .bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex-grow:1}
.card h3{font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.card p{font-size:14px;color:var(--muted);flex-grow:1}
.card .go{font-size:14px;font-weight:700;color:var(--clay-deep);display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.card .go em{font-style:normal;font-weight:400;color:var(--muted);font-size:13px}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:700 14px/1 var(--sans);color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* kết: khảo sát */
.cta .in{padding-block:96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.cta .lead{margin-top:16px}
.f{display:flex;flex-direction:column;gap:14px;background:var(--ink-soft);padding:28px;border:1px solid var(--line-dark)}
.f label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.f input{min-height:48px;padding:0 14px;border:1px solid #7a7368;border-radius:4px;background:#262421;color:var(--cream);font:400 15px var(--sans)}
.f input::placeholder{color:#8f887c}
.f .btn{min-height:52px;font-size:16px}
.f .small{font-size:13.5px;color:var(--stone-light)}
.f a{color:var(--clay-bright)}
#ok{font-size:14px;color:var(--cream);background:#2d4a35;padding:10px 12px;border-radius:4px}

footer{background:var(--ink);color:var(--stone-light);border-top:1px solid var(--line-dark);font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px}
footer a{color:var(--clay-bright)}
.dock{display:none}
.embed .dock{display:none!important}
.embed body{padding-bottom:0!important}

/* hiện dần */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.js .rv.on{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:1000px){
  .hero .wrap,.proof,.try,.cta .in{grid-template-columns:1fr;gap:40px}
  .pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offers,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav nav{display:none}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .sec{padding:72px 0}
  .hero{padding:36px 0 48px}
  .h1{font-size:38px}
  .h2{font-size:30px}
  .lead{font-size:16.5px}
  .pick{grid-template-columns:1fr;gap:10px}
  .pk{flex-direction:row;align-items:center;padding:14px 16px;gap:14px}
  .pk p,.pk .go{display:none}
  .pk h3{font-size:15.5px;flex-grow:1}
  .pk::after{content:"→";color:var(--clay-deep);font-weight:800}
  .offers,.cards,.more{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:20px}
  .steps::before{left:27px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .stp{flex-direction:row;flex-wrap:wrap;column-gap:16px}
  .stp h3{margin-top:14px}
  .stp p{flex-basis:100%;padding-left:72px;margin-top:-6px}
  .pop{font-size:11.5px;padding:7px 10px}
  .pop.p1{left:0}.pop.p2{right:0}
  .phone{max-width:320px}
  .cta .in{padding-block:64px}
  .nav .btn{display:none}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,249,245,.97);border-top:1px solid var(--line)}
  .dock .btn{min-height:50px}
  .dock .btn:last-child{flex:1}
  body{padding-bottom:76px}
}

/* lời mời để lại yêu cầu */
.hoi{position:fixed;right:24px;bottom:24px;z-index:60;width:min(380px,calc(100vw - 32px));background:var(--white);border:1px solid var(--line);box-shadow:0 2px 6px rgba(20,20,20,.06),0 24px 48px rgba(20,20,20,.16);padding:22px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
.hoi.on{opacity:1;transform:none}
.hoi h3{font-size:17px;font-weight:800;line-height:1.35;padding-right:24px}
.hoi .x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer}
.hoi .ty{display:flex;gap:6px;flex-wrap:wrap}
.hoi .ty button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:700 13px var(--sans);color:var(--ink);cursor:pointer}
.hoi .ty button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hoi textarea{width:100%;border:1px solid var(--stone);border-radius:4px;padding:10px 12px;font:400 14.5px/1.5 var(--sans);resize:vertical;background:var(--paper);color:var(--ink)}
.hoi .ac{display:flex;align-items:center;gap:14px}
.hoi .btn{min-height:44px;padding:0 18px;font-size:14px}
.hoi .lk{border:0;background:none;font:700 13.5px var(--sans);color:var(--clay-deep);cursor:pointer;min-height:44px}
.hoi .b1,.hoi .b2{display:flex;flex-direction:column;gap:12px}
.hoi .b1[hidden],.hoi .b2[hidden]{display:none}
.hoi .gy{display:flex;gap:6px;flex-wrap:wrap}
.hoi .gy button{min-height:32px;padding:0 11px;border-radius:4px;border:1px dashed var(--stone);background:var(--paper);font:600 12.5px var(--sans);color:var(--body2);cursor:pointer;transition:background .15s,border-color .15s}
.hoi .gy button[aria-pressed="true"]{border-style:solid;border-color:var(--clay);background:var(--cream);color:var(--clay-deep)}
.hoi .pv{margin:0;white-space:pre-wrap;font:400 13.5px/1.5 var(--sans);background:var(--cream);border-left:3px solid var(--clay);padding:10px 12px;max-height:150px;overflow:auto;user-select:text;-webkit-user-select:text}
.hoi a.btn{display:inline-flex;align-items:center;text-decoration:none}
.hoi .ct{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hoi .ct label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--muted)}
.hoi .ct input{width:100%;min-height:42px;border:1px solid var(--stone);border-radius:4px;padding:0 10px;font:400 15px var(--sans);background:var(--paper);color:var(--ink)}
.hoi .ct input[aria-invalid="true"]{border-color:var(--clay);box-shadow:0 0 0 3px rgba(201,106,63,.15)}
.hoi .er{font-size:13px;color:var(--clay-deep);font-weight:600}
.hoi .ok{font-size:13px;color:var(--forest);background:var(--forest-bg);padding:8px 10px;border-radius:4px}
@media (max-width:640px){.hoi{right:12px;left:12px;bottom:84px;width:auto;padding:16px;gap:10px;max-height:calc(100vh - 100px);overflow:auto}.hoi .b1,.hoi .b2{gap:10px}.hoi textarea{min-height:64px}.hoi .gy button{min-height:30px;font-size:12px}.hoi h3{font-size:15.5px}.hoi textarea{font-size:14px}.hoi .eyebrow{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){.hoi{transition:none}}