/* HCL ONE — module BẢNG QUÀ THEO MỐC (0.8.1). Chỉ lớp tiền tố .bq- ; chỉ dùng biến màu của giao_dien.css (trừ #fff). Điện thoại 390 px trước. */

/* ---- khối "270 + quà" trên màn đặt hàng */
.bq-khoi{padding:12px 14px 10px;border-left:4px solid var(--vang)}
.bq-dau{display:flex;align-items:center;gap:10px}
.bq-gia{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:66px;height:62px;padding:0 8px;border-radius:16px;background:var(--cham);color:#fff;line-height:1}
.bq-gia b{font:800 26px/1 var(--tieu-de);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bq-gia span{font:700 11px/1 var(--noi-dung);color:var(--vang);margin-top:4px;white-space:nowrap}
.bq-dau-giua{flex:1;min-width:0}
.bq-ky{font:800 14.5px/1.3 var(--tieu-de);color:var(--chu);overflow-wrap:anywhere}
.bq-loai{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.bq-nut-cau{flex:none;gap:5px;padding:0 12px;min-height:44px}
.bq-nut-cau span{white-space:nowrap}
.bq-trong{margin:10px 0 6px;font-size:14px;line-height:1.45;color:var(--mo)}
.bq-bang-nho{width:100%;border-collapse:collapse;font-size:13.5px;margin:2px 0 4px}
.bq-bang-nho th{text-align:left;font:700 11.5px/1.45 var(--noi-dung);letter-spacing:.05em;text-transform:uppercase;color:var(--mo);padding:6px 6px 6px 0;border-bottom:1px solid var(--vien-2)}
.bq-bang-nho td{padding:7px 6px 7px 0;border-bottom:1px dashed var(--vien-2);vertical-align:top}
.bq-bang-nho tr:last-child td{border-bottom:0}
.bq-bang-nho .bq-kho{color:var(--mo);white-space:nowrap;text-align:right;padding-right:0}
.bq-bang-nho th.bq-kho{display:inline-flex;align-items:center;gap:4px;width:100%;justify-content:flex-end}
.bq-dong-to{margin:12px 0 0;font:800 16px/1.35 var(--tieu-de);color:var(--chu);overflow-wrap:anywhere}
.bq-dong-to i{font-style:normal;color:var(--vien);font-weight:400;padding:0 2px}
.bq-chip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.bq-chip .hc-chip{height:auto;min-height:26px;padding:3px 10px;white-space:normal;line-height:1.3}
.bq-ru{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 12px;border-radius:12px;border:1.5px solid var(--cam);background:var(--cam-nhat);color:var(--cam-dam);font:600 13.5px/1.35 var(--noi-dung);text-align:left;cursor:pointer;max-width:100%}
.bq-ru svg{flex:none;color:var(--cam)}
.bq-ru b{font-weight:800}
.bq-noi-bo{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--mo)}
.bq-noi-bo svg{flex:none;margin-top:2px;color:var(--mo)}
.bq-noi-bo b{color:var(--chu);font-variant-numeric:tabular-nums}
.bq-chot{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;padding:8px 10px;border-radius:10px;background:var(--nen-2);font-size:14px;line-height:1.4;color:var(--chu);font-style:italic}
.bq-chot svg{flex:none;margin-top:2px;color:var(--chinh)}
.bq-vuot{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--do-nhat);color:var(--do);font-size:13.5px;line-height:1.4}
.bq-vuot svg{flex:none;margin-top:1px}
.bq-ghi{margin:8px 0 0;font-size:12.5px}

/* ---- khối "Nói giá thế nào" ở màn điểm bán + câu trong tấm kịch bản */
.bq-the-diem{padding:12px 14px}
.bq-diem-dau{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.bq-cau{margin:10px 0 0}
.bq-cau b{display:block;padding-top:1px;font:700 11.5px/1.45 var(--tieu-de);letter-spacing:.06em;text-transform:uppercase;color:var(--chinh)}
.bq-cau b small{font:600 11px var(--noi-dung);letter-spacing:0;text-transform:none;color:var(--mo)}
.bq-cau p{margin:3px 0 0;font-size:15px;line-height:1.45;color:var(--chu)}
.bq-cau.khong b{color:var(--do)} .bq-cau.khong p{color:var(--do)}
.bq-cau.luu-y p{font-size:13.5px;color:var(--mo)}
.bq-the-diem .hc-nut{margin-top:12px}
.bq-kb-ten{margin:12px 0 0;font:800 16px/1.3 var(--tieu-de);color:var(--chu)}
.bq-tab{margin:4px 0 2px;flex-wrap:wrap;overflow:visible}
.bq-tab>button{flex:1 1 30%;white-space:normal;line-height:1.2;padding:6px 8px;min-height:40px}
.bq-mo-rong{margin:16px 0 0}
.bq-hoi{margin:12px 0 0}
.bq-hoi b{display:block;font:700 14px/1.4 var(--noi-dung);color:var(--chu)}
.bq-hoi b small{font-weight:600;color:var(--mo)}
.bq-hoi p{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:var(--chu)}
.bq-luu-y{margin:8px 0 0;font-size:13px;color:var(--cam-dam)}
.bq-so-cu{margin-top:10px}
.bq-so-cu td{font-size:13px;line-height:1.4;vertical-align:top}
.bq-sheet .hc-nhom-nut{margin-top:16px}

/* ---- báo cáo #/bang-qua/bao-cao */
.bq-ky-nav{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.bq-ky-nav b{font:800 17px var(--tieu-de);flex:1;text-align:center}
.bq-ky-nav .hc-nut.nho{min-width:44px;padding:0 10px}
.bq-ky-trong{width:44px}
.bq-nut-kb{gap:6px;white-space:nowrap}
.bq-tt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.bq-tt a.hc-chip{text-decoration:none}
.bq-chu-thich{margin:4px 2px 10px;font-size:13px;line-height:1.45}
.bq-bang-ky tr.bq-hang-chot td{font-weight:600}
.bq-bang-ky th{white-space:normal;line-height:1.35}
.bq-bang-ky td,.bq-bc .hc-bang td:first-child{white-space:nowrap}   /* bảng rộng hơn màn thì cuộn ngang trong khung, không bẻ "15 thùng" thành 2 dòng */
.bq-bc .hc-bang td:first-child .hc-phu{white-space:normal}
.bq-bang-ky td .hc-chip{margin-left:4px;height:20px;font-size:11px;padding:0 7px}
.bq-rong{margin:8px 0 16px}
.bq-hero .hc-so-luoi{margin-top:12px}
.bq-bc .hc-mo-rong-than h4{margin:14px 0 8px;font:800 14px var(--tieu-de);color:var(--chu);text-transform:none;letter-spacing:0}

@media (min-width:600px){
  .bq-ky-nav b{text-align:left}
}