:root {
  --nen: #f5f5f3;
  --the: #fcfcfb;
  --chu: #1f1f1d;
  --chu-phu: #5c5c58;
  --vien: #e3e2de;
  --nhan: #d9480f;
  --tot: #1e7b3c;
  --xau: #b42318;
  --luoi: #ecebe7;
  --shopee: #d9480f;
  --tiktok: #0e7c86;
  --nguon-video: #4c6ef5;
  --nguon-the: #e0a526;
  --nguon-khac: #a8a69f;
  --duong-shop: #d9480f;
  --duong-koc: #c2255c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #141413;
    --the: #1d1d1b;
    --chu: #f0efeb;
    --chu-phu: #a6a59f;
    --vien: #34342f;
    --nhan: #e8683a;
    --tot: #5cc27f;
    --xau: #f07a6e;
    --luoi: #2a2a26;
    --shopee: #e8683a;
    --tiktok: #3fb8c2;
    --nguon-video: #748ffc;
    --nguon-the: #f2c14e;
    --nguon-khac: #77756e;
    --duong-shop: #ff8a4c;
    --duong-koc: #f06595;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
}
header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--the); border-bottom: 1px solid var(--vien);
}
header h1 { font-size: 18px; margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
button, input {
  font: inherit; color: inherit; background: var(--the);
  border: 1px solid var(--vien); border-radius: 8px; padding: 6px 12px;
}
button { cursor: pointer; }
button:hover { border-color: var(--chu-phu); }
button.chon { background: var(--nhan); border-color: var(--nhan); color: #fff; }
.phu { color: var(--chu-phu); font-size: 13px; }
.loi { color: var(--xau); }
.tot { color: var(--tot); }

.bo-loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
/* Bộ chọn khung thời gian */
.chon-ngay { position: relative; max-width: 100%; }
.o-ngay { display: flex; align-items: center; gap: 10px; max-width: 100%; text-align: left; }
.o-ngay .phu { padding-right: 10px; border-right: 1px solid var(--vien); white-space: nowrap; }
.o-ngay .nhan-ky { font-variant-numeric: tabular-nums; }
.o-ngay svg { color: var(--chu-phu); flex: none; }
.o-ngay[aria-expanded="true"] { border-color: var(--nhan); }
.bang-ngay {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  display: flex; background: var(--the); border: 1px solid var(--vien); border-radius: 10px;
  box-shadow: 0 8px 28px rgb(0 0 0 / .14);
}
.bang-ngay[hidden] { display: none; }
.menu-ngay { list-style: none; margin: 0; padding: 8px 0; width: 150px; border-right: 1px solid var(--vien); }
.menu-ngay button {
  display: flex; justify-content: space-between; width: 100%;
  border: 0; border-radius: 0; background: none; padding: 10px 16px;
}
.menu-ngay button span { color: var(--chu-phu); }
.menu-ngay button:hover { background: var(--nen); }
.menu-ngay button.dang-chon { color: var(--nhan); background: var(--nen); }
.lich { padding: 12px 14px; width: 300px; }
.dau-lich { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dau-lich button { border: 0; background: none; padding: 4px 8px; color: var(--chu-phu); font-size: 17px; }
.dau-lich button:hover { color: var(--nhan); }
.luoi-lich { display: grid; gap: 2px 0; }
.luoi-ngay { grid-template-columns: repeat(7, 1fr); }
.luoi-to { grid-template-columns: repeat(3, 1fr); gap: 8px 0; }
.luoi-lich .thu { text-align: center; font-size: 13px; color: var(--chu-phu); padding: 6px 0; }
.luoi-lich .o {
  border: 0; border-radius: 0; background: none; padding: 0; height: 36px;
  font-variant-numeric: tabular-nums;
}
.luoi-lich .o-to { height: 44px; border-radius: 6px; }
.luoi-lich .o:disabled { color: var(--vien); cursor: default; }
.luoi-lich .o.ngoai:not(:disabled) { color: var(--chu-phu); opacity: .6; }
.luoi-lich .o.hom-nay { color: var(--nhan); font-weight: 600; }
.luoi-lich .o.trong { background: color-mix(in srgb, var(--nhan) 14%, transparent); }
.luoi-lich .o.dau { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.luoi-lich .o.cuoi { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.luoi-lich .o.dau, .luoi-lich .o.cuoi { background: var(--nhan); color: #fff; opacity: 1; }
.luoi-lich .o:not(:disabled):not(.dau):not(.cuoi):hover { outline: 1px solid var(--nhan); outline-offset: -1px; border-radius: 6px; }
.goi-y { margin-top: 8px; min-height: 20px; }
@media (max-width: 600px) {
  .chon-ngay, .o-ngay { width: 100%; }
  .o-ngay { flex-wrap: wrap; row-gap: 2px; }
  .o-ngay .phu { width: 100%; border-right: 0; padding-right: 0; }
  .o-ngay .nhan-ky { flex: 1; }
  .bang-ngay {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px;
    flex-direction: column; max-height: calc(100vh - 16px); overflow: auto;
  }
  .menu-ngay { width: auto; display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--vien); padding: 6px; gap: 4px; }
  .menu-ngay li { flex: 1 1 30%; }
  .menu-ngay button { justify-content: center; border-radius: 6px; padding: 8px; }
  .menu-ngay button span { display: none; }
  .lich { width: auto; }
  .luoi-lich .o { height: 42px; }
}

.o-so { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 14px; }
.the .ten { font-size: 13px; color: var(--chu-phu); }
.the .gia-tri { font-size: 24px; font-weight: 650; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tang { color: var(--tot); }
.giam { color: var(--xau); }

.bieu-do { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .bieu-do { grid-template-columns: 1fr; } }
.bieu-do .the h2, .bang h2 { font-size: 15px; margin: 0 0 8px; }
.khung-ve { position: relative; height: 260px; }

.bang { margin-top: 12px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--vien); }
th { font-size: 13px; color: var(--chu-phu); font-weight: 600; }
td.so, th.so { text-align: right; }

.dang-nhap { max-width: 340px; margin: 12vh auto; }
.dang-nhap form { display: grid; gap: 10px; }
.dang-nhap input, .dang-nhap button { width: 100%; padding: 10px; }

/* Chọn sàn: Tổng 2 sàn / Shopee / TikTok */
.chon-san { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; }
.chon-san button { border: 0; border-radius: 0; padding: 8px 16px; font-weight: 550; }
.chon-san button + button { border-left: 1px solid var(--vien); }
@media (max-width: 600px) { .chon-san { display: flex; } .chon-san button { flex: 1; padding: 10px 6px; } }

/* Tỉ trọng mỗi sàn + nguồn đơn TikTok */
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.hai-cot .bang { margin-top: 0; }
.hai-cot .the h2 { font-size: 15px; margin: 0 0 8px; }
.hai-cot .the h2.tieu-de-phu { margin-top: 18px; }
@media (max-width: 760px) { .hai-cot { grid-template-columns: 1fr; } }
body:not([data-san="tong"]) #khung-ti-trong, body[data-san="shopee"] #khung-nguon,
body[data-san="shopee"] #ghi-chu-tiktok, body:not([data-san="tong"]) .cot-san { display: none; }
body[data-san="tiktok"] .hai-cot, body[data-san="shopee"] .hai-cot { grid-template-columns: 1fr; }
body[data-san="shopee"] .hai-cot { display: none; }
.ti-trong { margin-bottom: 14px; }
.ti-trong .thanh { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--luoi); margin: 6px 0; }
.ti-trong .chu { display: flex; flex-wrap: wrap; gap: 4px 18px; font-variant-numeric: tabular-nums; }
.cham { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
td.cot-san { white-space: nowrap; }
.logo-san { display: inline-flex; vertical-align: middle; }
.logo-san svg { display: block; }
@media (max-width: 600px) { td.cot-san .ten-san { display: none; } td.cot-san .cham { margin-right: 0; } }
/* Ảnh nhỏ sản phẩm trong bảng bán chạy */
.o-sp { display: flex; align-items: center; gap: 10px; }
.anh-sp { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--luoi); border: 1px solid var(--vien); }
@media (max-width: 600px) { .o-sp { flex-direction: column; align-items: flex-start; gap: 4px; } .anh-sp { width: 40px; height: 40px; } }
/* TikTok: hoa hồng, live, video */
body[data-san="shopee"] .chi-tiktok { display: none; }
body[data-san] .hai-cot.chi-tiktok { display: grid; grid-template-columns: 1fr 1fr; }
body[data-san="shopee"] .hai-cot.chi-tiktok { display: none; }
@media (max-width: 760px) { body[data-san] .hai-cot.chi-tiktok { grid-template-columns: 1fr; } }
section.chi-tiktok.the { margin-top: 12px; }
.o-so-nho { margin: 8px 0 12px; }
.o-so-nho .the { padding: 10px 12px; }
.o-so-nho .gia-tri { font-size: 20px; }
.cuon { max-height: 440px; overflow: auto; }
.cuon thead th { position: sticky; top: 0; background: var(--the); }
.ten-dai { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .o-so-nho { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .o-so-nho .the { padding: 8px; }
  .o-so-nho .ten, .o-so-nho .phu { font-size: 11px; }
  .o-so-nho .gia-tri { font-size: 15px; }
}
/* Bảng video KOC + xem video */
.bo-loc input[type="search"] { flex: 1 1 220px; min-width: 0; }
.cuon-ngang { overflow-x: auto; }
.bang-koc { min-width: 1100px; }
.bang-koc th.sap { cursor: pointer; white-space: nowrap; user-select: none; }
.bang-koc th.sap:hover, .bang-koc th.dang-sap { color: var(--nhan); }
.o-video { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.bia-video { position: relative; flex: none; width: 48px; height: 64px; padding: 0; overflow: hidden; border-radius: 6px; background: var(--luoi); }
.bia-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nut-phat { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.bia-video:not(:has(img)) .nut-phat { color: var(--chu-phu); text-shadow: none; }
.ds-anh-sp { display: flex; align-items: center; gap: 4px; }
.ds-anh-sp .anh-sp { width: 36px; height: 36px; }
.phan-trang { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.xem-video { padding: 12px; border: 1px solid var(--vien); border-radius: 12px; background: var(--the); color: var(--chu); width: min(360px, calc(100vw - 32px)); }
.xem-video::backdrop { background: rgb(0 0 0 / .55); }
.dau-xem-video { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dau-xem-video b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dau-xem-video button { flex: none; padding: 2px 10px; }
.khung-video { aspect-ratio: 9 / 16; max-height: 70vh; margin: 0 auto 8px; background: #000; border-radius: 8px; overflow: hidden; }
.khung-video iframe { width: 100%; height: 100%; border: 0; }
.xem-video a { color: var(--nhan); }
select { font: inherit; color: inherit; background: var(--the); border: 1px solid var(--vien); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
/* Thanh chuyển trang (theo quyền) */
.dieu-huong { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-right: auto; margin-left: 16px; }
.dieu-huong a { padding: 6px 12px; border-radius: 8px; color: var(--chu); text-decoration: none; }
.dieu-huong a:hover { background: var(--nen); }
.dieu-huong a.chon { background: var(--nhan); color: #fff; }
.dieu-huong .ten-toi { margin-left: 8px; }
@media (max-width: 600px) { header { flex-wrap: wrap; } .dieu-huong { order: 3; width: 100%; margin: 0; } }

/* Booking KOC */
.bang-booking { min-width: 1080px; }
.bang-booking th.sap { cursor: pointer; white-space: nowrap; user-select: none; }
.bang-booking th.sap:hover, .bang-booking th.dang-sap { color: var(--nhan); }
.bang-booking tr.mo td { opacity: .55; }
.o-koc { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.o-koc a { color: var(--nhan); font-weight: 550; text-decoration: none; }
.anh-koc { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--luoi); display: inline-block; }
.nhan { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; margin: 2px 4px 0 0; border: 1px solid; }
.nhan-cast { color: var(--tot); border-color: var(--tot); }
.nhan-den { color: var(--xau); border-color: var(--xau); }
.nut-nho { padding: 2px 8px; font-size: 13px; }
.nut-sua { margin-left: auto; }
.so-tim { color: #7c3aed; }
.so-xanh { color: #0e7c86; }
.so-do { color: var(--xau); font-weight: 600; }
.phu-cam { color: #c2410c; font-size: 12px; }
@media (prefers-color-scheme: dark) { .so-tim { color: #a78bfa; } .so-xanh { color: #3fb8c2; } .phu-cam { color: #fb923c; } }
tr.bam-duoc { cursor: pointer; }
tr.bam-duoc:hover td { background: var(--nen); }
.hop { padding: 14px; border: 1px solid var(--vien); border-radius: 12px; background: var(--the); color: var(--chu); width: min(420px, calc(100vw - 32px)); }
.hop-rong { width: min(860px, calc(100vw - 32px)); }
.hop::backdrop { background: rgb(0 0 0 / .5); }
.dau-hop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.dau-hop button { padding: 2px 10px; }
.dong-hop { display: grid; gap: 4px; margin-bottom: 10px; }
.dong-chon { display: flex; align-items: center; gap: 8px; }
.tieu-de-hop { font-size: 14px; margin: 14px 0 6px; }
.cuon-thap { max-height: 220px; }

/* Quản trị */
.bang-quan-tri { min-width: 860px; }
.bang-quan-tri input:not([type="checkbox"]) { width: 100%; min-width: 120px; }
.bang-quan-tri td.giua { text-align: center; }
.bang-quan-tri .nut-dong { white-space: nowrap; }
.bang-quan-tri .nut-dong button + button { margin-left: 6px; }
.bang-quan-tri tr.dong-moi td { background: var(--nen); }
.trang-rong main { max-width: 1320px; }
.bang-quan-tri tr.da-khoa td { opacity: .6; }
.bang-quan-tri tr.da-khoa td.nut-dong { opacity: 1; }
/* Booking: tag to, khung nhân sự, dòng chi tiết KOC */
.nhan-to { font-size: 13px; font-weight: 600; padding: 3px 10px; }
.nhan-to.nhan-cast { background: color-mix(in srgb, var(--tot) 12%, transparent); }
.nhan-to.nhan-den { background: color-mix(in srgb, var(--xau) 10%, transparent); white-space: nowrap; }
.khung-ns { display: inline-block; padding: 4px 12px; border: 1.5px solid var(--nhan); border-radius: 999px; font-weight: 650;
  color: var(--nhan); background: color-mix(in srgb, var(--nhan) 8%, transparent); box-shadow: 0 1px 4px rgb(0 0 0 / .08); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.so-nmv { color: var(--tot); }
.nut-mo { border: 0; background: none; padding: 2px 6px; color: var(--chu-phu); font-size: 14px; }
.nut-mo:hover { color: var(--nhan); }
tr.dong-chi-tiet > td { background: var(--nen); padding: 12px 14px; }
.tab-ct { display: inline-flex; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.tab-ct button { border: 0; border-radius: 0; padding: 5px 12px; font-size: 13px; }
.luoi-sp { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.the-sp, .the-video { display: flex; gap: 10px; align-items: center; background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 8px; }
.ds-video-koc { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.noi-video { min-width: 0; display: grid; gap: 4px; }
.bang-booking { min-width: 1240px; }
/* Booking: danh sách trong dòng ▸ */
.bang-ct { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; }
.bang-ct th, .bang-ct td { padding: 6px 10px; vertical-align: middle; }
.bang-ct .o-sp { min-width: 260px; }
.bang-ct .o-video { min-width: 280px; }
.tt { font-size: 12px; white-space: nowrap; }
.bang-ct { width: auto; min-width: 680px; }
.bang-ct td.so, .bang-ct th.so { padding-left: 22px; }
.bang-quan-tri input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* Số khách cần trả lời trên menu (mọi trang) */
.so-chat { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--xau); color: #fff; font-size: 11px; font-weight: 600; }
.so-chat[hidden] { display: none; }

/* Quản trị: hộp giới hạn voucher */
.hop-vc { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--vien); border-radius: 12px; background: var(--the); color: var(--chu); }
.hop-vc::backdrop { background: rgb(0 0 0 / .35); }
.luoi-vc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 8px 0 12px; }
.luoi-vc label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.hop-vc textarea { font: inherit; color: inherit; background: var(--the); border: 1px solid var(--vien); border-radius: 8px; padding: 6px 8px; }
/* TikTok: biểu đồ GMV theo nguồn + số video đăng (chỉ khi chọn TikTok) */
#khung-gmv-video { margin-top: 12px; }
body:not([data-san="tiktok"]) #khung-gmv-video { display: none; }
#khung-gmv-video h2 { font-size: 15px; margin: 0; }
#khung-gmv-video .khung-ve { height: 300px; }
.tieu-de-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.tieu-de-nut h2 { flex: 1 1 100%; }
.chon-loai-video { display: inline-flex; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; }
.chon-loai-video button { border: 0; border-radius: 0; padding: 5px 12px; font-size: 13px; }
.chon-loai-video button + button { border-left: 1px solid var(--vien); }
#ghi-chu-gmv-video { margin-top: 6px; font-size: 13px; }

/* Trang PnL */
.bang-pnl { min-width: 640px; }
.bang-pnl td:first-child { min-width: 220px; }
.bang-pnl td:first-child, .bang-pnl thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--the); }
.bang-pnl td.so { white-space: nowrap; }
.bang-pnl tr.dam td { font-weight: 700; border-top: 2px solid var(--vien); }
.bang-pnl tr.dam td:first-child { color: var(--nhan); }
.bang-pnl tr.con td:first-child { padding-left: 26px; }
.bang-pnl .dau-nhom { border-left: 2px solid var(--vien); }
.bang-pnl .nhom-shopee { background: color-mix(in srgb, var(--shopee) 9%, transparent); }
.bang-pnl .nhom-tiktok { background: color-mix(in srgb, var(--tiktok) 11%, transparent); }
.bang-pnl .nhom-tong { background: color-mix(in srgb, var(--chu-phu) 7%, transparent); }
.bang-pnl th.nhom-shopee[colspan] { background: color-mix(in srgb, var(--shopee) 22%, transparent); color: inherit; }
.bang-pnl th.nhom-tiktok[colspan] { background: color-mix(in srgb, var(--tiktok) 26%, transparent); color: inherit; }
.bang-pnl th.nhom-tong[colspan] { background: color-mix(in srgb, var(--chu-phu) 16%, transparent); color: inherit; }
@media (max-width: 600px) {
  .bang-pnl td:first-child { min-width: 150px; max-width: 150px; font-size: 13px; }
  .bang-pnl tr.con td:first-child { padding-left: 16px; }
}
.bang-pnl tr.con { display: none; }
.bang-pnl.mo tr.con { display: table-row; }
.bang-pnl tr.mo-con { cursor: pointer; }
.bang-pnl tr.mo-con:hover td:first-child { text-decoration: underline; }
.bang-pnl .mui-ten { display: inline-block; width: 14px; transition: transform .15s; }
.bang-pnl.mo .mui-ten { transform: rotate(90deg); }
.bang-pnl .doi { font-size: 12px; font-weight: 400; }
.bang-pnl .i { position: relative; cursor: help; color: var(--chu-phu); font-weight: 400; font-size: 13px; outline: none; }
.bang-pnl .i:hover::after, .bang-pnl .i:focus::after {
  content: attr(data-gt); position: absolute; left: 0; top: 1.5em; z-index: 5; width: 260px; padding: 8px 10px;
  background: var(--chu); color: var(--the); font-size: 12px; line-height: 1.4; border-radius: 6px; white-space: normal; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.bang-pnl td:first-child:hover, .bang-pnl td:first-child:focus-within { z-index: 6; }

/* Trang Quảng cáo & Traffic */
body[data-san="shopee"] .phan-tiktok, body[data-san="tiktok"] .phan-shopee { display: none; }
.tieu-de-san { font-size: 18px; margin: 22px 0 4px; }
.bieu-do-mot { margin-top: 12px; }
.bieu-do-mot h2 { font-size: 15px; margin: 0 0 8px; }
.o-so .i { position: relative; cursor: help; color: var(--chu-phu); font-size: 13px; outline: none; }
.o-so .i:hover::after, .o-so .i:focus::after {
  content: attr(data-gt); position: absolute; left: -40px; top: 1.5em; z-index: 5; width: 220px; padding: 8px 10px;
  background: var(--chu); color: var(--the); font-size: 12px; line-height: 1.4; border-radius: 6px; white-space: normal; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.o-so .the:hover, .o-so .the:focus-within { position: relative; z-index: 6; }
.o-so-qc { margin-top: 4px; }
.o-so-qc a { color: inherit; text-decoration: none; }

/* Ảnh sản phẩm mẫu (Quản trị) */
.anh-msp { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: block; background: var(--luoi); }
.anh-msp.trong { border: 1px dashed var(--vien); background: none; }

/* Quản trị – Nhanh.vn */
.luoi-nhanh { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.luoi-nhanh label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--chu-phu); }
.luoi-nhanh fieldset { border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.luoi-nhanh legend { font-weight: 600; color: var(--chu); padding: 0 4px; }