/* ─── 20/10/2026 · BAO CAO KHACH 6 MUC — mau "AI Google Marketing Report" ────────────────────────
 * Thanh ben xanh (--brand-primary) + logo Tiếp Thị Tử Tế · noi dung nen kem · the trang bo goc ·
 * bang dau xanh · thanh tien do. Giu header/footer web chinh o tren/duoi (owner 20/10).
 * LUAT 4T: >=850 hai cot (ben 280px) · <=849 ben thanh thanh tren cung, muc cuon ngang.
 * ⛔ Mau lay tu token (00-tokens); chi them nen kem rieng cua bao cao.
 */
.bck-body { background: var(--surface-page); }
.bck {
  --bck-nen: #F4F5F0;
  --bck-vien: #DCE3DA;
  --bck-sang: #EEF3EE;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bck-nen);
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* ── THANH BEN ───────────────────────────────────────────────────────── */
.bck-ben { background: var(--brand-primary); color: var(--text-on-brand); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bck-logo { display: inline-flex; align-self: flex-start; }
.bck-logo img { display: block; width: 148px; height: auto; }
.bck-ten-bao-cao { margin: 0; font: 600 13px/18px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
/* ⭐ 29/10/2026 (Tuyen): ten doanh nghiep dang dang nhap phai NOI khac chu con lai.
 *   Camel #CF9156 tren #155446 = 3,28:1 ⇒ CHI dat voi chu LON (>= 18,66px dam) ⇒ giu 19px/800 o MOI kho. */
.bck-ten-khach { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bck-ten-khach-nhan { margin: 0; font: 600 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.bck-ten-khach strong { font: 800 19px/26px var(--font-body); color: var(--brand-accent); overflow-wrap: anywhere; }
.bck-muc { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.bck-muc::-webkit-scrollbar { display: none; }
.bck-muc a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px; border-radius: 12px; white-space: nowrap;
  color: #fff; text-decoration: none; font: 600 15px/20px var(--font-body); }
.bck-muc a:hover { background: rgba(255, 255, 255, .1); }
.bck-muc a[aria-current="page"] { background: var(--brand-secondary); }
.bck-muc a:focus-visible, .bck-dang-xuat:focus-visible, .bck-logo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bck-so { font-variant-numeric: tabular-nums; }
.bck-chan-ben { display: none; }
.bck-chan-ben p { margin: 0; font: 500 13px/20px var(--font-body); color: rgba(255, 255, 255, .9); }
.bck-giai-doan { font-weight: 700 !important; letter-spacing: .04em; }
.bck-dang-xuat { margin-top: var(--space-3); min-height: 40px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 10px;
  background: transparent; color: #fff; font: 600 14px/20px var(--font-body); cursor: pointer; align-self: flex-start; }
.bck-dang-xuat:hover { background: rgba(255, 255, 255, .12); }

@media (min-width: 850px) {
  .bck { grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
  .bck-ben { padding: var(--space-8) var(--space-6); gap: var(--space-4); }
  .bck-ben > * { position: relative; }
  .bck-ten-bao-cao { font-size: 18px; line-height: 26px; letter-spacing: .01em; }
  .bck-nav { margin-top: var(--space-8); }
  .bck-muc { flex-direction: column; overflow: visible; gap: var(--space-4); }
  .bck-muc a { white-space: normal; padding: 14px 18px; border-radius: 14px; }
  .bck-chan-ben { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-10); }
  .bck-logo img { width: 180px; }
}

/* ── NOI DUNG ────────────────────────────────────────────────────────── */
.bck-than { min-width: 0; padding: var(--space-5) var(--space-4) var(--space-10); display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 850px) { .bck-than { padding: var(--space-10) 48px var(--space-15); gap: var(--space-6); } }
.bck-than > * { margin-top: 0; margin-bottom: 0; }

.bck-dau, .bck-than .dau-trang { padding-bottom: var(--space-5); border-bottom: 1px solid var(--bck-vien); }
.bck-dau h1, .bck-than .dau-trang h1 { margin: 0; color: var(--brand-primary); font: 500 30px/38px var(--font-body); letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 850px) { .bck-dau h1, .bck-than .dau-trang h1 { font-size: 36px; line-height: 44px; } }
.bck-dau-so { font-variant-numeric: tabular-nums; }
.bck-dau-phu, .bck-than .dau-trang .dan-de { margin: var(--space-3) 0 0; color: var(--text-muted); font: 500 15px/22px var(--font-body); }

.bck-the { background: var(--surface-raised); border: 1px solid var(--bck-vien); border-radius: 14px; }
.bck-the-chu { padding: var(--space-5); }
@media (min-width: 850px) { .bck-the-chu { padding: var(--space-6); } }
.bck-the-chu > h2, .bck-td-phan { margin: 0 0 var(--space-4); color: var(--brand-primary); font: 500 20px/28px var(--font-body); }
.bck-the-chu > p { margin: 0 0 var(--space-2); color: var(--text-secondary); line-height: 24px; }
.bck-the-chu > p:last-child { margin-bottom: 0; }
.bck-td-phan { margin: var(--space-2) 0 0; }
.bck-nho { color: var(--text-muted); font-size: 13px; line-height: 20px; }
.bck-rong { color: var(--text-muted); font-style: italic; }
.bck-lon { font-size: 18px !important; line-height: 28px !important; color: var(--text-primary) !important; }
.bck-an { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bck-hang-giua { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.bck-hang-giua h2 { margin: 0; color: var(--brand-primary); font: 500 20px/28px var(--font-body); }
.bck-ghi-chu-4t { padding: var(--space-3); border-radius: 10px; background: var(--bck-sang); }

/* ── LUOI ── */
.bck-luoi-kpi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 560px) { .bck-luoi-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .bck-luoi-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
.bck-luoi-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); border: 0; margin: 0; padding: 0; min-width: 0; }
@media (min-width: 1000px) { .bck-luoi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.bck-luoi-hep { gap: var(--space-3) var(--space-4) !important; }
@media (min-width: 600px) { .bck-luoi-hep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bck-luoi-cuoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 1000px) { .bck-luoi-cuoi { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); } }

/* ── KPI ── */
.bck-kpi { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); min-height: 150px; }
.bck-kpi-nhan { margin: 0; color: var(--brand-primary); font: 500 17px/24px var(--font-body); }
.bck-kpi-so { margin: var(--space-2) 0 0; color: var(--brand-primary); font: 500 32px/40px var(--font-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bck-kpi-phu { margin: auto 0 0; color: var(--text-muted); font: 500 13px/20px var(--font-body); }
.bck-kpi-lien-ket { text-decoration: none; transition: border-color .15s ease; }
.bck-kpi-lien-ket:hover { border-color: var(--brand-secondary); }
.bck-kpi-lien-ket:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }

/* ── BIA (muc 01) ── */
.bck-bia { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) 0; }
.bck-bia-td { margin: 0; color: var(--brand-primary); font: 600 34px/42px var(--font-body); text-transform: uppercase; letter-spacing: -.01em; }
/* ⭐ 24/10/2026 (the 4): bia dong THANG le trai voi tieu de "Tiếp Thị Tử Tế" ⇒ ⛔ dem le ngang (truoc: var(--space-8)). */
@media (min-width: 850px) { .bck-bia-td { font-size: 52px; line-height: 64px; } .bck-bia { padding: var(--space-10) 0 var(--space-4); } }
.bck-bia-de { margin: 0; color: var(--brand-primary); font: 500 20px/32px var(--font-body); }
@media (min-width: 850px) { .bck-bia-de { font-size: 26px; line-height: 40px; } }
.bck-bia-chuoi { color: var(--brand-primary) !important; font-size: 18px !important; }
.bck-bia p:last-child { margin: 0; }

/* ── NUT ── */
.bck-nut { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 12px;
  background: var(--brand-primary); color: #fff; font: 600 15px/22px var(--font-body); text-decoration: none; cursor: pointer; }
.bck-nut:hover { background: #0F4236; }
.bck-nut:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.bck-nut-phu { background: transparent; color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.bck-nut-phu:hover { background: var(--bck-sang); }
.bck-nut-nho { min-height: 40px; padding: 8px 14px; }
.bck-cot-nut { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1000px) { .bck-cot-nut .bck-nut { width: 100%; } .bck-luoi-cuoi > .bck-cot-nut { padding-top: var(--space-6); } }

/* ── BANG ── */
.bck-bang-vo { overflow-x: auto; border-radius: 12px; border: 1px solid var(--bck-vien); background: var(--surface-raised); }
.bck-bang { width: 100%; border-collapse: collapse; font: 500 14px/22px var(--font-body); }
.bck-bang thead th { background: var(--brand-primary); color: #fff; font-weight: 600; text-align: left; padding: 14px 16px; white-space: nowrap; }
.bck-bang tbody th, .bck-bang tbody td { padding: 14px 16px; text-align: left; font-weight: 500; color: var(--brand-primary); border-top: 1px solid var(--bck-sang); vertical-align: top; }
.bck-bang tbody tr:nth-child(even) { background: var(--bck-sang); }
.bck-bang .so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bck-bang a { color: var(--brand-primary); }
.bck-bang .bck-dong-chon { box-shadow: inset 4px 0 0 var(--brand-secondary); }
.bck-duong { overflow-wrap: anywhere; font-size: 13px; }

/* ── TIEN DO ── */
.bck-tien-do { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bck-tien-do > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
@media (min-width: 700px) { .bck-tien-do > div { grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: var(--space-4); } }
.bck-tien-do dt { color: var(--brand-primary); font: 500 15px/22px var(--font-body); }
.bck-tien-do dd { margin: 0; display: flex; align-items: center; gap: var(--space-4); }
.bck-thanh { flex: 1; height: 12px; border-radius: 999px; background: #E3EAE3; overflow: hidden; }
.bck-thanh > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-secondary); }
.bck-pct { width: 56px; color: var(--brand-primary); font: 600 15px/22px var(--font-body); font-variant-numeric: tabular-nums; }

/* ── FORM ── */
.bck-form-muc-tieu { display: flex; flex-direction: column; gap: var(--space-6); }
.bck-chon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bck-chon label, .bck-chon-nho { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; color: var(--brand-primary); font: 500 16px/24px var(--font-body); cursor: pointer; }
.bck-chon-nho { font-size: 14px; min-height: 36px; }
.bck input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-primary); flex: none; }
.bck-truong { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-3) !important; }
.bck-truong label, .bck-nhan-nhom { color: var(--text-muted); font: 500 14px/20px var(--font-body); }
.bck-nhan-nhom { margin: var(--space-2) 0 var(--space-2) !important; }
.bck-truong input, .bck-truong select, .bck-noi input, .bck-hang-loc select {
  min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--bck-vien); border-radius: 10px; background: #F8FAF7;
  color: var(--brand-primary); font: 500 16px/24px var(--font-body); width: 100%; box-sizing: border-box; }
.bck-truong input:focus-visible, .bck-truong select:focus-visible, .bck-noi input:focus-visible, .bck-hang-loc select:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 1px; }
.bck-noi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: var(--space-3); }
@media (min-width: 600px) { .bck-noi { grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--space-3); } }
fieldset[disabled] input, fieldset[disabled] select { opacity: .75; cursor: not-allowed; }
.bck-hang-loc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bck-hang-loc select { width: auto; min-width: 180px; }
.bck-mo > summary { list-style: none; width: 100%; box-sizing: border-box; }
.bck-mo > summary::-webkit-details-marker { display: none; }
.bck-mo[open] > summary { margin-bottom: var(--space-4); }
.bck-form-ngay .bck-nut { margin-top: var(--space-2); }

/* ── CHIP, THONG BAO, TAB, DANH SACH ── */
.bck-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 13px/22px var(--font-body); background: var(--bck-sang); color: var(--brand-primary); }
.bck-chip-cho_xac_nhan, .bck-chip-de_xuat { background: var(--state-warning-bg); color: var(--state-warning-text); }
.bck-chip-da_xac_nhan, .bck-chip-da_thong_nhat { background: var(--state-success-bg); color: var(--state-success-text); }
.bck-chip-dang_lam { background: var(--state-info-bg); color: var(--state-info-text); }
.bck-bao { margin: 0; padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--bck-vien); color: var(--text-secondary); }
.bck-bao-ok { background: var(--state-success-bg); border-color: transparent; color: var(--state-success-text); }
.bck-bao-loi { background: var(--state-danger-bg); border-color: transparent; color: var(--state-danger-text); }
.bck-tab { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.bck-tab a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--bck-vien);
  background: var(--surface-raised); color: var(--brand-primary); font: 600 15px/22px var(--font-body); text-decoration: none; }
.bck-tab a[aria-current="page"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.bck-tab a:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.bck-ds { margin: 0 0 var(--space-3); padding-left: 20px; color: var(--text-secondary); line-height: 26px; }
.bck-dl { margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.bck-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
@media (min-width: 700px) { .bck-dl > div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); } }
.bck-dl dt { color: var(--text-muted); font: 500 14px/22px var(--font-body); }
.bck-dl dd { margin: 0; color: var(--text-secondary); line-height: 22px; }
.bck-nx-tieu-de { font-weight: 700; color: var(--brand-primary) !important; }
.bck-nx-than { color: var(--text-secondary); line-height: 26px; margin-bottom: var(--space-3); }
.bck-trong { text-align: left; }
.bck-chu-cuoi { margin-top: var(--space-8) !important; color: var(--text-muted); font-size: 13px; line-height: 20px; }

/* ── MUC 03: phan cu (Tong quan Ads) dat trong khung moi ── */
.bck-than .dau-trang + div { gap: var(--space-4); }
.bck-than hr.ke { margin: var(--space-2) 0; border: 0; border-top: 1px solid var(--bck-vien); }
.bck-than .the { border: 1px solid var(--bck-vien); border-radius: 14px; box-shadow: none; }
.bck-than .luoi-kpi { gap: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .bck-kpi-lien-ket { transition: none; } }

/* ── 20/10 sau anh chup: dien thoai + dong bo phan cu ── */
@media (max-width: 849px) {
  /* ⭐ Header web chinh da co logo ⇒ ⛔ hai logo chong nhau tren dien thoai. */
  .vo-khung-web .bck-logo { display: none; }
  .bck-ben { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .bck-ten-bao-cao br { display: none; }
  .bck-luoi-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .bck-kpi { min-height: 0; padding: var(--space-4); }
  .bck-kpi-nhan { font-size: 15px; line-height: 20px; }
  .bck-kpi-so { font-size: 24px; line-height: 30px; margin-top: 0; }
  .bck-bang thead th, .bck-bang tbody th, .bck-bang tbody td { padding: 12px; }
}
/* ⭐ Muc 03 giu nguyen than Tong quan cu ⇒ ep tieu de + the cung mot giong voi mau. */
.bck-than h2, .bck-than h3 { font-family: var(--font-body); color: var(--brand-primary); font-weight: 500; letter-spacing: 0; }
.bck-than .the-kpi { border: 1px solid var(--bck-vien); border-radius: 14px; background: var(--surface-raised); box-shadow: none; }
.bck-than .the-kpi .nhan, .bck-than .the-kpi dt { color: var(--brand-primary); }
.bck-than .kpi-gia-tri { color: var(--brand-primary); }
.bck-than .nut:not(.nut-phu) { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* ⭐ 21/10/2026 — Điểm cần cải thiện (Khám trang đích) ở mục 04. */
.bck-cai-thien { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bck-cai-thien > li { padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }
.bck-cai-thien > li:first-child { border-top: 0; padding-top: 0; }
.bck-cai-thien p { margin: 4px 0; }
.bck-giu-dong { white-space: pre-line; }
.bck-chip-uu-cao { background: var(--state-danger-bg); color: var(--state-danger-text); }
.bck-chip-uu-vua { background: var(--state-warning-bg); color: var(--state-warning-text); }
.bck-chip-uu-thap { background: var(--state-info-bg); color: var(--state-info-text); }

/* ─── 22/10/2026 · ban sua theo tai lieu "Chỉnh sửa báo cáo" (Tuyen) ───────────────────────────── */
/* Bia: nut lon nhu ban goc */
.bck-nut-rong { min-width: min(100%, 480px); }
/* Form muc tieu: o chu dai, xuong dong */
.bck-truong textarea { min-height: 72px; padding: 12px var(--space-4); border: 1px solid var(--bck-vien); border-radius: 10px; background: #F8FAF7;
  color: var(--brand-primary); font: 500 16px/24px var(--font-body); width: 100%; box-sizing: border-box; resize: vertical; }
.bck-truong textarea:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 1px; }
fieldset[disabled] textarea { opacity: .75; cursor: not-allowed; }
.bck-thieu { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--state-warning-bg); color: var(--state-warning-text); }
.bck-thieu p { margin: 0 0 4px; color: inherit !important; }
.bck-thieu ul { margin: 0; padding-left: 20px; line-height: 24px; }
.bck-giu-dong { white-space: pre-line; }
/* Chon khoang ngay (muc 02, 04, 05) */
.bck-truong-ngang { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.bck-truong-ngang input[type="date"], .bck-truong-ngang select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--bck-vien); border-radius: 10px;
  background: #F8FAF7; color: var(--brand-primary); font: 500 15px/22px var(--font-body); }
.bck-truong-ngang input:focus-visible, .bck-truong-ngang select:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 1px; }
.bck-nhanh { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.bck-nhanh a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bck-vien);
  background: var(--surface-raised); color: var(--brand-primary); font: 600 14px/20px var(--font-body); text-decoration: none; }
.bck-nhanh a[aria-current="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.bck-nhanh a:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
/* Tien do: them chu so lieu duoi thanh */
.bck-tien-do dd { flex-wrap: wrap; row-gap: 2px; }
.bck-tien-do-chu { flex-basis: 100%; color: var(--text-muted); font: 500 13px/18px var(--font-body); }
/* Ten phan khac mau (muc 03, 05) */
.bck-td-phan.bck-td-mau-1, .bck-td-phan.bck-td-mau-2 { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4) !important; font-weight: 600; }
.bck-td-mau-1 { color: var(--brand-primary) !important; }
.bck-td-mau-2 { color: var(--brand-accent-strong) !important; }
.bck-td-mau-1::before, .bck-td-mau-2::before { content: ""; width: 6px; height: 28px; border-radius: 3px; background: currentColor; flex: none; }
.bck-td-con { margin: var(--space-2) 0 0; font: 500 18px/26px var(--font-body) !important; }
.bck-chuyen-muc { padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--bck-sang); }
/* Muc 03: o so du rong de so nam tren MOT dong */
.bck-ads-kpi .luoi-kpi[data-kpi="lon"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.bck-ads-kpi .kpi-gia-tri { white-space: nowrap; overflow-wrap: normal; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; }
/* Hai o cung chieu cao (muc 05, 04) */
.bck-cao-bang { align-items: stretch; }
.bck-cao-bang > .bck-the { height: 100%; box-sizing: border-box; }
/* Muc 04 Website (thiet ke moi) */
.bck-cau-hoi { margin: 0; color: var(--brand-primary); font: 500 17px/26px var(--font-body); }
.bck-bang-tron { border: 0; border-radius: 0; background: transparent; }
.bck-bang-nhe thead th { background: transparent; color: var(--text-muted); font: 500 13px/20px var(--font-body); border-bottom: 1px solid var(--bck-vien); white-space: normal; }
.bck-bang-nhe tbody tr:nth-child(even) { background: transparent; }
.bck-bang-nhe tbody th a { font-weight: 600; }
.bck-bang-nhe .bck-duong { display: block; color: var(--text-muted); font-weight: 500; }
.bck-nx-trang { margin-top: var(--space-4); padding: var(--space-4); border-radius: 12px; background: var(--bck-sang); }
.bck-nx-trang p { margin: 0 0 var(--space-2); }
.bck-ds-so { margin: 0 0 var(--space-3); display: flex; flex-direction: column; }
.bck-ds-so > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--bck-vien); }
.bck-ds-so dt { color: var(--text-secondary); }
.bck-ds-so dd { margin: 0; color: var(--brand-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.bck-mo-nho > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--brand-primary); font: 600 15px/22px var(--font-body); }
.bck-mo-nho > summary:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.bck-nx-nhan-manh { padding-left: var(--space-3); border-left: 3px solid var(--brand-secondary); }
.bck-viec { margin: 0; padding-left: 24px; display: grid; gap: var(--space-3); }
.bck-viec > li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--bck-vien); }
.bck-viec-ten { margin: 0; color: var(--brand-primary); font-weight: 600; }
.bck-viec-phu { margin: 2px 0; color: var(--text-secondary); font-size: 14px; }

/* ── 22/10/2026 · 04 YOUTUBE (YouTube Analytics) — bieu do SVG ve phia may chu ─────────────────── */
.bck-yt-loc .bck-yt-video { flex: 1 1 280px; min-width: 0; }
.bck-yt-loc .bck-yt-video select { width: 100%; text-overflow: ellipsis; }
.bck-yt-do-thi { margin: var(--space-3) 0 0; min-width: 0; }
.bck-yt-do-thi svg { display: block; width: 100%; height: auto; overflow: visible; }
.bck-yt-luoi { stroke: var(--bck-vien); stroke-width: 1; stroke-dasharray: 4 4; }
.bck-yt-truc { stroke: var(--border-hairline); stroke-width: 1.5; }
.bck-yt-chu { fill: var(--text-secondary); font: 400 20px var(--font-body); font-variant-numeric: tabular-nums; }
.bck-yt-chu-nho { font-size: 18px; }
/* ⭐ Khung SVG co lai ~1/3 tren dien thoai ⇒ chu truc phong to cho doc duoc; nhan cot an (bang ben duoi da ghi so). */
@media (max-width: 849px) {
  .bck-yt-chu { font-size: 40px; }
  .bck-yt-chu-nho { display: none; }
}
.bck-yt-vung { fill: var(--brand-secondary); fill-opacity: .12; stroke: none; }
.bck-yt-duong { fill: none; stroke: var(--brand-primary); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.bck-yt-diem { fill: var(--brand-primary); stroke: #fff; stroke-width: 3; }
.bck-yt-cot { fill: var(--brand-primary); }
.bck-yt-cot:hover { fill: var(--brand-secondary); }
.bck-yt-hai-cot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.bck-ghi-nho { margin: var(--space-3) 0 0; padding: 10px 14px; border-radius: 10px; background: var(--bck-sang); color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.bck-yt-o-trong { padding: var(--space-4); border: 1px solid var(--bck-vien); border-radius: 12px; }
.bck-yt-o-trong .bck-nho { margin: 0; }
.bck-yt-chua { margin: 6px 0 0; font: 700 22px/30px var(--font-body); color: var(--text-secondary); opacity: .6; }
@media (min-width: 850px) {
  .bck-yt-hai-cot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ── 23/10/2026 · 04 WEBSITE: toc do tai trang (nhan mau theo nguong Core Web Vitals) ─────────── */
.bck-toc { display: inline-block; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bck-toc-tot { background: var(--state-success-bg); color: var(--state-success-text); }
.bck-toc-vua { background: var(--state-warning-bg); color: var(--state-warning-text); }
.bck-toc-cham { background: var(--state-danger-bg); color: var(--state-danger-text); }
/* 3 o "Trải nghiệm trên trang": tran ngang o kho rong; kho hep 2 cot thi o thu ba trai het hang (⛔ o le loi lom). */
@media (min-width: 850px) { .bck-luoi-kpi.bck-luoi-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 849px) { .bck-luoi-kpi-3 > :nth-child(3):last-child { grid-column: 1 / -1; } }
/* Bang trang 7 cot: kho hep thi CUON NGANG trong khung (⛔ ep cot ten trang thanh tung chu). */
.bck-bang-trang { min-width: 720px; }
.bck-bang-trang th[scope="row"] { min-width: 170px; }
.bck-bang-trang td.so { white-space: nowrap; }

/* ── 23/10/2026 · 04 WEBSITE: nguon truy cap kieu GA4 + "Ai dang truy cap" ─────────────────── */
.bck-pt { display: block; font-size: 12px; line-height: 16px; color: var(--text-secondary); font-weight: 400; }
.bck-dong-tong th, .bck-dong-tong td { font-weight: 700; background: var(--bck-sang); }
.bck-bang-kenh { min-width: 520px; }
.bck-ai-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 850px) { .bck-ai-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bck-ai-td { margin: 0 0 var(--space-3); font: 600 17px/24px var(--font-body); color: var(--brand-primary); }
.bck-ai-thanh { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bck-ai-thanh li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.bck-ai-nhan { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bck-ai-so { font-variant-numeric: tabular-nums; }
.bck-ai-vach { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--bck-vien); }
.bck-ai-vach > span { display: block; height: 100%; border-radius: 4px; background: var(--brand-secondary); }
.bck-ai-vong { --nu: 0deg; width: 150px; aspect-ratio: 1; margin: var(--space-2) auto var(--space-4); border-radius: 50%;
  background: radial-gradient(closest-side, var(--surface-raised) 64%, transparent 65%), conic-gradient(var(--brand-primary) 0 var(--nu), var(--brand-secondary) var(--nu) 360deg); }
.bck-ai-chu-giai { display: flex; justify-content: center; gap: var(--space-6); margin: 0; }
.bck-ai-chu-giai dt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.bck-ai-chu-giai dd { margin: 2px 0 0; font: 700 26px/32px var(--font-body); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bck-ai-cham { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bck-ai-cham-nu { background: var(--brand-primary); }
.bck-ai-cham-nam { background: var(--brand-secondary); }
/* 23/10/2026 — o chon khach (tai khoan gan nhieu khach) tren thanh ben xanh. */
.bck-chon-khach { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.bck-chon-khach select { flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); color: #fff; padding: 0 10px; font: 600 14px/20px var(--font-body); }
.bck-chon-khach select option { color: var(--text-primary); background: var(--surface-raised); }
.bck-chon-khach .bck-nut { min-height: 44px; background: var(--brand-secondary); color: #fff; border-color: transparent; }
.bck-ai-chua { margin: 0; font: 600 15px/22px var(--font-body); color: var(--text-secondary); }

/* ── 24/10/2026 · MUC TIEU theo the 3: truong co nhan · danh sach them dong · trang thai + hai nut xac nhan ─── */
.bck-mt-rong { grid-column: 1 / -1; }
.bck-dong-truong { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--bck-vien); align-items: start; }
.bck-dong-truong:first-of-type { border-top: 0; }
@media (min-width: 850px) { .bck-dong-truong { grid-template-columns: 240px minmax(0, 1fr); } }
.bck-nhan-truong { margin: 0; padding-top: 8px; font-weight: 600; color: var(--text-primary); }
.bck-dong-truong input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--bck-vien); border-radius: 10px; background: #F8FAF7;
  color: var(--brand-primary); font: 500 16px/24px var(--font-body); width: 100%; box-sizing: border-box; }
.bck-dong-truong textarea { min-height: 72px; padding: 12px var(--space-4); border: 1px solid var(--bck-vien); border-radius: 10px; background: #F8FAF7;
  color: var(--brand-primary); font: 500 16px/24px var(--font-body); width: 100%; box-sizing: border-box; resize: vertical; }
.bck-dong-truong input:focus-visible, .bck-dong-truong textarea:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 1px; }
fieldset[disabled] .bck-dong-truong input { opacity: .75; cursor: not-allowed; }
.bck-chon-ngang { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bck-chon-ngang label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.bck-chon-ngang + input, .bck-chon-ngang + label + input { margin-top: 6px; }
.bck-ds-o { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bck-ds-dong { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; align-items: center; }
.bck-ds-sp { grid-template-columns: 170px minmax(0, 1fr); }
.bck-ds-sp input[name$="[url]"] { grid-column: 2; }
@media (max-width: 849px) { .bck-ds-dong, .bck-ds-sp { grid-template-columns: minmax(0, 1fr); } .bck-ds-sp input[name$="[url]"] { grid-column: 1; } }
.bck-so-o { font-size: 14px; color: var(--text-secondary); }
.bck-nut-them { margin-top: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed var(--brand-secondary); background: transparent;
  color: var(--brand-primary); font: 600 14px/20px var(--font-body); cursor: pointer; }
.bck-nut-them:hover { background: var(--bck-sang); }
.bck-trang-thai-mt { margin-top: var(--space-5); }
.bck-buoc-tt { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 850px) { .bck-buoc-tt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bck-buoc-tt li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bck-vien); color: var(--text-secondary); }
.bck-buoc-tt li.dang { border-color: var(--brand-primary); background: var(--bck-sang); color: var(--text-primary); font-weight: 600; }
.bck-buoc-tt li.xong { color: var(--brand-primary); }
.bck-buoc-so { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-weight: 700; }
.bck-buoc-tt li.dang .bck-buoc-so { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.bck-hai-xac-nhan { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 850px) { .bck-hai-xac-nhan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bck-xn-o { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); border-radius: 12px; border: 1px solid var(--bck-vien); }
.bck-xn-ai { margin: 0; font: 600 13px/18px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.bck-xn-tt { margin: 0; font-weight: 600; color: var(--text-secondary); }
.bck-xn-tt.ok { color: var(--state-success-text); }
.bck-xn-form { display: flex; flex-direction: column; gap: 8px; }
.bck-xn-form textarea { width: 100%; }
.bck-nut[disabled] { opacity: .45; cursor: not-allowed; }
/* ── 24/10/2026 · THE 4: "Tình trạng hồ sơ" Maps = danh sach yeu to hoan thien khach tu tich ─── */
.bck-ht-dem { padding: 4px 12px; border-radius: 999px; background: var(--bck-sang); color: var(--brand-primary); font-size: 14px; white-space: nowrap; }
.bck-ht-ds { margin: var(--space-3) 0 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px var(--space-5); }
@media (min-width: 850px) { .bck-ht-ds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bck-ht-muc { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--bck-vien); color: var(--text-primary); cursor: pointer; }
.bck-ht-muc input { margin: 0; }
fieldset[disabled] .bck-ht-muc { cursor: default; }
.bck-ht-chan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
/* ── 29/10/2026 · GOI NAM: khach tu ket noi Google Ads (`/ket-noi`) ─── */
.bck-bao-nhac { background: var(--state-warning-bg); border-color: transparent; color: var(--state-warning-text); }
.bck-bao-nhac a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bck-ket-noi-ben { display: block; margin-top: var(--space-3); padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 10px;
  color: #fff; font: 600 14px/20px var(--font-body); text-decoration: none; }
.bck-ket-noi-ben:hover, .bck-ket-noi-ben[aria-current="page"] { background: rgba(255, 255, 255, .12); }
.bck-ket-noi-ben:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bck-chip-cho_chap_nhan { background: var(--state-warning-bg); color: var(--state-warning-text); }
.bck-chip-da_ket_noi { background: var(--state-success-bg); color: var(--state-success-text); }
.bck-chip-tu_choi { background: var(--state-danger-bg); color: var(--state-danger-text); }
.bck-chip-cho_4t { background: var(--state-info-bg); color: var(--state-info-text); }
.bck-ket-noi-form { margin-top: var(--space-4); }
.bck-ket-noi-form .bck-truong input { max-width: 320px; }
.bck-ket-noi-buoc { list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 850px) { .bck-ket-noi-buoc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bck-ket-noi-buoc h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-2); color: var(--brand-primary); font: 600 17px/24px var(--font-body); }
/* ── 29/10/2026 (toi) · GOI NAM: the GA4 / Search Console / Merchant / Tag Manager (`/ket-noi`) ─── */
.bck-nen-tang-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 850px) { .bck-nen-tang-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bck-nen-tang { min-width: 0; scroll-margin-top: 96px; }
#nen-tang-mien { scroll-margin-top: 96px; }
.bck-nen-tang-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.bck-nen-tang-dau h3 { margin: 0; color: var(--brand-primary); font: 600 18px/26px var(--font-body); }
.bck-nen-tang-loi-ich { margin: 0 0 var(--space-3); color: var(--text-secondary); line-height: 24px; }
.bck-nen-tang > .bck-nho, .bck-nen-tang > .bck-bao { margin: 0 0 var(--space-2); }
.bck-nen-tang-email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-2); }
.bck-email-4t { overflow-wrap: anywhere; color: var(--text-primary); }
.bck-nen-tang-buoc { margin: var(--space-2) 0 var(--space-3); padding-left: 20px; color: var(--text-secondary); line-height: 22px; }
.bck-nen-tang-buoc li + li { margin-top: 6px; }
.bck-nen-tang .bck-truong input, #nen-tang-mien .bck-truong input { width: 100%; max-width: 360px; box-sizing: border-box; }
.bck-nen-tang-nut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bck-chip-nt-chua, .bck-chip-nt-khong_dung { background: var(--bck-sang); color: var(--text-muted); }
.bck-chip-nt-cho, .bck-chip-nt-cho_4t { background: var(--state-warning-bg); color: var(--state-warning-text); }
.bck-chip-nt-da { background: var(--state-success-bg); color: var(--state-success-text); }
.bck-chip-nt-kiem_lai { background: var(--state-danger-bg); color: var(--state-danger-text); }