/* HCL ONE — module CHƯƠNG TRÌNH CÁ NHÂN HOÁ (0.7). Chỉ lớp tiền tố .ct- ; chỉ dùng biến màu của giao_dien.css (trừ #fff). Điện thoại 390 px trước. */

/* ---- % to: mở mới = vàng (điểm nhấn thương hiệu), loading = chàm */
.ct-pt{flex:none;width:78px;min-height:78px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1;text-align:center;padding:6px 4px}
.ct-pt.mm{background:var(--vang);color:var(--cham-dam)}
.ct-pt.ld{background:var(--cham);color:#fff}
.ct-pt b{font:800 27px/1 var(--tieu-de);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-pt small{font:700 11px/1 var(--noi-dung);opacity:.9}
.ct-pt.ld small{color:var(--vang)}
.ct-pt span{font:700 10.5px/1.1 var(--noi-dung);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.ct-pt.nho{width:58px;min-height:58px;border-radius:14px}
.ct-pt.nho b{font-size:20px}

/* ---- thẻ gợi ý trên màn điểm bán */
.ct-the{padding:14px}
.ct-dau{display:flex;gap:12px;align-items:center}
.ct-tt{flex:1;min-width:0}
.ct-tt h3{margin:0;font:800 16.5px/1.25 var(--tieu-de);overflow-wrap:anywhere}
.ct-dk{margin:4px 0 2px;font-size:14px;line-height:1.4;color:var(--chu)}
.ct-dk b{font-weight:800}
.ct-tt .hc-phu{margin:2px 0 0;font-size:12.5px}
.ct-ma{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.ct-bac{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ct-bac>span{display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border-radius:99px;background:var(--chinh-nhat);color:var(--chu);font-size:12.5px;white-space:nowrap}
.ct-bac>span b{font:800 13.5px var(--tieu-de);color:var(--chinh)}
.ct-ly-do{margin:10px 0 0;padding:0 0 0 18px;font-size:13.5px;line-height:1.45;color:var(--chu-2)}
.ct-ly-do li{margin:2px 0}
.ct-ly-do li::marker{color:var(--vang-chu)}
.ct-chip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.ct-chip .hc-chip svg{flex:none}
.ct-nut{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ct-nut .dong-y{flex:1 1 230px;text-decoration:none}
.ct-nut .tu-choi{flex:1 1 130px}
.ct-da-len{margin:12px 0 0}
.ct-rong{display:flex;gap:12px;align-items:center}
.ct-rong p{margin:0;font-size:14px;color:var(--mo);line-height:1.45}
.ct-rong-icon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--nen-2);color:var(--mo)}
.ct-ghi{display:flex;gap:6px;align-items:flex-start;margin:-4px 2px 12px;font-size:13px}
.ct-ghi svg{flex:none;margin-top:2px;color:var(--xanh)}

/* ---- tấm trượt khách từ chối */
.ct-sheet-phu{margin:-4px 0 14px;font-size:13.5px}
.ct-ly-do-chon>button{flex:1 1 auto;min-height:48px}

/* ---- khối trên màn đặt hàng */
.ct-dh{padding:12px 14px;border-left:4px solid var(--vien)}
.ct-dh.bat{border-left-color:var(--vang);background:var(--vang-nhat)}
.ct-dh-dau{display:flex;gap:12px;align-items:center}
.ct-dh-ten{display:block;font:800 15px/1.3 var(--tieu-de);overflow-wrap:anywhere}
.ct-dh .ct-tt .hc-phu{display:block;margin-top:2px;font-size:12.5px;line-height:1.4}
.ct-ap{flex:none;min-height:48px;flex-direction:column;gap:2px;font-size:12px}
.ct-ap span{font-size:11.5px;color:var(--mo)}
.ct-dh-tinh:empty{display:none}
.ct-tinh-goi-y{margin:0;font-size:13px;line-height:1.45}
.ct-dh-tinh{margin-top:10px}
.ct-tinh-dong{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 11px;border-radius:var(--r-nho);font-size:14px;line-height:1.4;background:var(--the)}
.ct-tinh-dong svg{flex:none;margin-top:2px}
.ct-tinh-dong.xanh{background:var(--xanh-nhat)} .ct-tinh-dong.xanh svg{color:var(--xanh)}
.ct-tinh-dong.cam{background:var(--cam-nhat)} .ct-tinh-dong.cam svg{color:var(--cam)}
p.ct-tinh-dong.hc-phu{background:none;padding:0}
.ct-tinh-phu{margin:6px 2px 0;font-size:12.5px}
.ct-them{margin-top:8px;min-height:48px}
.ct-tong{margin-top:4px}

/* ---- báo cáo */
.ct-ky{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.ct-ky b{font:800 17px var(--tieu-de)}
.ct-ky .hc-nut{width:48px;min-height:48px;padding:0}
.ct-ky-trong{width:48px}
.ct-hero h2{font-variant-numeric:tabular-nums}
.ct-ns-hero{margin-top:12px}
.ct-ns-hero .hc-gian span{font-size:13px;color:#D9DCF0}
.ct-ns-hero .hc-gian b{color:#fff;font:800 15px var(--tieu-de)}
.ct-ns-hero p{font-size:12.5px}
.ct-hero-phu{margin-top:8px!important;font-size:13px!important}
.ct-so .hc-so b small{font-size:.6em}
.ct-chu-thich{font-size:12.5px;margin:-4px 2px 12px}
.ct-luoi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:4px}
.ct-luoi2 .hc-the{margin-bottom:8px}
.ct-loai .hc-gian b{font:800 15px var(--tieu-de)}
.ct-loai .hc-phu{margin:6px 0 0;font-size:12.5px;line-height:1.4}
.ct-doi .hc-thanh{display:block;margin:8px 0 0;max-width:420px}
.ct-mua-lai .hc-vong{--co:84px}
.ct-ml-dau{display:flex;gap:14px;align-items:center}
.ct-ml-dau p{margin:0 0 4px;font-size:14px;line-height:1.45}
.ct-ml-dau .hc-phu{font-size:12.5px}
.ct-ld-dong{margin:0 0 10px} .ct-ld-dong:last-child{margin:0}
.ct-ld-dong .hc-gian{font-size:14px}
.ct-ld-dong .hc-thanh{margin:5px 0 0;height:6px}
.ct-dau-pt{font:800 13px/1 var(--tieu-de);letter-spacing:-.02em;width:46px}
.ct-dau-pt>span{white-space:nowrap}
.ct-dau-pt small{font-size:9.5px;margin-left:1px}
.ct-dau-ld{background:var(--cham);color:#fff}
.ct-bc .hc-bang td a{color:var(--chinh);font-weight:700;text-decoration:none}
@media (max-width:420px){ .ct-luoi2{grid-template-columns:1fr} }
.ct-cot2>div:empty{display:none}
@media (min-width:900px){ .ct-cot2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start} }
@media (prefers-color-scheme: dark){ .ct-dh.bat{background:var(--vang-nhat)} .ct-ly-do{color:var(--chu)} }