/* CNHD v4: Tấm sticker linh thú. Luật dùng ở DESIGN_SYSTEM_V4.md.
   Bố cục: dải màu tràn ngang, trong đó là vật nổi (sticker, khung bo tròn). */
:root{
  --muc:#15206B;--phu:#4A5290;--xanh:#1D33C8;--dao:#D61F6E;--bo:#FFD84D;
  --trang:#FFF;--sua:#F4F5FF;--net:rgba(21,32,107,.14);
  --f-hien:'Paytone One','Nunito',system-ui,sans-serif;
  --f-than:'Nunito',system-ui,sans-serif;
  --r-khung:1.75rem;--r-the:1.25rem;--r-nho:.75rem;--r-nut:999px;
  --rong:90rem;--le:clamp(1rem,4vw,3.5rem);
  --bong-dan:0 .18rem 0 rgba(21,32,107,.2);
  --may:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='220' viewBox='0 0 300 220'%3E%3Cpath d='M35.0 62.2 34.5 57.3 35.1 52.6 36.9 48.3 39.6 44.6 43.1 41.7 47.0 39.9 51.2 39.1 55.4 39.3 59.3 40.5 62.7 42.6 65.4 45.4 67.3 48.7 68.3 52.3 68.3 55.9 67.5 59.3 66.0 62.3 63.8 64.7 61.1 66.5 58.2 67.6 55.2 67.8 52.3 67.4 49.8 66.2 47.7 64.6 46.1 62.5 45.1 60.2 44.7 57.8 45.0 55.5 45.7 53.5 46.9 51.7 48.5 50.4 50.2 49.6 52.0 49.3 53.7 49.4 55.3 49.9 56.5 50.8 57.5 51.9 58.0 53.1M65.3 47.9 65.6 41.9 67.2 36.3 70.2 31.3 74.1 27.3 78.8 24.4 83.9 22.8 89.2 22.4 94.3 23.3 98.9 25.4 102.8 28.5 105.7 32.3 107.7 36.6 108.4 41.1 108.1 45.5 106.8 49.7 104.5 53.3 101.5 56.1 98.1 58.1 94.3 59.1 90.6 59.2 87.0 58.5 83.8 56.9 81.2 54.7 79.3 52.0 78.2 49.0 77.8 45.9 78.2 43.0 79.2 40.4 80.8 38.2 82.8 36.5 85.1 35.4 87.4 35.0 89.7 35.1 91.7 35.7 93.4 36.8 94.7 38.2 95.6 39.8 96.0 41.5 95.9 43.1M109.4 68.6 107.6 64.6 106.9 60.3 107.2 56.1 108.5 52.2 110.7 48.8 113.6 46.1 116.9 44.3 120.6 43.3 124.2 43.3 127.7 44.1 130.8 45.8 133.3 48.1 135.2 50.9 136.2 53.9 136.5 57.0 136.0 60.1 134.8 62.8 133.0 65.0 130.8 66.7 128.3 67.8 125.7 68.2 123.2 67.9 121.0 67.1 119.0 65.8 117.5 64.1 116.6 62.2 116.1 60.1 116.2 58.1 116.8 56.3 117.7 54.8 119.0 53.6 120.4 52.8 121.9 52.4 123.4 52.4 124.7 52.8 125.8 53.5 126.6 54.4M10 88C30 76 48 92 70 82S112 76 132 84S150 92 160 82M171.0 170.2 170.5 165.3 171.1 160.6 172.9 156.3 175.6 152.6 179.1 149.7 183.0 147.9 187.2 147.1 191.4 147.3 195.3 148.5 198.7 150.6 201.4 153.4 203.3 156.7 204.3 160.3 204.3 163.9 203.5 167.3 202.0 170.3 199.8 172.7 197.1 174.5 194.2 175.6 191.2 175.8 188.3 175.4 185.8 174.2 183.7 172.6 182.1 170.5 181.1 168.2 180.7 165.8 181.0 163.5 181.7 161.5 182.9 159.7 184.5 158.4 186.2 157.6 188.0 157.3 189.7 157.4 191.3 157.9 192.5 158.8 193.5 159.9 194.0 161.1M201.3 155.9 201.6 149.9 203.2 144.3 206.2 139.3 210.1 135.3 214.8 132.4 219.9 130.8 225.2 130.4 230.3 131.3 234.9 133.4 238.8 136.5 241.7 140.3 243.7 144.6 244.4 149.1 244.1 153.5 242.8 157.7 240.5 161.3 237.5 164.1 234.1 166.1 230.3 167.1 226.6 167.2 223.0 166.5 219.8 164.9 217.2 162.7 215.3 160.0 214.2 157.0 213.8 153.9 214.2 151.0 215.2 148.4 216.8 146.2 218.8 144.5 221.1 143.4 223.4 143.0 225.7 143.1 227.7 143.7 229.4 144.8 230.7 146.2 231.6 147.8 232.0 149.5 231.9 151.1M245.4 176.6 243.6 172.6 242.9 168.3 243.2 164.1 244.5 160.2 246.7 156.8 249.6 154.1 252.9 152.3 256.6 151.3 260.2 151.3 263.7 152.1 266.8 153.8 269.3 156.1 271.2 158.9 272.2 161.9 272.5 165.0 272.0 168.1 270.8 170.8 269.0 173.0 266.8 174.7 264.3 175.8 261.7 176.2 259.2 175.9 257.0 175.1 255.0 173.8 253.5 172.1 252.6 170.2 252.1 168.1 252.2 166.1 252.8 164.3 253.7 162.8 255.0 161.6 256.4 160.8 257.9 160.4 259.4 160.4 260.7 160.8 261.8 161.5 262.6 162.4M146 196C166 184 184 200 206 190S248 184 268 192S286 200 296 190' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* màu riêng từng mẫu, đo từ ảnh sản phẩm */
.lt-vinh{--dam:#945600;--nhat:#FFE9A8}
.lt-hoa{--dam:#C8261E;--nhat:#FFD5CC}
.lt-phu{--dam:#1E50C8;--nhat:#D4E2FF}
.lt-quy{--dam:#0B7D69;--nhat:#C4F0E2}
.lt-nghe{--dam:#6F4FC4;--nhat:#E3DAFF}
.lt-kim{--dam:#12307F;--nhat:#FFDCC4}
.lt-lahau-cam{--dam:#C7420F;--nhat:#FFD9C2}
.lt-lahau-bacha{--dam:#0E7A5C;--nhat:#D2F4E4}
.lt-bachhac{--dam:#8A3FA8;--nhat:#F6DDF3}
.lt-lyngu-xanhla{--dam:#0E5B46;--nhat:#CDE9D5}
.lt-lyngu-xanhbien{--dam:#0B6E8C;--nhat:#C6EEF7}

*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(100%,calc(40% + .667vw),115%);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--trang);color:var(--muc);font:500 1rem/1.6 var(--f-than)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--f-hien);font-weight:400;line-height:1.18;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.4rem)}
h2{font-size:clamp(1.75rem,3vw,2.6rem)}
h3{font:800 1.0625rem/1.35 var(--f-than);margin:0}
.v4 p{margin:0}
.phu4{color:var(--phu);font-size:.9375rem}
:focus-visible{outline:3px solid var(--xanh);outline-offset:3px;border-radius:.25rem}
.ke{max-width:var(--rong);margin-inline:auto;padding-inline:max(var(--le),env(safe-area-inset-left,0px)) max(var(--le),env(safe-area-inset-right,0px))}
.vung4{padding-block:clamp(2.5rem,6vw,4.5rem)}
.vung4.sat{padding-top:0}
.h1-sp{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.dau-muc{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;justify-content:space-between;margin-bottom:1.75rem}
.lien{display:inline-block;padding-block:.65rem;font-weight:800;color:var(--xanh);text-underline-offset:.2em}

/* nút */
.nut4{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.6rem 1.75rem;border:0;border-radius:var(--r-nut);font:800 1rem/1.2 var(--f-than);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.nut-chinh{background:var(--dao);color:#fff;box-shadow:0 .25rem 0 #A3134F}
.nut-phu{background:var(--trang);color:var(--muc);box-shadow:inset 0 0 0 2px var(--muc)}
.nut4:hover{transform:translateY(-1px)}
.nut-chinh:active{transform:translateY(.2rem);box-shadow:0 .05rem 0 #A3134F}

/* đầu trang */
.bao4{background:var(--xanh);color:#fff;text-align:center;font-weight:700;font-size:.875rem;padding:.4rem 1rem}
.dau4{position:sticky;top:0;z-index:20;background:var(--trang);box-shadow:0 1px 0 var(--net)}
.dau4>.ke{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.logo4 img{width:3.25rem;height:3.25rem}
.menu{display:flex;gap:.25rem;flex:1;justify-content:center;align-self:stretch;align-items:center}
.menu a{padding:.5rem .8rem;border-radius:var(--r-nut);font-weight:800;text-decoration:none;font-size:.9688rem;white-space:nowrap}
.menu a:hover,.mo-tha:hover,.co-tha.dang-mo .mo-tha{background:var(--sua)}
.menu a[aria-current]{color:var(--xanh)}
.co-tha{align-self:stretch;display:flex;align-items:center}
.mo-tha{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border:0;border-radius:var(--r-nut);background:none;color:inherit;font:800 .9688rem/1.6 var(--f-than);cursor:pointer}
.mo-tha::after{content:"";width:.45rem;height:.45rem;margin-top:-.2rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.co-tha.dang-mo .mo-tha::after{margin-top:.15rem;transform:rotate(-135deg)}
.tha{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 5rem);overflow:auto;background:var(--trang);box-shadow:0 1px 0 var(--net),0 1rem 1.5rem rgba(21,32,107,.12);opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:opacity .14s,transform .14s,visibility .14s}
.co-tha.dang-mo .tha{opacity:1;visibility:visible;transform:none}
.tha-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,3.4fr);gap:.5rem 1.75rem;padding-block:1.75rem .75rem}
.tha-cot h3{font:400 1.0625rem/1.3 var(--f-hien);margin-bottom:.5rem}
.tha-cot ul{list-style:none;margin:0;padding:0;display:grid}
.menu .tha-cot a{display:block;padding:.3rem 0;border-radius:0;white-space:normal;font-weight:600}
.menu .tha-cot a:hover{background:none;color:var(--xanh);text-decoration:underline}
.tha-cot small{color:var(--phu);font-size:.875rem;font-weight:500}
.tha-phai{display:grid;gap:.5rem;align-content:start;min-width:0}
.tha-goi{font:400 1.0625rem/1.3 var(--f-hien)}
.tha-sp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;transition:opacity .12s}
.tha-sp.dang-doi{opacity:.4}
.tha-sp h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.anh-that{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;mix-blend-mode:normal!important}
.menu .tha-sp a{padding:0;border-radius:0;white-space:normal}
.menu .tha-sp a:hover{background:none}
.tha-sp h3{font-size:.9375rem}
.tha-sp .gia4{font-size:1rem}
.tha-het{grid-column:1/-1;justify-self:start}
.menu .tha-het{padding:.5rem 0;border-radius:0}
.menu .tha-het:hover{background:none}
.gio4{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.25rem 1rem;border-radius:var(--r-nut);background:var(--sua);font-weight:800;text-decoration:none;font-size:.9375rem}
.gio4.cart-btn{color:var(--muc);padding:.25rem 1rem;border:0}
.gio4.cart-btn[data-so]:not([data-so=""])::after{content:attr(data-so);position:static;display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;border-radius:50%;background:var(--dao);color:#fff;font-size:.75rem}
.mo-menu{display:none}

/* hero: tấm sticker */
.mo-dau{background:var(--may) 0 0/300px 220px,var(--nhat,var(--bo));transition:background-color .25s}
.mo-dau .ke{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(1.75rem,4vw,3.5rem)}
.hero-chu{display:grid;gap:1.25rem;justify-items:start}
.hero-chu p{font-size:1.125rem;font-weight:600;max-width:32rem}
.nut-hang{display:flex;flex-wrap:wrap;gap:.75rem}
.tam4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.25rem,1.2vw,1rem)}
.sticker{display:grid;justify-items:center;gap:.25rem;text-decoration:none;font:400 clamp(.875rem,1.3vw,1.0625rem)/1.2 var(--f-hien);text-align:center}
.sticker img{width:auto;height:clamp(5.5rem,10.5vw,10rem);filter:drop-shadow(var(--bong-dan));transition:transform .18s}
.sticker:nth-child(3n+1) img{transform:rotate(-4deg)}
.sticker:nth-child(3n+2) img{transform:rotate(2.5deg)}
.sticker:nth-child(3n) img{transform:rotate(-1.5deg)}
.sticker:hover img,.sticker:focus-visible img{transform:rotate(0) scale(1.07)}

/* ô danh mục */
.o-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.25rem)}
.o4{position:relative;display:grid;align-content:space-between;gap:.75rem;min-height:clamp(13rem,23vw,21rem);padding:1.25rem;overflow:hidden;border-radius:var(--r-khung);background:var(--nhat);text-decoration:none}
.o4 strong{font:400 clamp(1.25rem,2vw,1.75rem)/1.2 var(--f-hien)}
.o4 img{position:absolute;right:.5rem;bottom:.5rem;height:86%;width:auto;max-width:72%;object-fit:contain;transition:transform .2s}
.o4.o-anh img{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.32}
.o4.o-anh.nen-toi{background:#AFC5FF}
.o4.o-anh.nen-toi img{mix-blend-mode:screen;opacity:.9}
.o4 strong,.o4 span{position:relative;z-index:1}
.o4 span{display:grid;gap:.1rem;font-weight:800}

/* thẻ sản phẩm */
.luoi-sp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.25rem)}
.the4{display:grid;gap:.6rem;text-decoration:none}
.the4-anh{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:6%;border-radius:var(--r-the);background:var(--nhat);overflow:hidden}
.the4-anh img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transition:transform .2s}
.the4:hover .the4-anh img{transform:translateY(-.3rem)}
.nhan4{position:absolute;top:.6rem;left:.6rem;padding:.15rem .6rem;border-radius:var(--r-nut);background:var(--trang);color:var(--dam);font-size:.8125rem;font-weight:800}
.gia4{font:400 1.125rem/1.3 var(--f-hien);color:var(--dam,var(--dao))}

/* chia đôi: ô màu + ảnh thật */
.doi4{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden;border-radius:var(--r-khung);background:var(--nhat)}
.doi-chu{display:grid;gap:1rem;align-content:center;justify-items:start;padding:clamp(1.5rem,4vw,3.5rem)}
.doi4 img{width:100%;height:100%;min-height:18rem;max-height:32rem;object-fit:cover;object-position:50% 72%}

/* yên tâm */
.yen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.yen p{font-size:.9375rem;color:var(--phu)}

/* trang sản phẩm */
.mua{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.mua-anh{position:relative;aspect-ratio:1;border-radius:var(--r-khung);background:var(--nhat)}
.mua-anh img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain}
.mua-chu{display:grid;gap:1rem}
.mua-chu .gia4{font-size:1.75rem}
.chon4{display:flex;flex-wrap:wrap;gap:.5rem}
.chon4 a{padding:.5rem 1rem;border-radius:var(--r-nut);box-shadow:inset 0 0 0 2px var(--net);font-weight:800;text-decoration:none}
.chon4 a[aria-current]{background:var(--muc);color:#fff;box-shadow:none}
.tin{display:grid;gap:.4rem;padding:1rem;border-radius:var(--r-the);background:var(--sua);font-size:.9375rem;font-weight:600}
.mua-dinh{display:none}

/* trang yên tĩnh: hợp tác, chính sách */
.tinh{background:var(--sua);border-radius:var(--r-khung);padding:clamp(1.5rem,4vw,3rem);display:grid;gap:.75rem;max-width:44rem}

/* chân trang */
.dieu{display:flex;justify-content:center;gap:clamp(0rem,1vw,.75rem);overflow:hidden;margin-bottom:-1.6rem;padding-inline:.5rem;position:relative;z-index:1}
.dieu img{height:clamp(3.5rem,8vw,7rem);width:auto;filter:drop-shadow(var(--bong-dan))}
.chan4{background:var(--xanh);color:#fff;padding-block:3.25rem 1.75rem;font-size:.9375rem}
.chan-luoi{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.75rem}
.chan4 a{color:#fff}
.chan4 ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.25rem}
.chan4 h3{font:400 1.0625rem/1.3 var(--f-hien)}
.chan-logo{width:3.5rem;height:3.5rem;background:#fff;border-radius:var(--r-nho);padding:.25rem;margin-bottom:.75rem}
.bct{display:inline-block;margin-top:.75rem;background:#fff;border-radius:var(--r-nho);padding:.25rem}
.bct img{width:9.375rem;height:auto}
.ban-quyen{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.28);font-size:.875rem}

/* bảng hệ thiết kế */
.mau-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem}
.mau4{display:grid;gap:.25rem;font-size:.875rem;font-weight:700}
.mau4 i{display:block;height:4.5rem;border-radius:var(--r-nho);box-shadow:inset 0 0 0 1px var(--net)}
.m-muc{background:var(--muc)}.m-xanh{background:var(--xanh)}.m-dao{background:var(--dao)}.m-bo{background:var(--bo)}.m-sua{background:var(--sua)}.m-phu{background:var(--phu)}
.mau-lt{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.75rem}
.mau-lt div{padding:.75rem;border-radius:var(--r-nho);background:var(--nhat);color:var(--dam);font-weight:800;font-size:.875rem;min-height:4.5rem}
.bac4{display:grid;gap:.75rem}
.bac4>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:.5rem;border-top:1px solid var(--net)}
.tieu4{font-family:var(--f-hien);line-height:1.18}

.du-an-dau{display:grid;gap:.75rem;max-width:40rem;margin-bottom:2rem}
.du-an-dau p{font-size:1.125rem}
.luoi-da{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.25rem)}
.da{display:grid;gap:.5rem;justify-items:start;align-content:end;min-height:clamp(18rem,30vw,27rem);padding:1.5rem;border-radius:var(--r-khung);background:var(--may) 0 0/300px 220px,var(--nhat)}
.da img{height:clamp(7rem,12vw,10.5rem);width:auto;margin-bottom:auto;transform:rotate(-3deg);filter:drop-shadow(var(--bong-dan))}
.da h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.cho4{color:var(--dam);font-weight:700;font-size:.9375rem}
.doi-tac-moi{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:clamp(1.5rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-khung);background:var(--sua)}

@media (max-width:72rem){
  .tha-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tha-phai{display:none}
}
@media (max-width:60rem){
  .menu{display:none}
  .mo-menu{display:block}
  .mo-menu summary{list-style:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--sua);cursor:pointer;font-weight:800;font-size:.8125rem}
  .mo-menu summary::-webkit-details-marker{display:none}
  .mo-menu nav{position:absolute;left:0;right:0;top:100%;display:grid;background:var(--trang);padding:.5rem var(--le) 1rem;box-shadow:0 .5rem 1rem rgba(21,32,107,.12)}
  .mo-menu nav a{padding:.7rem 0;font-weight:800;text-decoration:none;border-bottom:1px solid var(--net)}
  .mo-menu nav{max-height:calc(100vh - 4rem);overflow:auto}
  .mo-menu .con summary{display:flex;justify-content:space-between;width:auto;height:auto;padding:.7rem 0;border-radius:0;background:none;font-size:1rem;border-bottom:1px solid var(--net)}
  .mo-menu .con summary::after{content:"+";font-size:1.25rem;line-height:1}
  .mo-menu .con[open] summary::after{content:"\2212"}
  .mo-menu .con a{display:block;padding-left:1rem;font-weight:600}
  .luoi-da{grid-template-columns:minmax(0,1fr)}
  .dau4>.ke{justify-content:space-between;gap:.75rem;min-height:3.75rem}
  .logo4 img{width:2.75rem;height:2.75rem}
  .mo-dau .ke{grid-template-columns:minmax(0,1fr)}
  .o-luoi,.luoi-sp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o4{min-height:15.5rem;padding:1rem}
  .o4:not(.o-anh) img{height:66%;max-width:66%}
  .doi4,.mua{grid-template-columns:minmax(0,1fr)}
  .doi4 img{max-height:22rem}
  .yen{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .chan-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chan-luoi>:first-child{grid-column:1/-1}
  .mua-dinh{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--trang);padding:.6rem max(1rem,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px));box-shadow:0 -1px 0 var(--net),0 -.4rem 1rem rgba(21,32,107,.08)}
  .co-mua-dinh{padding-bottom:4.75rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.t1{font-size:clamp(2.5rem,5.2vw,4.4rem)}
.t2{font-size:clamp(1.75rem,3vw,2.6rem)}

/* đầu trang: Theo dõi đơn cạnh Giỏ hàng (11/11/2026). Điện thoại hẹp chỉ còn biểu tượng xe. */
.dau-phai{display:flex;align-items:center;gap:.5rem}
.theo4{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.25rem 1rem;border-radius:var(--r-nut);box-shadow:inset 0 0 0 2px var(--net);color:var(--muc);font-weight:800;font-size:.9375rem;text-decoration:none;white-space:nowrap}
.theo4:hover,.theo4[aria-current]{box-shadow:inset 0 0 0 2px var(--muc)}
.dau-phai .gio4{white-space:nowrap}
/* chỉ còn biểu tượng khi chật: màn vừa còn menu ngang (60–72rem) và điện thoại hẹp (≤30rem) */
@media (min-width:60.01rem) and (max-width:72rem),(max-width:30rem){.theo4{width:2.75rem;padding:0;justify-content:center}.theo4 span{display:none}}

/* trang /theo-doi-don/ — chế độ yên tĩnh */
.td4 .ke{max-width:40rem}
.td4 h1{font-size:clamp(2rem,4vw,2.75rem)}
.td-mo{margin:.75rem 0 1.5rem;color:var(--phu)}
.td-form{display:grid;gap:.375rem}
.td-form label{margin-top:.625rem;font-weight:800}
.td-form input{width:100%;min-height:3rem;padding:.6rem .9rem;border:1.5px solid var(--net);border-radius:var(--r-nho);font:500 1rem var(--f-than);color:var(--muc);background:#fff}
.td-form input:focus{outline:none;border-color:var(--xanh)}
.td-xn{display:grid;grid-template-columns:auto auto minmax(6rem,1fr);gap:.5rem;align-items:center}
.td-xn img{display:block;height:3rem;width:auto;border-radius:var(--r-nho);background:var(--sua)}
.td-doi{min-height:3rem;padding:0 .9rem;border:0;border-radius:var(--r-nut);background:var(--sua);color:var(--xanh);font:800 .9375rem var(--f-than);cursor:pointer}
.td-loi{margin:.5rem 0 0;padding:.6rem .9rem;border-radius:var(--r-nho);background:#FFF1F2;color:#B42318;font-weight:700}
.td-form .nut-chinh{margin-top:1rem;width:100%}
.td-form .nut-chinh:disabled{opacity:.6;transform:none}
@media (max-width:26rem){.td-xn{grid-template-columns:auto 1fr}.td-xn input{grid-column:1/-1}}
.td-the{padding:1.25rem;border-radius:var(--r-the);background:var(--sua)}
.td-dau{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;padding-bottom:.75rem;border-bottom:1px solid var(--net)}
.td-dau span{color:var(--phu);font-size:.875rem}
.td-dau b{display:block;font:400 1.375rem/1.2 var(--f-hien)}
.td-tt{display:grid;gap:.5rem;margin:.75rem 0 0}
.td-tt div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem}
.td-tt dt{color:var(--phu)}
.td-tt dd{margin:0;font-weight:700;overflow-wrap:anywhere}
@media (max-width:26rem){.td-tt div{grid-template-columns:minmax(0,1fr);gap:0}}
.td-huy{margin:1rem 0 0;padding:.75rem 1rem;border-radius:var(--r-nho);background:#FFF1F2;color:#B42318;font-weight:700}
.td-h2{margin:2rem 0 1rem;font-size:1.375rem}
/* cây timeline: thanh nền xám, thanh màu mọc tới bước hiện tại, từng bước hiện lần lượt */
.td-tl{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.td-tl li:not(:last-child)::before,.td-tl li.noi::after{content:"";position:absolute;left:calc(.875rem - 1.5px);top:1.75rem;bottom:-1.5rem;width:3px;background:var(--net)}
.td-tl li.noi::after{background:var(--xanh);transform-origin:top;transform:scaleY(0);transition:transform .35s ease-in;transition-delay:calc(var(--i) * .16s + .2s)}
.td-kq.chay .td-tl li.noi::after{transform:none}
.td-tl.da-huy li.noi::after{background:var(--phu)}
.td-tl li{position:relative;display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:1rem;opacity:0;transform:translateY(.5rem);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i) * .16s)}
.td-kq.chay .td-tl li{opacity:1;transform:none}
.td-cham{position:relative;z-index:1;width:1.75rem;height:1.75rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--net)}
.td-tl li.xong .td-cham{background:var(--xanh);box-shadow:none}
.td-tl li.xong .td-cham::after{content:"";position:absolute;left:.6rem;top:.42rem;width:.38rem;height:.68rem;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.td-tl li.hien .td-cham{background:var(--dao);animation:td-nhip 1.8s ease-out 1s infinite}
@keyframes td-nhip{0%{box-shadow:0 0 0 0 rgba(214,31,110,.45)}100%{box-shadow:0 0 0 .9rem rgba(214,31,110,0)}}
.td-tl.da-huy li.xong .td-cham{background:var(--phu)}
.td-tl li div{display:flex;flex-direction:column;gap:.125rem;padding-top:.125rem}
.td-tl li b{font-weight:800}
.td-tl li.cho b,.td-tl li.cho small{color:var(--phu)}
.td-tl li small{font-size:.875rem;color:var(--phu)}
.td-tl li time{font-size:.875rem;font-weight:700}
.td-vd{margin-top:.25rem;font-weight:800;color:var(--xanh);text-underline-offset:.2em}
.td-lai{margin-top:2rem}
@media (prefers-reduced-motion:reduce){.td-tl li,.td-tl li.noi::after{transition:none}.td-tl li.hien .td-cham{animation:none}}