/* Trang ghép Clicker. Màu, phông, nút theo DESIGN_SYSTEM.md: nút là `.nut`, `.nut.vien` của style-v3.css, ⛔ không bo góc, không dùng cobalt làm nền nút.
   Riêng ô khối nhỏ và ô màu đế đi theo dáng đế thật. ⛔ Cỡ chữ dùng rem. */
/* Trang chính: giấu giao diện cũ, /dat-hang/ thì ngược lại */
html:not(.trang-dat) #app{display:none}
.trang-dat .cua,.trang-dat .bao{display:none}
.cua{--phien:#E7E8E4;--net:rgba(18,20,28,.14);--mo:rgba(18,20,28,.6);font-family:var(--body);font-size:.9375rem;line-height:1.45;color:var(--muc);background:var(--giay)}
.cua *{box-sizing:border-box}
.cua button:not(.nut),.cua input{font:inherit;color:inherit}
.cua button:not(.nut){cursor:pointer;background:none;border:0;padding:0}
.cua .nut{cursor:pointer;margin-top:0}
.cua :focus-visible{outline:2px solid var(--coban);outline-offset:3px}

.cua{display:grid;grid-template-columns:minmax(0,1fr) 25rem;height:calc(100svh - var(--dau,0px));min-height:34rem}
.san{position:relative;min-width:0;background:var(--phien);overflow:hidden}
#khung{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#khung.keo{cursor:grabbing}
#khung.to{cursor:move}
.goc-xem{position:absolute;top:18px;right:20px;display:flex;gap:8px}
.goc-xem .nut{padding:0 16px}
/* Cột phóng: + / thanh kéo dọc / − / về vừa khung. --t = mức phóng 0..1 theo thang log, moi.js đặt */
.thu-phong{position:absolute;top:74px;right:20px;display:flex;flex-direction:column;gap:6px}
.cua .thu-phong .nut{width:48px;min-width:0;padding:0;font-size:1.5rem;line-height:1}
/* Nút trên khung có nền giấy: phóng to thì hình chạy dưới nút, nền trong suốt sẽ lẫn vào hình */
.cua .san .nut.vien{background:var(--giay)}
.cua .san .nut.vien:not(:disabled):hover{background:var(--muc);color:var(--giay)}
.cua .thu-phong .nut:disabled{cursor:default;color:color-mix(in srgb,var(--muc) 30%,transparent);border-color:color-mix(in srgb,var(--muc) 30%,transparent)}
.ray{--t:0;position:relative;width:48px;height:9rem;cursor:ns-resize;touch-action:none;background:var(--giay);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muc) 30%,transparent)}
.ray::before,.ray::after{content:'';position:absolute;left:50%;width:2px;margin-left:-1px;bottom:6px;background:var(--muc)}
.ray::before{top:6px;opacity:.25}
.ray::after{height:calc(var(--t) * (100% - 12px))}
.ray i{position:absolute;left:12px;right:12px;height:12px;bottom:calc(var(--t) * (100% - 12px));background:var(--muc)}
.ray:hover i,.ray:focus-visible i{left:8px;right:8px}

.chu-san{position:absolute;left:20px;right:20px;bottom:16px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.chu-san>*{pointer-events:auto}
.phong .chu-san{background:var(--phien);box-shadow:0 0 0 20px var(--phien)}   /* đang phóng: dải chữ dưới đáy thành nền đặc, hình chạy phía sau */
#ten{width:100%;max-width:26rem;border:0;border-bottom:3px solid var(--muc);background:transparent;padding:0 0 2px;
  font-family:var(--dis);font-variation-settings:'wdth' 125;font-weight:800;font-size:2.5rem;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;outline:0}
#ten:focus{border-bottom-color:var(--coban)}
.chi{display:block;margin:0;font-size:.875rem;line-height:1.35;color:var(--muc);max-width:26rem}
.chi strong{font-weight:600}
.chi-keo{position:absolute;top:18px;left:20px;display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;background:var(--muc);color:var(--giay);font-family:var(--tech);font-size:.7812rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .35s}
.chi-keo.xong{opacity:0}
.hang-khoi.moi-vao .khoi{animation:goi 1.6s ease-in-out 2}
@keyframes goi{50%{transform:translateY(-3px)}}
.hang-khoi{display:flex;gap:6px;overflow-x:auto;padding:3px;margin:-3px;scrollbar-width:none}
.hang-khoi::-webkit-scrollbar{display:none}
.khoi{flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:.625rem;font-family:var(--dis);font-weight:800;font-size:1rem;
  box-shadow:inset 0 0 0 .3rem var(--de)}
.khoi.tron{border-radius:50%}
.khoi[aria-pressed=true]{outline:3px solid var(--muc);outline-offset:1px}

.ban{display:flex;flex-direction:column;min-height:0;overflow-y:auto;border-left:1px solid var(--net)}
.cua .ban h1{margin:0;padding:22px 24px 4px;font-family:var(--dis);font-variation-settings:'wdth' 112;font-weight:700;font-size:1.5rem;line-height:1.2}
.ban section{padding:16px 24px;border-bottom:1px solid var(--net)}
.ban section:last-of-type{border-bottom:0}
.ban h2{margin:0 0 10px;font-family:var(--dis);font-weight:700;font-size:1rem;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ban h2 small{font-family:var(--tech);font-weight:500;font-size:.7812rem;letter-spacing:.12em;color:var(--coban)}
.ban h2 small button{color:inherit;text-decoration:underline}
.cua .ban h3{margin:14px 0 6px;font-family:var(--body);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muc)}
.cua .ban h3 span{font-weight:400;font-size:.8125rem;color:var(--mo)}

.dang{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cua .dang button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border:1px solid var(--muc);font-family:var(--tech);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.cua .dang button:hover,.cua .dang button[aria-pressed=true]{background:var(--muc);color:var(--giay)}
.dang svg{display:block;width:2.75rem;height:2.25rem;fill:currentColor}

.hinh{display:flex;flex-wrap:wrap;gap:4px}
.hinh button{width:2.25rem;height:2.25rem;font-size:1.0625rem;line-height:1}
.hinh button:hover{background:var(--phien)}
.hh{display:block;width:1.25rem;height:1.25rem;margin:auto;background:currentColor;-webkit-mask:var(--h) center/contain no-repeat;mask:var(--h) center/contain no-repeat}

.nut.ngau{gap:10px;padding:0 18px}
.ngau i{display:block;width:1.125rem;height:1.125rem;border-radius:50%;background:conic-gradient(#1a57d1,#ff429e,#ffcd38,#69c296,#1a57d1)}

.mau{display:flex;flex-wrap:wrap;gap:8px}
.cua .mau button{width:2rem;height:2rem;background:var(--c);box-shadow:inset 0 0 0 1px var(--net)}
body.tron-het .mau.theo-dang button{border-radius:50%}
.mau button[aria-pressed=true]{outline:2.5px solid var(--muc);outline-offset:2px}
#mauNut button{display:grid;place-items:center}
#mauNut button::after{content:'';width:.625rem;height:.625rem;border-radius:50%;background:var(--chu)}

.hai{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--muc)}
.cua .hai button{height:46px;font-family:var(--tech);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.cua .hai button:hover,.cua .hai button[aria-pressed=true]{background:var(--muc);color:var(--giay)}
.day{display:flex;align-items:center;gap:8px;margin:12px 0 10px;font-weight:500}
.day span{margin-left:auto;color:var(--mo);font-weight:400}
.day input{width:1.125rem;height:1.125rem;accent-color:var(--coban);margin:0}

.chot{position:sticky;bottom:0;margin-top:auto;padding:12px 24px 16px;background:var(--giay);border-top:1px solid var(--muc)}
.chot p{margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.chot strong{font-family:var(--dis);font-weight:800;font-size:1.375rem}
#them{width:100%;padding:0 12px}
#them:disabled{opacity:.5;cursor:default}
#xemGio{width:100%;margin-top:8px;justify-content:center;cursor:pointer;font-family:inherit;background:var(--sua,#F4F5FF)}   /* reset nút của trang xoá nền .gio4 */
#xemGio[hidden]{display:none}
/* Thanh giỏ chung đè lên ô .chot (cùng đáy màn hình) ⇒ trang này dùng nút #xemGio thay nó */
body:has(#moi) #cnhdGioBar{display:none}
body:has(#moi):has(#cnhdGioBar){padding-bottom:0}
/* Mời bạn mua chung: hành động phụ — nền sữa, không tranh với nút đào; chữ phụ là lý do để mời */
.moi-ban{box-sizing:border-box;min-width:0;display:flex;align-items:center;gap:.75rem;margin-top:12px;padding:.625rem .875rem;border-radius:.75rem;background:var(--sua,#F4F5FF);color:var(--muc,#15206B);text-decoration:none;transition:background-color .2s,transform .12s}
.moi-ban:hover{background:#E8EAFF}
.moi-ban:active{transform:scale(.985)}
.moi-ban:focus-visible{outline:2px solid var(--xanh,#1D33C8);outline-offset:2px}
.mb-ic{flex:none;color:var(--xanh,#1D33C8)}
.mb-chu{display:grid;min-width:0;flex:1;line-height:1.25}
.mb-chu b{font-weight:800;font-size:.9375rem}
.mb-chu small{font-size:.8125rem;font-weight:600;color:var(--phu,#4A5290);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-nhan{display:none}
.mb-mui{flex:none;color:var(--phu,#4A5290);transition:transform .2s}
.moi-ban:hover .mb-mui{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.moi-ban,.mb-mui{transition:none}.moi-ban:hover .mb-mui{transform:none}}

.bao{position:fixed;left:50%;bottom:24px;font-family:var(--body);transform:translate(-50%,16px);padding:10px 16px;background:var(--muc);color:var(--giay);font-size:.875rem;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);z-index:5}
.bao.hien{opacity:1;transform:translate(-50%,0)}

.an-nhan{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media (max-width:860px){
  .cua{display:block;height:auto;min-height:0;padding-bottom:6.5rem}
  .san{position:sticky;top:var(--tren,0px);height:58svh;z-index:2}
  #ten{font-size:1.75rem;max-width:none}
  .goc-xem{right:16px}
  .thu-phong{right:16px}
  .cua .thu-phong .nut{width:44px;min-height:44px;height:44px}
  .ray{width:44px;height:5rem}
  /* điện thoại đang phóng: khung nhỏ, ẩn chữ + ô tên (giữ chỗ, hình không nhảy), chỉ còn hàng ô khối để chạm tới từng khối */
  .phong .chu-san{background:none;box-shadow:none}
  .chu-san>*{transition:opacity .2s}
  .phong .chu-san>:not(.hang-khoi){opacity:0;pointer-events:none}
  .goc-xem .nut{padding:0 12px}
  .chi-keo{top:74px;left:16px;height:auto;width:7.5rem;padding:6px 10px;white-space:normal;line-height:1.3}
  .chi{max-width:none;font-size:.8125rem}
  .ban{border:0;overflow:visible}
  .ban h1{display:none}
  .ban section{padding:14px 16px}
  .chot{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:3}
  .chot p{margin:0;flex-direction:column;align-items:flex-start;flex:none}
  .chot strong{font-size:1.125rem}
  #soKhoi{font-size:.8125rem;color:var(--mo)}
  #them{flex:1}
  #xemGio{width:auto;flex:none;margin:0;padding-inline:.75rem}
  #them{white-space:nowrap;flex:1 1 0;min-width:0;padding-inline:8px}
  /* điện thoại: dải mời nằm TRÊN hàng giá + nút, một dòng, chữ phụ đứng cạnh tên */
  .chot{flex-wrap:wrap;row-gap:8px}
  .moi-ban{order:-1;flex:1 0 100%;margin:0;padding:.4375rem .75rem;gap:.5rem}
  .mb-chu b{font-size:.875rem;white-space:nowrap}
  .mb-chu small{display:none}
  .mb-nhan:not([hidden]){display:inline-block;flex:none;font-style:normal;font-size:.75rem;font-weight:800;color:var(--dao,#D61F6E);background:#fff;padding:.1875rem .5rem;border-radius:999px;white-space:nowrap}
  .moi-ban:has(.mb-nhan:not([hidden])) .mb-mui{display:none}   /* nhãn ưu đãi đã là điểm nhấn bên phải */
  .mb-ic{width:20px;height:20px}
  .cua{padding-bottom:9rem}
  @media (max-width:359px){ .chot{column-gap:8px} .gio-hang-chu{display:none} }   /* Fold gập: giá + Thêm + Giỏ vẫn một hàng */
  .bao{bottom:132px}
  .khoi{width:2.25rem;height:2.25rem}
  .bao{bottom:84px}
  .hinh{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hinh::-webkit-scrollbar{display:none}
  .hinh button{flex:none}
}
@media (prefers-reduced-motion:reduce){.bao,.chi-keo{transition:none}.hang-khoi.moi-vao .khoi{animation:none}}