/* VNSHOES — xanh rêu sân cỏ + cam Shopee cho nút mua.
   Ý tưởng chính: "tem lưỡi gà" (nhãn size in trong lưỡi giày) làm tem giá và bộ đổi size.
   Chữ Anton cho tiêu đề và giá, Be Vietnam Pro cho nội dung. Góc vuông; viền dày chỉ dùng trên tem. */
:root{
  --ground:#FFFFFF; --ink:#15181D; --muted:#5C636E; --well:#F2F4F1; --line:#E2E6E0;
  --pine:#0D5A43; --pine-deep:#0A4835; --on-pine:#FFFFFF; --pine-dim:rgba(255,255,255,.82); --pine-soft:#E2EFE8;
  --cta:#D63A1E; --cta-hover:#B52E15; --on-cta:#FFFFFF;
  --photo:#FFFFFF; --paper:#FFFFFF; --print:#15181D; --foot:#101513;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#0D1110; --ink:#ECF0EE; --muted:#9BA6A0; --well:#161D1A; --line:#25302B;
  --pine:#11704F; --pine-deep:#0C5A40; --pine-soft:#15302A; --foot:#080B0A; color-scheme:dark}}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{overflow-wrap:break-word;min-width:0;text-wrap:balance}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;font:700 15px/1.2 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background-color .15s,color .15s}
.btn-light{background:#fff;color:#0D5A43}
.btn-light:hover{background:#15181D;color:#fff}
.btn-ghost-light{color:var(--on-pine);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;padding-inline:4px}
.btn-ghost-light:hover{text-decoration-thickness:4px}
.btn-cta{background:var(--cta);color:var(--on-cta)}
.btn-cta:hover{background:var(--cta-hover)}
.btn-big{width:100%;min-height:58px;font-size:17px}

/* ---------- header + logo ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--ground);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:66px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.wordmark{font:800 25px/1 var(--body);letter-spacing:-.045em;color:var(--ink)}
.wordmark b{font-weight:800;color:var(--pine)}
.logo-sm .wordmark{font-size:20px}
.top nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{flex:none;text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;color:var(--muted)}
.top nav a:hover{color:var(--ink)}
.top nav .nav-size{color:var(--pine)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:580px}
.hero-field{background:var(--pine);color:var(--on-pine);display:flex;align-items:center;
  padding:64px 48px 72px max(20px,calc((100vw - 1240px) / 2 + 20px))}
.hero-copy{max-width:560px}
.hero-solo{grid-template-columns:1fr;min-height:0}
.hero-solo .hero-field{padding-right:max(20px,calc((100vw - 1240px) / 2 + 20px))}
.hero-solo .hero-copy{max-width:760px}
.hero h1{font:400 clamp(50px,6.2vw,88px)/1.06 var(--display);margin:0 0 24px}
.hero p{font-size:19px;line-height:1.55;color:var(--pine-dim);margin:0 0 32px;max-width:42ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.hero-shot{background:var(--photo);position:relative;display:grid;grid-template-rows:1fr auto;padding:32px max(20px,calc((100vw - 1240px) / 2 + 20px)) 40px 0;min-width:0}
.hero-img{display:block;min-height:0}
.hero-img img{width:100%;height:100%;max-height:430px;object-fit:contain}
.hero-tag{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:end;margin:-110px 0 0 -72px;position:relative;z-index:2}
.hero-tag > div:last-child{display:grid;gap:12px;padding-bottom:6px}
.hero-name{font-weight:700;font-size:18px;line-height:1.35;color:#15181D;text-decoration:none}
.hero-name:hover{text-decoration:underline}
.hero-tag .btn{justify-self:start}

/* tem lưỡi gà (vật in: giấy trắng mực đen ở cả hai chế độ sáng/tối) */
.tag{background:var(--paper);color:var(--print);border:3px solid var(--print);padding:18px 16px 12px;position:relative;transform:rotate(-3deg);transform-origin:50% 0}
.tag::before{content:"";position:absolute;top:7px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--photo);box-shadow:inset 0 0 0 2px var(--print)}
.hero .tag{animation:swing 1.1s cubic-bezier(.2,.75,.25,1) .25s both}
@keyframes swing{0%{transform:rotate(-16deg)}55%{transform:rotate(1.5deg)}100%{transform:rotate(-3deg)}}
.tag-top{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:13px;padding-bottom:8px;border-bottom:3px solid var(--print)}
.tag-price{font:400 46px/1.05 var(--display);padding:10px 0 8px}
.tag-grid{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:3px solid var(--print)}
.tag-grid div{padding:7px 0 6px;border-bottom:1px solid var(--print)}
.tag-grid div:nth-child(odd){padding-right:10px;border-right:1px solid var(--print)}
.tag-grid div:nth-child(even){padding-left:10px}
.tag-grid dt{font-size:11px;line-height:1.2;opacity:.7}
.tag-grid dd{margin:0;font-weight:700;font-size:15px}
.tag-grid s{font-weight:500;opacity:.7}
.tag-code{display:flex;justify-content:space-between;align-items:end;gap:10px;padding-top:10px;font-size:11px;font-weight:600}
.bars{display:flex;gap:2px;height:28px;align-items:stretch}
.bars i{display:block;background:currentColor}

/* ---------- lối đi danh mục ---------- */
.aisles{padding-block:56px 8px}
.aisle-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.aisle{text-decoration:none;display:grid;gap:2px}
.aisle img{aspect-ratio:1;object-fit:contain;background:var(--photo);width:100%;height:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.aisle:hover img{transform:scale(1.05)}
.aisle-name{font:400 28px/1.1 var(--display);margin-top:10px}
.aisle-count{color:var(--muted);font-size:14px}

/* ---------- catalogue ---------- */
.catalogue{padding-block:56px 72px}
.cat-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 24px;margin-bottom:28px}
.cat-title{font:400 clamp(34px,4.2vw,54px)/1.08 var(--display);margin:0}
.cat-title .count{font:500 16px var(--body);color:var(--muted);margin-left:10px;vertical-align:middle}
.controls{display:flex;flex-wrap:wrap;gap:8px}
.search{position:relative;display:block}
.search svg{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.controls input,.controls select{height:46px;border:0;background:var(--well);color:var(--ink);font:500 15px var(--body);padding:0 14px;border-radius:0}
.controls input{padding-left:40px;width:230px}
.controls select{cursor:pointer;padding-right:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:44px 24px}
.card{display:flex;flex-direction:column;gap:6px;min-width:0}
.shot{position:relative;display:block;aspect-ratio:1;background:var(--photo);overflow:hidden;margin-bottom:8px}
.shot img{width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover .shot img{transform:scale(1.05)}
.badge{position:absolute;top:0;left:0;background:var(--cta);color:#fff;font:400 20px/1 var(--display);padding:8px 10px 7px}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--muted)}
.card h3{font:600 16px/1.35 var(--body);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:auto;padding-top:4px}
.price b{font:400 28px/1.05 var(--display)}
.price s{color:var(--muted);font-size:14px}
.rate{margin:0;font-size:13px;color:var(--muted)}
.low{margin:0;font-size:13px;font-weight:700;color:var(--pine);display:flex;align-items:center;gap:6px}
.low::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid currentColor}
.buy{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:8px;background:var(--well);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;transition:background-color .15s,color .15s}
.buy:hover{background:var(--cta);color:#fff}
.empty{grid-column:1/-1;text-align:center;padding:56px 16px;background:var(--well);color:var(--muted);margin:0}
.more{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:var(--muted);margin:40px 0 0}
.more a{font-weight:700;color:var(--ink)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:48px}
.pager a{min-width:46px;height:46px;display:grid;place-items:center;text-decoration:none;font-weight:700;background:var(--well)}
.pager a[aria-current]{background:var(--ink);color:var(--ground)}

/* ---------- bộ đổi size ---------- */
.sizer{background:var(--pine);color:var(--on-pine);padding-block:72px}
.sizer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.sizer h2{font:400 clamp(38px,4.6vw,62px)/1.08 var(--display);margin:0 0 18px}
.measure{margin:0 0 28px;padding-left:22px;color:var(--pine-dim);font-size:16px;display:grid;gap:6px;max-width:46ch}
.sizer .hint{font-size:14px;color:var(--pine-dim);margin:20px 0 0;max-width:52ch}
.slider{display:grid;gap:12px;font-size:17px}
.slider b{font:400 30px var(--display);margin-left:6px}
.slider input{width:100%;accent-color:#fff;height:32px;cursor:pointer}
.label-big{background:var(--paper);color:var(--print);border:4px solid var(--print);padding:18px 22px 14px;transform:rotate(1.5deg)}
.lb-row{display:flex;justify-content:space-between;align-items:end;gap:12px;font-weight:700;font-size:14px}
.lb-head{padding-bottom:10px;border-bottom:4px solid var(--print)}
.lb-cells{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
.lb-cells div{padding:14px 8px 12px;display:grid;gap:4px;border-right:2px solid var(--print);min-width:0}
.lb-cells div:first-child{padding-left:0}
.lb-cells div:last-child{border-right:0}
.lb-cells span{font-size:13px;font-weight:600}
.lb-cells b{font:400 clamp(34px,4vw,52px)/1 var(--display)}
.lb-cells .lb-vn b{font-size:clamp(48px,6vw,76px);color:var(--cta)}
.lb-foot{padding-top:10px;border-top:4px solid var(--print);font-size:12px}
.size-table{grid-column:1/-1;background:var(--ground);color:var(--ink)}
.size-table summary{cursor:pointer;padding:16px 20px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.size-table summary::-webkit-details-marker{display:none}
.size-table summary::after{content:"+";font:400 24px/1 var(--display)}
.size-table[open] summary::after{content:"–"}
.tablebox{overflow-x:auto;padding:0 20px 20px}
.tablebox table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.tablebox th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:8px 12px;background:var(--well)}
.tablebox td{padding:9px 12px;border-bottom:1px solid var(--line)}
.tablebox td:nth-child(2){font-weight:700}
.tablebox tr.on td{background:var(--pine);color:#fff;font-weight:700}

/* ---------- trang danh mục ---------- */
.crumbs{font-size:14px;color:var(--muted);padding-block:16px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin-inline:6px;opacity:.6}
.crumbs.on-field{background:var(--pine);color:var(--pine-dim);max-width:none;padding-left:max(20px,calc((100vw - 1240px) / 2 + 20px));padding-right:20px;margin:0}
.cat-head{background:var(--pine);color:var(--on-pine)}
.cat-head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 56px;align-items:end;padding-block:20px 36px}
.cat-head h1{font:400 clamp(54px,7.5vw,112px)/1.04 var(--display);margin:0}
.cat-head p{color:var(--pine-dim);font-size:18px;margin:0;max-width:52ch}
.cat-switch{grid-column:1/-1;display:flex;gap:6px 22px;flex-wrap:wrap;padding-top:18px}
.cat-switch a{color:var(--pine-dim);text-decoration:none;font-weight:600}
.cat-switch a:hover,.cat-switch a[aria-current]{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* ---------- trang sản phẩm ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start;padding-block:8px 64px}
.pd-shot{background:var(--photo);aspect-ratio:1;display:grid;place-items:center}
.pd-shot img{width:100%;height:100%;object-fit:contain;padding:4%}
.pd-info{display:grid;gap:16px;position:sticky;top:84px}
.pd h1{font:400 clamp(36px,4vw,54px)/1.1 var(--display);margin:0}
.pd .rate{font-size:15px}
.pd .tag{transform:rotate(-1.5deg);max-width:340px;margin:10px 0 8px}
.note{font-size:14px;color:var(--muted);margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px;margin:0}
.facts div{background:var(--well);padding:12px 14px}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:0;font-weight:700}

/* lịch sử giá */
.pricewatch{background:var(--pine-soft);padding-block:56px}
.pw-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 32px;margin-bottom:24px}
.pw-head h2{font:400 clamp(32px,3.8vw,48px)/1.1 var(--display);margin:0}
.verdict{margin:0;font-weight:700;font-size:17px}
.verdict.good{color:var(--pine)}
.pw-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:stretch}
.pw-stats{display:grid;gap:2px;margin:0;align-content:start}
.pw-stats div{background:var(--ground);padding:14px 16px}
.pw-stats dt{font-size:13px;color:var(--muted)}
.pw-stats dd{margin:0;font:400 28px/1.15 var(--display)}
.pw-chart{background:var(--ground);padding:16px;min-width:0}
.chart{width:100%;height:auto;display:block}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font:500 12px var(--body)}
.chart .area{fill:var(--pine);opacity:.12}
.chart .line{fill:none;stroke:var(--pine);stroke-width:3;stroke-linejoin:round}
.chart .min-dot{fill:var(--ground);stroke:var(--pine);stroke-width:3}
.chart .now-dot{fill:var(--cta);stroke:var(--ground);stroke-width:3}
.pw-log{margin-top:16px;background:var(--ground)}
.pw-log summary{cursor:pointer;padding:14px 16px;font-weight:700}
.pw-log table{border-collapse:collapse;width:100%;font-size:15px}
.pw-log th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:8px 16px;background:var(--well)}
.pw-log td{padding:9px 16px;border-top:1px solid var(--line)}

.read{padding-block:64px}
.read-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.article{font-size:17px;line-height:1.75;min-width:0}
.article > *{max-width:68ch}
.article h2{font:400 32px/1.15 var(--display);margin:48px 0 14px}
.article h2:first-child{margin-top:0}
.article h3{font:700 18px/1.4 var(--body);margin:26px 0 6px}
.article p{margin:0 0 16px}
.article ul,.article ol{padding-left:22px;margin:0 0 16px}
.article li{margin:6px 0}
.read-aside{position:sticky;top:84px;display:grid;gap:10px;background:var(--well);padding:18px}
.read-aside img{aspect-ratio:1;object-fit:contain;background:var(--photo);width:100%;height:auto}
.aside-name{margin:0;font-weight:600;font-size:15px;line-height:1.35}
.aside-price{margin:0;font:400 32px/1.05 var(--display)}
.related{padding-block:56px 24px}
.related .cat-title{margin-bottom:28px}
.buybar{display:none}

/* ---------- footer gọn ---------- */
.foot{background:var(--foot);color:#fff;padding-block:28px}
.foot-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.foot .wordmark{color:#fff}
.foot .wordmark b{color:#7FD1A8}
.foot-left{display:grid;gap:8px}
.disclosure{color:rgba(255,255,255,.66);font-size:13px;line-height:1.5;margin:0;max-width:62ch}
.foot-cats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.foot-cats a{color:rgba(255,255,255,.88);text-decoration:none;font-weight:600}
.foot-cats a:hover{color:#fff;text-decoration:underline}
.copy{color:rgba(255,255,255,.5);font-size:13px;margin:0}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-field{padding:48px 20px 56px}
  .hero-shot{padding:24px 20px 32px}
  .hero-tag{margin:-60px 0 0;grid-template-columns:260px minmax(0,1fr)}
  .aisle-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px}
  .aisle{flex:0 0 42%;scroll-snap-align:start}
  .sizer-grid,.cat-head-grid,.pd,.read-grid,.pw-grid{grid-template-columns:1fr}
  .pw-stats{grid-template-columns:1fr 1fr}
  .pd-info,.read-aside{position:static}
  .read-aside{display:none}
  .foot-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .top nav a:not(.nav-size){display:none}
  .hero h1{font-size:clamp(44px,12vw,60px)}
  .hero-img img{max-height:240px}
  .hero-shot{padding-top:8px}
  .hero-tag{grid-template-columns:1fr;margin-top:-30px}
  .hero-tag .tag{max-width:300px}
  .controls{width:100%}
  .search{flex:1 1 100%}
  .controls input{width:100%}
  .controls select{flex:1 1 40%;min-width:0}
  .grid{grid-template-columns:1fr 1fr;gap:32px 14px}
  .price b{font-size:22px}
  .card h3{font-size:14px}
  .buy{font-size:14px}
  .lb-cells{grid-template-columns:1fr 1fr 1fr}
  .lb-cells div:nth-child(3){border-right:0}
  .lb-cells div:nth-child(n+4){border-top:2px solid var(--print)}
  .lb-cells div:nth-child(4){padding-left:0}
  .lb-cells b{font-size:34px}
  .pw-stats dd{font-size:22px}
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-between;align-items:center;gap:12px;background:var(--ground);box-shadow:0 -1px 0 var(--line);
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .buybar b{font:400 26px/1 var(--display)}
  .buybar span{color:var(--cta);font-weight:700}
  body:has(.buybar) .foot{padding-bottom:100px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}