/* Chỉ dùng biến từ tokens.css. Tiền tố class: cd- (cuahang-demo) để không đè class của plugin. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.5;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}
.cd-wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}
.cd-only-d{display:none}
.cd-only-m{display:block}
h2.cd-h{font-size:20px;font-weight:800;margin:0}
.cd-hs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.cd-hs::-webkit-scrollbar{display:none}

/* ô ảnh giữ chỗ */
.cd-ph{background:var(--tint);color:var(--tint-ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);border-radius:10px;text-align:center}
.cd-ph.g{background:var(--tint-g);color:var(--tint-g-ink)}
.cd-ph.y{background:var(--tint-y);color:var(--tint-y-ink)}

/* 1 đầu trang */
.cd-head{background:var(--c);color:var(--c-ink);position:sticky;top:0;z-index:20}
.cd-head .cd-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding-block:14px 16px}
.cd-logo{flex:1 1 auto;font-size:22px;font-weight:800;letter-spacing:-.01em}
.cd-iconbtn{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;border:0;color:var(--c-ink)}
.cd-search{order:3;flex:1 1 100%;display:flex;align-items:center;gap:10px;background:#fff;color:var(--muted);border-radius:12px;min-height:48px;padding:0 14px}
.cd-search input{flex:1;border:0;outline:0;font:inherit;color:var(--text);background:transparent;min-width:0}
.cd-place{order:4;flex:1 1 100%;display:flex;align-items:center;gap:8px;font-weight:500}

/* 2 dải ưu đãi */
.cd-promo{margin-top:12px;min-height:48px;background:var(--promo-bg);border:1px solid var(--promo-line);border-radius:12px;display:flex;align-items:center;padding:0 14px;gap:10px}
.cd-promo b{color:var(--c)}
.cd-promo span{flex:1}

/* 3 lối tắt */
.cd-short{padding-block:16px 4px}
.cd-short .cd-hs{gap:0}
.cd-short a{flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--fs-label);text-align:center;line-height:1.25}
.cd-short i{font-style:normal;width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700}

/* khối chung */
.cd-block{padding-top:20px;display:flex;flex-direction:column;gap:12px}
.cd-blockhead{display:flex;align-items:baseline;justify-content:space-between}
.cd-blockhead a{font-weight:600;color:var(--c)}

/* 4 gợi ý */
.cd-chip{flex:0 0 auto;min-height:var(--btn-h);padding:0 16px;border-radius:var(--r-pill);display:flex;align-items:center;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--text)}
.cd-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cd-idea{flex:0 0 200px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-idea);overflow:hidden}
.cd-idea .cd-ph{height:150px;border-radius:0}
.cd-idea div.b{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.cd-idea strong{font-weight:600;line-height:1.3}
.cd-btn2{min-height:var(--btn-h);border-radius:8px;border:1.5px solid var(--c);background:var(--card);color:var(--c);font-weight:700;font-size:var(--fs-body)}

/* 5 sản phẩm */
.cd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cd-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:8px;display:flex;flex-direction:column;gap:6px}
.cd-card .cd-ph{aspect-ratio:1;position:relative}
.cd-pct{position:absolute;top:6px;left:6px;background:var(--ink);color:#fff;font-size:var(--fs-label);font-weight:700;padding:1px 7px;border-radius:6px}
.cd-name{line-height:1.3;height:42px;overflow:hidden;font-weight:500}
.cd-size{font-size:var(--fs-label);color:var(--muted)}
.cd-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.cd-price b{font-size:var(--fs-price);font-weight:800}
.cd-price s{font-size:var(--fs-label);color:var(--strike)}
.cd-buy{border:0;width:100%;min-height:var(--btn-h);border-radius:8px;background:var(--c);color:var(--c-ink);font-weight:700;font-size:var(--fs-body)}

/* 6 khuyến mãi theo chủ đề */
.cd-deal{flex:0 0 160px;display:flex;flex-direction:column;gap:8px}
.cd-deal .cd-ph{height:120px}
.cd-deal div.l{background:var(--ink);color:#fff;border-radius:8px;min-height:var(--btn-h);display:flex;align-items:center;justify-content:center;font-weight:700;text-align:center;padding:0 8px}

/* 7 banner lớn */
.cd-banner{height:170px;border-radius:16px;background:var(--c);color:var(--c-ink);padding:20px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.cd-banner small{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em}
.cd-banner h3{margin:0;font-size:26px;font-weight:800;line-height:1.15}
.cd-banner .cd-ph{display:none}

/* 8 banner chủ đề */
.cd-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px}
.cd-three .cd-ph{height:96px}

/* 9 chân trang */
.cd-foot{margin-top:24px;background:var(--ink);color:var(--footer-text);padding-block:24px calc(var(--bar-h) + 24px)}
.cd-foot .cd-wrap{display:grid;gap:14px}
.cd-foot b{font-size:18px;font-weight:800;color:#fff}
.cd-foot small{font-size:var(--fs-label);color:var(--footer-muted)}

/* 10 thanh đáy điện thoại */
.cd-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--bar-h);background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.cd-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-label);color:var(--muted);min-height:60px}
.cd-bar a.on{color:var(--c);font-weight:700}

/* máy tính */
@media (min-width:900px){
  .cd-only-d{display:block}
  .cd-only-m,.cd-bar{display:none}
  .cd-head .cd-wrap{flex-wrap:nowrap;gap:24px;padding-block:16px}
  .cd-logo{flex:0 0 230px;font-size:26px}
  .cd-search{order:0;flex:1 1 auto;min-height:52px;padding:0 18px}
  .cd-place{order:0;flex:0 0 auto}
  .cd-place.cd-only-m{display:none}
  .cd-promo{margin-top:16px;padding:0 18px}
  .cd-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;padding-top:20px;align-items:start}
  .cd-cats{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:96px}
  .cd-cats a{min-height:var(--btn-h);display:flex;align-items:center;padding:0 14px;border-radius:8px}
  .cd-cats a.on{background:var(--promo-bg);color:var(--c);font-weight:700}
  .cd-main{display:flex;flex-direction:column;gap:24px;min-width:0}
  .cd-main .cd-block{padding-top:0}
  .cd-short{padding-block:0}
  .cd-short .cd-hs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;overflow:visible}
  .cd-short a{flex:none}
  .cd-short i{width:64px;height:64px}
  h2.cd-h{font-size:var(--fs-block)}
  .cd-ideas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow:visible}
  .cd-idea{flex:none}
  .cd-idea .cd-ph{height:170px}
  .cd-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .cd-card{padding:10px}
  .cd-deals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow:visible}
  .cd-deal{flex:none}
  .cd-deal .cd-ph{height:130px}
  .cd-banner{height:200px;border-radius:var(--r-banner);padding:0 48px;flex-direction:row;align-items:center;justify-content:space-between}
  .cd-banner h3{font-size:36px}
  .cd-banner .cd-ph{display:flex;width:220px;height:130px;border-radius:14px;background:rgba(255,255,255,.16);color:var(--c-ink)}
  .cd-three{padding-top:0;gap:14px}
  .cd-three .cd-ph{height:110px}
  .cd-foot{padding-block:32px}
  .cd-foot .cd-wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Khối "Cam kết" (thêm ở thử sửa 3) */
.cd-promise-grid{display:grid;grid-template-columns:1fr;gap:10px}
.cd-promise-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.cd-promise-item strong{font-weight:700}
.cd-promise-item span{color:var(--muted)}
@media (min-width:900px){ .cd-promise-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }