/* MK_ONG_v1 — bảng màu MẬT ONG cho cụm ongdu.
   Sinh từ skin `g` (grenada) của mk.css: cùng cấu trúc, dịch tông sang hổ phách/sáp ong.
   KHÔNG sửa mk.css để sau này còn đồng bộ được với cụm grenada.
   Nạp SAU mk.css/mk-tune.css/mk-desktop.css. */
:root{
  --o-spice:#A8541B;   /* nâu mật cháy — màu thương hiệu (thay đỏ ớt của grenada) */
  --o-gold:#E0A81C;    /* vàng mật — điểm nhấn */
  --o-leaf:#5A7A34;    /* xanh lá rừng */
  --o-sea:#1B6FA8;
  --o-cacao:#2A1D10;   /* nâu tổ sẫm — nền topbar */
  --o-sand:#FAF3E4;    /* kem sáp ong — chữ trên nền sẫm */
}

/* GRENADA */
.o .tb{background:var(--o-cacao);border-color:#3A2820}
.o .tb-name{color:var(--o-sand);font-family:var(--serif);font-weight:600}
.o .tb-sub{color:var(--o-gold)}
.o .ib{color:var(--o-sand)}
.o .ib.call{color:var(--o-gold)}
.o .hamb i{background:var(--o-sand)}
.o .scroll{background:var(--o-sand);color:var(--o-cacao)}
.o .bn{background:#fff;border-color:#E8DFCC}
.o .bn a{color:#918878}
.o .bn a.on{color:var(--o-spice)}
.o .dr{background:var(--o-cacao)}
.o .dr .hd{border-bottom:1px solid rgba(217,162,27,.28)}
.o .dr .hd .n{color:#fff;font-family:var(--serif)}
.o .dr .hd .s{color:var(--o-gold)}
.o .dtile{background:rgba(255,255,255,.06);border-color:rgba(217,162,27,.26);color:#EBDFCE}
.o .dgrp{color:#8C7C6C}
.o .dr li a{color:#D8CCBE}
.o .dr li a .c{color:#8C7C6C}
.o .dr .fo a.p{background:var(--o-spice);color:#fff}
.o .dr .fo a.s{border:1px solid rgba(217,162,27,.4);color:var(--o-gold)}
.o .ft{background:#1B120E;color:#C3B5A6}
.o .ft .fnm{color:#fff}
.o .ft .ftg{color:var(--o-gold)}
.o .ft .fh{color:var(--o-gold)}
.o .ft .fcols a{color:#C3B5A6}
.o .ft .fhot{color:#fff}
.o .ft .fbot{border-color:rgba(255,255,255,.12);color:#8C7C6C}
.o .tb-tld{color:var(--o-gold)}
.o .ti-dai .ti-t{color:var(--o-spice)}
.o .ti-g a{border-color:#E4DACA}
.o .ti-g .tx b{color:#2A1B12}
body:not(.rong) .o .gart .in tr{border-color:#E4DACA}
.o .ft .fdt b{color:var(--o-gold)}
/* FDT_KHONG_GAY_v1 — dòng số điện thoại có ghi chú "(gọi · Zalo)" bị ngắt giữa
   chừng, chữ "Zalo)" rơi xuống hàng dưới trông như một mục riêng. Cho cả dòng
   không ngắt, và nếu chật thì đẩy NGUYÊN cụm ghi chú xuống chứ không cắt đôi. */
.ft .fdt a{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px}
.ft .fdt a b{white-space:nowrap}
.ft .fdt a i{white-space:nowrap;font-style:normal}
.o .bt-them{color:var(--o-spice)}
.o .tin-tab button{border-color:#E4DACA;color:#7A6C5D}
.o .tin-tab button.on{background:var(--o-spice);border-color:var(--o-spice);color:#fff}
/* Màu chữ menu phải lấy theo bảng màu từng site — để inherit thì chìm vào nền tối. */
body.rong .o .tbnav a{color:var(--o-sand)}
/* Màu theo từng site */
.o .lcard{border-color:#E4DACA}
.o .lcard h4{color:#2A1B12}
.o .lcard .chip{background:#F6E7D8;color:var(--o-spice)}
.o .bcrumb,.o .bcrumb a{color:#8A7B6B}
.o .mloc a{border-color:#E4DACA;color:#5A4636}
.o .mloc a.on{background:var(--o-spice);border-color:var(--o-spice);color:#fff}
.o .ptrang a,.o .ptrang span{border-color:#E4DACA;color:#5A4636}
.o .ptrang .on{background:var(--o-spice);border-color:var(--o-spice);color:#fff}
.o .gart .in a{color:var(--o-spice)}
.o .gtags span{border-color:#E4DACA;color:#8A7B6B}
.o .frm input,.o .frm select,.o .frm textarea{border-color:#E0D5C0}
.o .frm .nut-gui{background:var(--o-spice)}
.o .hop-ok{background:#F6E7D8;border:1px solid #E0D5C0}
.o .hoi-dap,.o .hoi-dap details{border-color:#E4DACA}
.o .hoi-dap summary{background:#FBF6EE;color:#2A1B12}
/* ── OD_BANQUYEN_v1 — trang /ban-quyen + huy hiệu chân trang.
   Trích từ app.css của cụm mamnon (nơi mẫu này chạy thật), đổi tiền tố mn- → od-.
   Cụm này chạy bộ mk nên không nạp app.css; để ở đây cho gọn. ── */
/* ===== MN_BANQUYEN_v1 — badge bản quyền dưới footer + trang /ban-quyen ===== */
.od-bq-wrap{display:flex;justify-content:center;align-items:center;gap:6.8px;flex-wrap:wrap;margin:8.2px 0 4px}
.od-bq-badge{display:inline-flex;align-items:center;gap:6.1px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:6.8px;
  padding:3.7px 8.8px;transition:border-color .15s,background .15s}
.od-bq-badge:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34)}
.od-bq-ic{display:flex;color:#E0A81C;flex:0 0 auto}
.od-bq-txt{display:flex;flex-direction:column;line-height:1.3}
.od-bq-txt b{font-size:8.5px;font-weight:700;color:inherit;opacity:.95}
.od-bq-txt span{font-size:7.5px;opacity:.62;letter-spacing:.2px}
.od-bq-ngoai{display:inline-flex;align-items:center}
.od-bq-page{max-width:584.8px;margin:0 auto;padding:13.6px 0 44px}
.od-bq-page>*{max-width:100%}
.od-bq-page img,.od-bq-page pre{max-width:100%}
.od-bq-page h1{font-size:17px;line-height:1.28;margin:0 0 10px;color:#2A1D10}
.od-bq-page h2{font-size:12.2px;margin:20.4px 0 12px;color:#2A1D10}
.od-bq-page p{line-height:1.7;color:#5A4636}
.od-bq-hero{background:linear-gradient(180deg,#FDF9F0,#fff);border:1px solid #EFE2CC;
  border-radius:12.2px;padding:11.1px 13.6px;text-align:center}
.od-bq-hero-ic{color:#A8541B;display:flex;justify-content:center;margin-bottom:5.4px}
.od-bq-ma{display:inline-flex;flex-direction:column;gap:1.4px;margin-top:9.5px;
  background:#fff;border:1px dashed #E3CBA8;border-radius:8.2px;padding:4.1px 12.2px}
.od-bq-ma span{font-size:7.8px;color:#7A6C5D;letter-spacing:.3px;text-transform:uppercase}
.od-bq-ma b{font-size:11.6px;color:#2A1D10;letter-spacing:1.5px;font-variant-numeric:tabular-nums}
.od-bq-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6.1px;margin:10.9px 0 4px}
.od-bq-so div{background:#FDFAF4;border:1px solid #EFE2CC;border-radius:8.2px;padding:6px 6.8px;text-align:center}
.od-bq-so b{display:block;font-size:14.3px;font-weight:800;color:#2A1D10}
.od-bq-so span{font-size:7.8px;color:#7A6C5D;line-height:1.35;display:block;margin-top:2px}
.od-bq-ds{padding-left:13.6px;line-height:1.75;color:#5A4636}
.od-bq-ds li{margin-bottom:6.1px}
.od-bq-2{display:grid;grid-template-columns:1fr 1fr;gap:8.2px}
.od-bq-2>div{border-radius:9.5px;padding:6.9px 10.9px;border:1px solid}
.od-bq-2>div>b{display:block;margin-bottom:6.1px;font-size:9.9px}
.od-bq-2 ul{margin:0;padding-left:12.9px;line-height:1.65;font-size:9.2px}
.od-bq-2 li{margin-bottom:4.1px}
.od-bq-2 .ok{background:#FBF6EE;border-color:#F0DDB8}
.od-bq-2 .ok>b{color:#8A4A18}
.od-bq-2 .no{background:#FBEEE9;border-color:#E8C9B4}
.od-bq-2 .no>b{color:#A8321B}
.od-bq-buoc{padding-left:13.6px;line-height:1.7;color:#5A4636}
.od-bq-buoc li{margin-bottom:6.8px}
.od-bq-note{background:#FBF4E6;border:1px solid #E9D3A0;border-radius:9.5px;
  padding:6.9px 10.9px;line-height:1.7;color:#3A2820;margin-top:12.2px;font-size:9.5px}
.od-bq-lienhe{display:flex;align-items:center;gap:8.2px;flex-wrap:wrap;margin:8.2px 0}
.od-bq-mail{display:inline-block;background:#2A1D10;color:#fff;text-decoration:none;
  border-radius:7.5px;padding:5.6px 13.6px;font-weight:700;font-size:10.2px}
.od-bq-lienhe span{color:#7A6C5D;font-size:9.5px}
.od-bq-canhan{font-size:9.2px;color:#7A6C5D}
.od-bq-cuoi{margin-top:17.7px;padding-top:10.9px;border-top:0.7px solid #EFE2CC;
  font-size:8.5px;color:#8A7B6B;text-align:center}
@media (max-width:435.2px){.od-bq-2{grid-template-columns:1fr}
.od-bq-page h1{font-size:14.3px}}
/* MN_BQGIAMSAT_v1 — dòng đơn vị giám sát, ngay dưới badge bản quyền */
.od-bq-gs{text-align:center;font-size:7.8px;line-height:1.5;margin:4.1px 0 2px;opacity:.6}
.od-bq-gs a{color:inherit;font-weight:700;text-decoration:none;border-bottom:0.7px dotted currentColor}
.od-bq-gs a:hover{opacity:1}
/* ── NHAC_WIDGET_v1 — dải nghe nhạc về ong dú ────────────────────────────── */
.od-nhac{margin:15px 0;padding:7.4px 9.5px 8.2px;border:1px solid #E4DACA;border-radius:10.9px;
  background:linear-gradient(180deg,#FFFDF8 0%,#FBF4E6 100%)}
.od-nhac-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:8.2px;margin-bottom:8.2px}
.od-nhac-dau h2{font-size:11.6px;line-height:1.25;color:#2A1D10;font-weight:700;margin:0}
.od-nhac-dau p{margin:2px 0 0;font-size:8.5px;line-height:1.45;color:#7A6C5D}
.od-nhac-dau .xem{flex:0 0 auto;font-size:8.2px;font-weight:600;color:var(--o-spice);
  border:1px solid #E0D5C0;border-radius:679.3px;padding:2.3px 7.5px;background:#fff}

.od-nhac-may{display:flex;gap:8.2px;align-items:center;padding:7.5px;border-radius:8.8px;
  background:#2A1D10;color:#FAF3E4}
.od-nhac-may .bia{flex:0 0 62px;width:42.2px;height:42.2px;border-radius:6.8px;background:#3A2820 center/cover no-repeat}
.od-nhac-may .giua{flex:1 1 auto;min-width:0}
.od-nhac-may .ten{font-size:9.5px;font-weight:600;line-height:1.3;margin-bottom:4.8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-nhac-may .thanhd{height:2.7px;border-radius:67.3px;background:rgba(250,243,228,.22);overflow:hidden;margin-bottom:5.4px}
.od-nhac-may .thanhd span{display:block;height:100%;width:0;background:var(--o-gold);transition:width .25s linear}
.od-nhac-may .dieu{display:flex;align-items:center;gap:5.4px}
.od-nhac-may .n{border:0;background:transparent;color:#FAF3E4;font-size:10.2px;line-height:1;
  padding:3.4px;cursor:pointer;border-radius:5.4px}
.od-nhac-may .n:hover{background:rgba(250,243,228,.12)}
.od-nhac-may .n.to{background:var(--o-gold);color:#2A1D10;width:23.1px;height:23.1px;font-size:8.8px;
  display:inline-flex;align-items:center;justify-content:center}
.od-nhac-may .n.loi{font-size:7.5px;font-weight:700;letter-spacing:.02em;border:1px solid rgba(250,243,228,.35);
  padding:1.8px 6.1px;border-radius:679.3px}
.od-nhac-may .gio{margin-left:auto;font-size:7.8px;color:rgba(250,243,228,.65);font-variant-numeric:tabular-nums}

.od-nhac-ds{list-style:none;margin:8.2px 0 0;padding:0;counter-reset:none}
.od-nhac-ds li{border-bottom:0.7px solid #EFE6D6}
.od-nhac-ds li:last-child{border-bottom:0}
.od-nhac-ds button{display:flex;align-items:center;gap:6.8px;width:100%;padding:4.1px 2.7px;
  border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;color:#2A1D10}
.od-nhac-ds .so{flex:0 0 20px;font-size:7.8px;color:#A0937F;font-variant-numeric:tabular-nums}
.od-nhac-ds .t{font-size:9.2px;line-height:1.35;font-weight:500}
.od-nhac-ds li.dang .t{color:var(--o-spice);font-weight:700}
.od-nhac-ds li.dang .so{color:var(--o-spice)}
.od-nhac-ds button:hover{background:#FBF4E6;border-radius:5.4px}

@media (min-width:557.6px){
  .od-nhac{padding:9.2px 12.2px 9.5px}
  .od-nhac-dau h2{font-size:12.9px}
  .od-nhac-ds{columns:2;column-gap:17.7px}
  .od-nhac-ds li{break-inside:avoid}
}

/* ── OD_CONGCU_v1 — bộ công cụ tra cứu ───────────────────────────────────── */
.od-cc{padding:9.6px 14px 26px;max-width:557.6px;margin:0 auto;color:#2A1D10}
.cc-duong{color:#8A7B6B;margin-bottom:10px}
.cc-duong a{color:var(--o-spice);font-weight:600}
.cc-dau h1{font-weight:700;margin:0 0 6px}
.cc-dau p{color:#5A4636;margin:0 0 16px}

.cc-luoi{display:grid;grid-template-columns:1fr;gap:10px}
.cc-o{display:block;padding:14px;border:1px solid #E4DACA;border-radius:9.5px;background:#fff}
.cc-o .e{display:block;margin-bottom:6px}
.cc-o .n{display:block;font-weight:700;margin-bottom:2.9px}
.cc-o .m{display:block;color:#7A6C5D}

.cc-tim{display:flex;gap:7.9px;margin-bottom:17.9px}
.cc-tim input{flex:1;padding:6.8px 12.1px;border:1px solid #E0D5C0;border-radius:7.5px;font:inherit;background:#fff}
.cc-tim button,.cc-form button,.cc-tick button{padding:6.8px 17.9px;border:0;border-radius:7.5px;
  background:var(--o-spice);color:#fff;font:inherit;font-weight:700;cursor:pointer}

.cc-nhom{letter-spacing:.06em;text-transform:uppercase;color:#8A7B6B;
  margin:20px 0 8px;font-weight:700}
.cc-tuds{list-style:none;margin:0;padding:0}
.cc-tuds li{border-bottom:0.7px solid #EFE6D6}
.cc-tuds li:last-child{border-bottom:0}
.cc-tuds a{display:block;padding:6.8px 2.1px}
.cc-tuds b{display:block;font-weight:600;margin-bottom:2.1px}
.cc-tuds span{display:block;color:#7A6C5D}
.cc-tuds li.dang b{color:var(--o-spice)}

.cc-tu h1{margin-bottom:4px}
.cc-tu h1 i{font-weight:400;color:#8A7B6B;font-style:italic}
.cc-tu .nh{display:inline-block;font-weight:700;color:var(--o-spice);
  background:#FBF0DC;border-radius:679.3px;padding:2.1px 10px;margin-bottom:12.1px}
.cc-tu .ng{margin-bottom:14px}
.cc-tu .gc,.cc-tu .nh-lam{padding:8.2px 14px;border-radius:8.2px;margin-bottom:10px}
.cc-tu .gc{background:#FBF4E6;border-left:2px solid var(--o-gold)}
.cc-tu .nh-lam{background:#FBEEE9;border-left:2px solid var(--o-spice)}
.cc-tu .gc b,.cc-tu .nh-lam b{display:block;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.cc-tu p{margin:0}

.cc-form{display:grid;gap:11px;padding:14px;border:1px solid #E4DACA;border-radius:9.5px;background:#fff;margin-bottom:16px}
.cc-form label{display:block;font-weight:600}
.cc-form input[type=number],.cc-form select{width:100%;margin-top:5px;padding:6px 11px;
  border:1px solid #E0D5C0;border-radius:6.8px;font:inherit;background:#fff}
.cc-form label.tick{display:flex;align-items:center;gap:7.9px;font-weight:500}
.cc-form label.tick input{margin:0}

.cc-kq{display:grid;gap:10px;margin-bottom:16px}
.cc-kq .o{padding:14px;border-radius:9.5px;background:#fff;border:1px solid #E4DACA}
.cc-kq .o.chinh{background:#2A1D10;border-color:#2A1D10;color:#FAF3E4}
.cc-kq .nh{display:block;text-transform:uppercase;letter-spacing:.05em;color:#8A7B6B;margin-bottom:5px}
.cc-kq .o.chinh .nh{color:rgba(250,243,228,.7)}
.cc-kq b{display:block;font-weight:700}
.cc-kq .o.chinh b{color:var(--o-gold)}
.cc-kq i{display:block;font-style:normal;color:#8A7B6B;margin-top:4px}
.cc-kq .o.chinh i{color:rgba(250,243,228,.6)}

.cc-luu{padding:14px;border-radius:9.5px;background:#FBF4E6}
.cc-luu b{display:block;margin-bottom:7.1px}
.cc-luu ul{margin:0;padding-left:17.9px;list-style:disc}
.cc-luu li{margin-bottom:5px}

.cc-tick{display:grid;gap:2.1px;padding:12.1px;border:1px solid #E4DACA;border-radius:9.5px;background:#fff;margin-bottom:16px}
.cc-tick label{display:flex;align-items:flex-start;gap:9px;padding:5.4px 4px;border-bottom:0.7px solid #F3ECE0}
.cc-tick label:last-of-type{border-bottom:0}
.cc-tick input{margin:2.1px 0 0}
.cc-tick button{margin-top:10px;justify-self:start}

.cc-nn{padding:8.8px 14px;border-radius:8.8px;background:#fff;border:1px solid #E4DACA;margin-bottom:9px}
.cc-nn.dau{border-color:var(--o-spice);background:#FFFDF8}
.cc-nn .tt{font-weight:700;margin-bottom:5px;display:flex;flex-wrap:wrap;align-items:baseline;gap:7.9px}
.cc-nn .kh{font-weight:600;color:#8A7B6B;background:#F3ECE0;border-radius:679.3px;padding:1.5px 7.9px}
.cc-nn p{margin:0;color:#5A4636}

.cc-thang{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cc-thang a{width:25.8px;height:25.8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #E0D5C0;border-radius:6.8px;background:#fff;font-weight:600}
.cc-thang a.dang{background:var(--o-spice);border-color:var(--o-spice);color:#fff}
.cc-mua{display:inline-block;font-weight:700;color:var(--o-spice);
  background:#FBF0DC;border-radius:679.3px;padding:2.1px 11px;margin-bottom:9px}
.cc-tom{margin:0 0 14px}
.cc-2cot{display:grid;gap:10px}
.cc-2cot>div{padding:8.8px 14px;border-radius:8.8px}
.cc-2cot .nen{background:#F1F6EC;border-left:2px solid var(--o-leaf)}
.cc-2cot .tranh{background:#FBEEE9;border-left:2px solid var(--o-spice)}
.cc-2cot b{display:block;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.cc-2cot ul{margin:0;padding-left:17.1px;list-style:disc}
.cc-2cot li{margin-bottom:4px}
.cc-trong{padding:14px;border-radius:8.2px;background:#FBF4E6}

@media (min-width:516.8px){
  .cc-luoi{grid-template-columns:1fr 1fr}
  .cc-kq{grid-template-columns:1fr 1fr 1fr}
  .cc-2cot{grid-template-columns:1fr 1fr}
  .cc-tick{grid-template-columns:1fr 1fr;column-gap:17.9px}
  .cc-tick button{grid-column:1/-1}
}

/* ── MOCKUP_ONG_v1 — trang chủ site mẹ dùng bộ class của mockup grenada (gh/gstat/
   gsec/gben/gstep/gpart/gq/gcta). Các class đó ăn màu qua biến --g-*, nên chỉ cần
   ánh xạ biến ở cấp khung là cả trang đổi sang tông mật ong — không phải chép lại
   19KB CSS mockup, và sau này grenada sửa mockup.css thì bên này ăn theo được. ── */
.screen.o{
  --g-spice:var(--o-spice); --g-gold:var(--o-gold); --g-leaf:var(--o-leaf);
  --g-sea:var(--o-sea);     --g-cacao:var(--o-cacao); --g-sand:var(--o-sand);
  /* Vài quy tắc dùng chung (ví dụ nhãn chuyên mục `.bc`) lại ăn biến của skin
     Global Star, nên nhãn hiện ra XANH LÁ giữa trang tông mật ong. Cụm này không
     dùng skin 's' nên ánh xạ luôn cả bộ đó cho khỏi sót chỗ nào. */
  --s-green:var(--o-spice); --s-crim:var(--o-spice); --s-cyan:var(--o-gold);
  --s-deep:var(--o-cacao);  --s-cream:#FBF6EE;       --s-line:#EFE2CC;
}

/* Ô công cụ nổi bật: bản grenada đổ nền XANH BIỂN (#123A5C→#1B6FA8) — trên nền kem
   mật ong nhìn như dán nhầm từ site khác. Đổi sang nâu tổ → nâu mật cháy. */
.screen.o .gtool.hero{background:linear-gradient(140deg,#2A1D10,#8A4A18);border-color:#8A4A18}

/* Trang /ban-quyen dùng nhiều thẻ TRẦN (p, h2, li) — bộ mk không đặt cỡ chữ nền cho
   thẻ trần nên chúng ăn cỡ mặc định của trình duyệt, trong khung 270px đã phóng thì
   hoá ra to gấp đôi phần còn lại. Đặt cỡ nền cho riêng vùng này. */
.od-bq-page{font-size:8.4px;line-height:1.65;color:#3A2820}
.od-bq-page p{font-size:8.4px;line-height:1.65;margin:0 0 7px}
.od-bq-page h2{font-size:11px;line-height:1.3;font-weight:800;margin:23.5px 0 7px;color:#2A1D10}
.od-bq-page ul,.od-bq-page ol{margin:0 0 10px;padding-left:19.1px}
.od-bq-page li{font-size:8.4px;line-height:1.6;margin-bottom:7.4px}
.od-bq-page b{font-weight:700}
/* Ba ô số liệu: bản mamnon xếp dọc một cột; ở đây xếp ngang như dải số liệu trang chủ. */
.od-bq-so{display:grid;grid-template-columns:repeat(3,1fr);gap:7.4px}
.od-bq-so>div{padding:11.8px 5.9px;text-align:center}
.od-bq-so b{display:block;font-size:13px;line-height:1.15;color:var(--o-spice);font-weight:800}
.od-bq-so span{display:block;font-size:7.8px;line-height:1.3;color:#8A7B6B;margin-top:2.9px}

/* Bảng ba năm của công cụ tính thu nhập. Cỡ chữ theo thang mk (khung 270px). */
.cc-bang{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:11px}
.cc-bang table{width:100%;border-collapse:collapse}
.cc-bang th{text-align:left;text-transform:uppercase;letter-spacing:.04em;
  color:#8A7B6B;font-weight:700;padding:5px 4px;border-bottom:1px solid #E4DACA;white-space:nowrap}
.cc-bang td{padding:6px 4px;border-bottom:1px solid #F1E9DA;vertical-align:top}
.cc-bang tr.mo td{color:#9A8C7C}
.cc-bang .p{display:block;color:var(--o-spice);font-weight:700;margin-top:1px}
.cc-bang .kh{color:#A99C8C;font-style:italic}
.cc-bang td b{font-weight:800}

.cc-gia{padding:9px 10px;border-radius:9px;background:#fff;border:1px solid #E4DACA;
  margin-bottom:10px}
.cc-gia b{display:block;margin-bottom:4px}
.cc-gia ul{margin:0;padding-left:12px;list-style:disc}
.cc-gia li{margin-bottom:3px}
.cc-gia li.nh{color:#8A7B6B;list-style:none;margin-left:-12px}
.cc-gia a{color:var(--o-spice);font-weight:700;text-decoration:underline}

.cc-moc{display:flex;flex-wrap:wrap;gap:4px}
.cc-moc a{font-weight:600;padding:4px 8px;border-radius:99px;
  border:1px solid #E0D5C0;background:#fff;color:#5A4636}
.cc-moc a.dang{background:var(--o-spice);border-color:var(--o-spice);color:#fff}

/* ── TRANGTINH_v1 — cỡ chữ nền cho THẺ TRẦN trong khung mk ──────────────────
   Bộ mk vẽ trên khung 270px rồi phóng, và nó chỉ đặt cỡ cho các lớp riêng của
   mình. Trang nào viết bằng thẻ trần (chính sách, điều khoản, 404, danh sách thẻ,
   liên hệ) thì chữ ăn cỡ mặc định của trình duyệt — qua phép phóng thành to gấp
   đôi phần còn lại của site.

   Dùng :where() để KHÔNG cộng độ ưu tiên: quy tắc này chỉ nặng bằng một lớp, nên
   mọi cỡ chữ mà mk.css đã đặt cho trang bài (.gart p, .in h3…) vẫn thắng.
   Đặt sai chỗ này là kéo cả trang bài viết bé lại theo. */
.scroll :where(h1){font-size:15px;line-height:1.25;font-weight:800;margin:0 0 8px;color:#2A1D10}
.scroll :where(h2){font-size:11.5px;line-height:1.3;font-weight:800;margin:15px 0 6px;color:#2A1D10}
.scroll :where(h3){font-size:9.8px;line-height:1.35;font-weight:700;margin:12px 0 5px;color:#2A1D10}
.scroll :where(h4){font-size:9px;line-height:1.35;font-weight:700;margin:10px 0 4px}
.scroll :where(p){font-size:8.4px;line-height:1.7;margin:0 0 8px}
.scroll :where(ul,ol){margin:0 0 9px;padding-left:14px}
.scroll :where(li){font-size:8.4px;line-height:1.65;margin-bottom:4px}
.scroll :where(ul){list-style:disc}
.scroll :where(ol){list-style:decimal}
.scroll :where(table){font-size:8px;border-collapse:collapse;width:100%}
.scroll :where(th,td){padding:5px 4px;border-bottom:1px solid #EFE2CC;text-align:left}
.scroll :where(label){font-size:8.4px}
.scroll :where(input,select,textarea){font-size:9px}
.scroll :where(blockquote){font-size:8.6px;line-height:1.65;margin:0 0 9px;padding-left:9px;
  border-left:2px solid var(--o-gold);color:#5A4636}

/* Đám thẻ dùng cỡ chữ NỘI TUYẾN theo đơn vị em (to nhỏ theo số bài), nên cỡ cuối
   cùng phụ thuộc cỡ của thẻ cha. Đặt cha thật nhỏ để cả đám về đúng thang mk. */
.tag-cloud{font-size:6.2px;gap:3px}
.tag-cloud-item{padding:3px 7px;border-radius:99px;line-height:1.3}
.tag-cloud-count{font-size:.72em;opacity:.65;margin-left:3px}

/* Khung công cụ: khung mk chỉ rộng 270px nên max-width 820px là vô nghĩa, còn
   khoảng đệm thì phải theo TỈ LỆ khung — thu nó xuống là chữ dính sát mép, đúng
   lỗi "tràn lề". Chốt lại ở đây để không phụ thuộc phép thu ở trên. */
.od-cc{max-width:none;padding:11px 12px 22px}
.cc-dau h1{margin-bottom:5px}
.cc-nhom{margin:14px 0 6px}

/* ══ BANSAC_ONG_v1 — bản sắc riêng của cụm ong dú ═══════════════════════════
   Trước đây cụm chỉ mượn nguyên tông đất của grenada nên nhìn như site anh em
   chứ không có mặt riêng. Ở đây neo vào ba thứ của chính nghề: SÁP ONG (kem ngà),
   MẬT (hổ phách) và GỖ TỔ (nâu sẫm ấm) — vẫn cùng gu với hệ nhưng nhận ra ngay. */
:root{
  --o-cacao:#241708;      /* gỗ tổ — nền topbar, sẫm và ấm hơn nâu đất của grenada */
  --o-sand:#FBF2DF;       /* sáp ong — chữ trên nền sẫm */
  --o-gold:#E8A317;       /* mật — điểm nhấn */
  --o-spice:#A85018;      /* mật cháy — màu thương hiệu */
  --o-leaf:#5C7A38;       /* lá vườn */
}
.screen.o{background:#FDF8EE}
.screen.o .scroll{background:#FDF8EE}

/* Topbar: mỏng bớt, và thêm một sợi mật mảnh ở chân — dấu nhận diện của cụm.
   ⚠ CHỈ áp cho màn hẹp. Trên desktop `.tbnav` xuống hàng NGAY TRONG topbar
   (flex 0 0 100%), nên ép chiều cao cố định là đẩy menu ngang tràn ra ngoài,
   nằm đè lên ảnh hero — đã dính đúng lỗi đó. */
.screen.o .tb{border-bottom:0;position:relative;padding:0 9px}
body:not(.rong) .screen.o .tb{height:36px}
/* Bỏ sợi mật dưới topbar — định làm dấu nhận diện nhưng nhìn ra một gạch chân
   thừa. Bản sắc để bảng màu và nhịp bố cục lo, không cần vạch kẻ. */
.screen.o .tb-name{font-size:10.4px;letter-spacing:.01em}
.screen.o .tb-sub{font-size:6.2px;line-height:1.25;letter-spacing:.04em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.screen.o .tb-logo{width:22px;height:22px}

/* Thanh dưới: 54px trong khung 270 hoá ra gần 78px trên máy thật — dày và thô.
   Hạ chiều cao, thu biểu tượng, giảm cỡ nhãn. */
body:not(.rong) .screen.o .bn{height:44px}
.screen.o .bn{border-top:1px solid #EADCC2;background:#FFFDF8}
.screen.o .bn a{gap:2px;color:#7A6A55}
.screen.o .bn svg{width:16px;height:16px;stroke-width:1.9}
.screen.o .bn span{font-size:7.2px;font-weight:600;letter-spacing:.01em}
.screen.o .bn a.on{color:var(--o-spice)}
.screen.o .bn a.on svg{stroke-width:2.2}

/* Nhãn mục: gạch chân mảnh màu mật thay vì kẻ ngang nhạt — cho ra nhịp riêng. */
.screen.o .glab{color:var(--o-spice)}
.screen.o .glab::after{background:linear-gradient(90deg,#EADCC2,transparent)}

/* Menu ngang trên desktop chỉ được cấp màu cho skin `g` và `s`; skin ong không có
   dòng nào nên chữ chìm vào nền tối của topbar. */
body.rong .o .tbnav a{color:var(--o-sand)}
body.rong .o .tbnav{border-top-color:rgba(251,242,223,.16)}

/* ══ Khối video trên trang chủ ══════════════════════════════════════════════
   Mẫu `gpart` của grenada vốn để khoe ĐỐI TÁC: ảnh nhỏ vuông bên trái, chữ dài
   bên phải. Đem dùng cho video thì thẻ cao lêu nghêu, ảnh bé tí, mô tả bốn dòng —
   nhìn chán. Video phải cho xem ẢNH TRƯỚC: khung 16:9 tràn ngang, chữ nằm dưới. */
.screen.o .gpart{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.screen.o .gpart .gp{display:block;padding:0;overflow:hidden;border-radius:10px;
  background:#fff;border:1px solid var(--o-vien,#E8DFCC)}
.screen.o .gpart .gp img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:0;margin:0}
.screen.o .gpart .gp .tx{padding:7px 8px 9px}
.screen.o .gpart .gp h4{font-size:9.8px;line-height:1.32;font-weight:700;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.screen.o .gpart .gp p{font-size:8.6px;line-height:1.45;margin:3px 0 0;color:#8A7B6B;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Nhãn mục + nút "Tất cả" xuống hai dòng vì chữ giãn quá rộng. */
.screen.o .glab{font-size:10px;letter-spacing:.09em}
.screen.o .glab a{font-size:8.8px;letter-spacing:0;white-space:nowrap}

/* Trang /cong-cu: ô đầu tràn ngang làm điểm nhấn, phần còn lại lưới hai cột —
   xếp dọc một cột như trước thì bốn ô trải dài, phải cuộn mới thấy hết. */
.cc-luoi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-luoi .cc-o:first-child{grid-column:1/-1;background:linear-gradient(140deg,var(--o-cacao),var(--o-spice));
  border-color:var(--o-spice);color:var(--o-sand)}
.cc-luoi .cc-o:first-child .m{color:rgba(255,255,255,.72)}
.cc-luoi .cc-o:first-child .n{color:#fff}

/* ── Khối Chợ trên trang chủ site mẹ ─────────────────────────────────────── */
.odcho{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.odcho-o{display:block;border:1px solid #E8DFCC;border-radius:10px;overflow:hidden;background:#fff}
.odcho-o .a{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:#F3E9D6}
.odcho-o .a img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;margin:0}
.odcho-o .a.nen{display:flex;align-items:center;justify-content:center;font-size:24px}
.odcho-o .t{display:block;padding:7px 8px 9px}
.odcho-o b{display:block;font-size:9.6px;line-height:1.32;font-weight:700;color:#2A1D10;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.odcho-o .g{display:block;font-size:10.4px;font-weight:800;color:var(--o-spice);margin-top:3px}
.odcho-o .m{display:block;font-size:8.2px;color:#8A7B6B;margin-top:1px}
@media (min-width:760px){.odcho{grid-template-columns:repeat(4,1fr)}}

/* Trang một thuật ngữ là trang ĐÍCH của tìm kiếm — tiêu đề phải rõ là trang chi
   tiết, không bằng cỡ tiêu đề danh sách. */
.cc-tu h1{margin-bottom:5px}

/* Tiêu đề trang liên hệ vốn to gấp đôi tiêu đề các trang khác — nó dùng lớp riêng
   `contact-hero` với cỡ của bộ app.css. Quy về đúng thang trang trong. */
.contact-hero h1{font-size:17.5px;line-height:1.24;margin-bottom:5px}
.contact-hero p{font-size:10.2px;line-height:1.6}
.contact-hero{padding:14px 0 10px}
.contact-card{padding:13px}
.contact-card h2,.cta-head h2{font-size:12.6px;line-height:1.3}
.contact-info-item{font-size:10px}

/* 🔴 `.cc-luu b` và `.cc-gia b` đặt display:block để làm TIÊU ĐỀ khối, nhưng nó
   trúng luôn mọi chữ in đậm NẰM TRONG CÂU ở các mục bên dưới — câu bị chẻ làm đôi,
   phần sau bắt đầu bằng dấu phẩy. Chỉ nhắm đúng thẻ con TRỰC TIẾP. */
.cc-luu b,.cc-gia b{display:inline}
.cc-luu > b,.cc-gia > b{display:block;margin-bottom:5px}
.cc-luu li b,.cc-gia li b{display:inline}
/* Cùng lỗi: các khối này cũng nhắm `b` chung nên chữ đậm trong câu bị chẻ dòng. */
.cc-tu .gc b,.cc-tu .nh-lam b{display:inline}
.cc-tu .gc > b,.cc-tu .nh-lam > b{display:block}
.cc-2cot b{display:inline}
.cc-2cot > div > b{display:block}

/* ── Khối giới thiệu phần mềm ────────────────────────────────────────────── */
.odapp{border:1px solid #E8DFCC;border-radius:12px;background:#fff;overflow:hidden}
.odapp-so{display:grid;grid-template-columns:repeat(3,1fr);background:var(--o-cacao);color:var(--o-sand)}
.odapp-so>div{padding:11px 6px;text-align:center;border-right:1px solid rgba(250,243,228,.12)}
.odapp-so>div:last-child{border-right:0}
.odapp-so b{display:block;font-size:15px;line-height:1.15;color:var(--o-gold);font-weight:800}
.odapp-so span{display:block;font-size:7.2px;line-height:1.3;margin-top:3px;color:rgba(250,243,228,.75)}
.odapp-tn{list-style:none;margin:0;padding:10px 11px 4px}
.odapp-tn li{display:flex;gap:7px;align-items:flex-start;margin-bottom:8px;font-size:9.6px;line-height:1.5;color:#5A4636}
.odapp-tn .e{flex:0 0 auto;font-size:12px;line-height:1.2}
.odapp-tn b{color:#2A1D10;font-weight:700}
.odapp-nut{padding:0 11px 12px}
.odapp-nut a{display:inline-block;padding:8px 16px;border-radius:9px;background:var(--o-spice);
  color:#fff;font-size:10px;font-weight:700}
@media (min-width:760px){.odapp-tn{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}}

/* Biểu tượng công cụ: SVG một nét, ăn màu thương hiệu của site. */
.ccic{width:20px;height:20px;display:block}
.cc-o .e .ccic{width:22px;height:22px;color:var(--o-spice)}
.cc-luoi .cc-o:first-child .e .ccic{color:var(--o-gold)}
.gtool .e .ccic,.stool .e .ccic{width:15px;height:15px;color:var(--o-spice)}
.gtool.hero .e .ccic{color:var(--o-gold)}

/* Cỡ chữ giữ NGUYÊN thang gốc của bộ mk (thân bài 10,4px) để cụm này nhìn ngang
   grenada.vn — anh Thiện đối chiếu hai bên và chốt như vậy. Bản trước em tự nâng
   lên 12px nên chữ to hơn hẳn site gốc. */

/* 🔴 Trước dùng `.scroll :where(p)` — trúng luôn đoạn giới thiệu TRANG CHỦ và làm
   chữ ở đó to vọt lên. Thu hẹp về đúng vùng trang tĩnh (.page-static/.container),
   là những trang thật sự viết bằng thẻ trần. Trang chủ và trang bài không dính. */
.page-static :where(p),.container :where(p),.page-static :where(li),.container :where(li){font-size:10.4px;line-height:1.75}
.page-static :where(h1),.container :where(h1){font-size:14.5px}
.page-static :where(h2),.container :where(h2){font-size:11.6px}
.page-static :where(h3),.container :where(h3){font-size:10.8px}


/* Nằm trong khung bài thì link ăn luôn gạch chân của thân bài — hợp cho câu văn,
   nhưng trong công cụ thì cả danh sách, ô, nút đều bị gạch. Chỉ giữ gạch chân cho
   link nằm THẬT SỰ trong câu (khối giá, khối lưu ý). */
.in .od-cc a,.sart .in .od-cc a,.gart .in .od-cc a{text-decoration:none}
.in .cc-gia a,.in .cc-luu a{text-decoration:underline}

/* 🔴 GỐC của chuyện "công cụ chữ nhỏ một cách vô lý", tìm ra sau nhiều lần vá sai:
   mk-tune.css có `.od-cc{zoom:.62}` — bộ mk THU NHỎ 62% mọi thứ trong lớp đó,
   vì công cụ bên grenada dựng ở thang rộng hơn rồi thu lại cho vừa khung 270px.
   Công cụ của cụm này viết thẳng theo thang mk nên KHÔNG được thu lần nữa; đặt
   trùng tên lớp là dính phép thu đó, chữ 12px hoá ra 7,4px.
   Đây là lý do sửa cỡ chữ mãi không ăn — sai ở phép thu, không phải ở cỡ chữ. */

/* Khối phần mềm và khối chợ viết theo px thật nên đứng cạnh các khối của bộ mk
   (vốn ở thang 270px) thì to vọt hẳn lên. Quy về đúng thang. */
.odapp-so b{font-size:13px}
.odapp-so span{font-size:6.4px}
.odapp-tn li{font-size:8.4px;line-height:1.5}
.odapp-tn .e{font-size:10.4px}
.odapp-nut a{font-size:8.6px;padding:7px 13px}
.odcho-o b{font-size:8.6px}
.odcho-o .g{font-size:9.2px}
.odcho-o .m{font-size:7.4px}

/* ══ CHỐT THANG — một bảng duy nhất, không vá thêm ══════════════════════════
   Khung mk = 270px, phóng ~1,44 lần ở màn 390. Nhân 1,44 để ra cỡ thật.
   Thân bài 12px → 17px thật, là mốc anh Thiện đã duyệt. Mọi thứ khác neo vào đó. */

/* Tiêu đề trong vùng công cụ: sau khi gỡ cỡ tự đặt, h1/h2 rơi về mặc định của
   trình duyệt (2em) rồi nhân phép phóng nên to gấp đôi. Neo lại theo thang. */
.screen.o .od-cc h1{font-size:17px;line-height:1.26;margin:0 0 6px}
.screen.o .od-cc h2{font-size:13.4px;line-height:1.3;margin:16px 0 7px}
.screen.o .od-cc .cc-nhom{font-size:9.4px;letter-spacing:.08em}
.screen.o .od-cc .cc-duong{font-size:9.6px}
.screen.o .od-cc .cc-dau p{font-size:11.4px;line-height:1.62}
.screen.o .od-cc .cc-tuds b{font-size:12px}
.screen.o .od-cc .cc-tuds span{font-size:11px;line-height:1.5}
.screen.o .od-cc .cc-o .n{font-size:12px}
.screen.o .od-cc .cc-o .m{font-size:10.6px;line-height:1.45}
.screen.o .od-cc .cc-kq b{font-size:16px}
.screen.o .od-cc .cc-kq .nh{font-size:8.4px}
.screen.o .od-cc .cc-kq i{font-size:9px}
.screen.o .od-cc .cc-bang table{font-size:9.2px}
.screen.o .od-cc .cc-bang th{font-size:8.6px}
.screen.o .od-cc .cc-moc a,.screen.o .od-cc .cc-thang a{font-size:10.4px}
.screen.o .od-cc input,.screen.o .od-cc select,.screen.o .od-cc button{font-size:11px}

/* Thẻ (tag) cuối bài — nằm trong khung bài nên ăn 12px rồi phóng, hoá ra to bằng
   chữ tiêu đề. Thẻ là nhãn phụ, phải nhỏ hơn thân bài. */
.screen.o .gtags a,.screen.o .stags a,.screen.o .gtags span,.screen.o .stags span{font-size:8.8px;line-height:1.3}

/* Trang tĩnh: 11,6px vẫn hơi lớn so với thân bài sau khi phóng — cho bằng đúng. */
.page-static :where(p),.container :where(p),.page-static :where(li),.container :where(li){font-size:10.4px;line-height:1.75}
.page-static :where(h1),.container :where(h1){font-size:14.5px}
.page-static :where(h2),.container :where(h2){font-size:11.6px}
.page-static :where(h3),.container :where(h3){font-size:10.8px}

/* `.od-cc` nằm trong `.in` — khung bài đã có đệm ngang rồi, đệm thêm lần nữa
   làm dòng chữ ngắn hơn hẳn trang bài; cùng cỡ chữ mà nhìn ra to hơn vì xuống
   dòng sớm. Bỏ đệm thừa để hai trang có đúng một bề rộng dòng. */
.screen.o .od-cc{padding:0;max-width:none}
.screen.o .sart .in .od-cc,.screen.o .gart .in .od-cc{margin:0}

/* ══ ĐỒNG NHẤT TUYỆT ĐỐI với thân bài ═══════════════════════════════════════
   Đo thật bằng pixel (04/09): chữ trong công cụ cao 18px còn thân bài 15px, dù
   CSS ghi 11px và 12px. Nguyên nhân là các quy tắc rải rác chồng nhau qua nhiều
   lần vá, không quy tắc nào chắc thắng.
   Cách chấm dứt: BẮT mọi phần tử trong vùng công cụ kế thừa đúng cỡ của khung
   bài, rồi chỉ đặt lại cho vài vai trò riêng. Không còn con số rời rạc để lệch. */
.screen.o .od-cc,
.screen.o .od-cc p,
.screen.o .od-cc li,
.screen.o .od-cc span,
.screen.o .od-cc b,
.screen.o .od-cc div,
.screen.o .od-cc td,
.screen.o .od-cc label,
.screen.o .od-cc a{font-size:inherit;line-height:inherit}

.screen.o .od-cc{font-size:10.4px;line-height:1.75}
.screen.o .od-cc h1{font-size:14.5px;line-height:1.26}
.screen.o .od-cc h2{font-size:11.6px;line-height:1.3}
.screen.o .od-cc .cc-duong,
.screen.o .od-cc .cc-nhom,
.screen.o .od-cc .cc-kq .nh,
.screen.o .od-cc .cc-nn .kh,
.screen.o .od-cc .cc-bang th,
.screen.o .od-cc .cc-gia li.nh,
.screen.o .od-cc .cc-tu .nh{font-size:9px;line-height:1.4}
.screen.o .od-cc .cc-kq b{font-size:13.4px;line-height:1.2}
.screen.o .od-cc .cc-kq i,
.screen.o .od-cc .cc-o .m,
.screen.o .od-cc .cc-tuds span,
.screen.o .od-cc .cc-bang .p{font-size:9.2px;line-height:1.5}
.screen.o .od-cc .cc-bang table{font-size:9.2px}
.screen.o .od-cc input,
.screen.o .od-cc select,
.screen.o .od-cc button,
.screen.o .od-cc .cc-moc a,
.screen.o .od-cc .cc-thang a{font-size:9.6px}

/* Thẻ video: tiêu đề đang lớn hơn hẳn phần chữ quanh nó — nó là nhãn thẻ, không
   phải tiêu đề mục, nên phải nhỏ hơn thân bài một bậc. */
.screen.o .gpart .gp h4{font-size:8.8px;line-height:1.34}
.screen.o .gpart .gp p{font-size:7.8px;line-height:1.45}
.screen.o .gpart .gp .tx{padding:6px 7px 8px}

/* Trang liên hệ dùng bộ lớp riêng của app.css nên lọt khỏi mọi lần chỉnh trước:
   tiêu đề to gấp đôi và chữ còn màu xanh đen của cụm gốc. */
.screen.o .contact-hero h1{font-size:14.5px;line-height:1.26;color:var(--o-cacao)}
.screen.o .contact-hero p{font-size:10.4px;line-height:1.7;color:#5A4636}
.screen.o .contact-hero{padding:12px 0 8px}
.screen.o .contact-card h2,.screen.o .cta-head h2{font-size:11.6px;color:var(--o-cacao)}
.screen.o .contact-card p,.screen.o .cta-head p{font-size:10.4px;color:#5A4636}
.screen.o .contact-card,.screen.o .cta-card{padding:12px}
.screen.o .contact-info-item,.screen.o .cta-field label{font-size:10.4px;color:#3A2820}
.screen.o .contact-grid input,.screen.o .contact-grid textarea,
.screen.o .cta-field input,.screen.o .cta-field textarea{font-size:10.4px}
.screen.o .btn-submit,.screen.o .btn-primary,.screen.o .btn-accent{font-size:10.4px;background:var(--o-spice);border-color:var(--o-spice)}

/* Bố trí công cụ: cỡ chữ đã khớp thân bài, nhưng ô và form còn thưa nên khối nào
   cũng chiếm nhiều chỗ, nhìn "to". Siết lại theo nhịp của bộ mk. */
.screen.o .od-cc .cc-form{padding:9px;gap:7px;border-radius:9px;margin-bottom:11px}
.screen.o .od-cc .cc-form input[type=number],.screen.o .od-cc .cc-form select{padding:6px 8px;border-radius:7px;margin-top:3px}
.screen.o .od-cc .cc-form button{padding:7px 14px;border-radius:8px}
.screen.o .od-cc .cc-kq{gap:6px;margin-bottom:11px}
.screen.o .od-cc .cc-kq .o{padding:9px 10px;border-radius:9px}
.screen.o .od-cc .cc-luu,.screen.o .od-cc .cc-gia{padding:10px;border-radius:9px;margin-bottom:9px}
.screen.o .od-cc .cc-tick{padding:9px;border-radius:9px;gap:0}
.screen.o .od-cc .cc-tick label{padding:6px 3px}
.screen.o .od-cc .cc-o{padding:9px;border-radius:9px}
.screen.o .od-cc .cc-luoi{gap:6px}
.screen.o .od-cc .cc-tuds a{padding:8px 2px}
.screen.o .od-cc .cc-nhom{margin:13px 0 6px}
.screen.o .od-cc .cc-dau p{margin-bottom:11px}
.screen.o .od-cc .cc-thang a{width:26px;height:26px;border-radius:7px}
.screen.o .od-cc .cc-2cot>div{padding:10px}
.screen.o .od-cc .cc-nn{padding:10px;border-radius:9px;margin-bottom:7px}

/* Trang danh sách công cụ: mô tả một dòng như grenada, không để hai ba dòng làm ô
   cao gấp đôi. */
.screen.o .gtools a,.screen.o .gtool{text-decoration:none}
.screen.o .gtool p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.screen.o .gtool .e .ccic{width:14px;height:14px}
.screen.o .gtool.hero .e .ccic{width:16px;height:16px}

/* ── Nút phát trên ẢNH THUMBNAIL của thẻ video ──────────────────────────────
   Nút play đã có trên ảnh CHIA SẺ, nhưng thumbnail trên trang vẫn là ảnh tĩnh nên
   nhìn không khác thẻ bài chữ. Chồng nút bằng CSS: không phải sinh lại ảnh. */
.screen.o .gpart .gp .a{position:relative;display:block}
.screen.o .gpart .gp .a img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;margin:0}
.screen.o .gpart .gp.co-play .a::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;border-radius:50%;background:rgba(20,14,8,.5);
  box-shadow:0 0 0 1.4px rgba(255,255,255,.9);pointer-events:none}
.screen.o .gpart .gp.co-play .a::before{
  content:"";position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  transform:translate(-32%,-50%);
  border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff}

/* ══ OD_SHOP_v2 — cửa hàng ══════════════════════════════════════════════════
   Cỡ chữ neo vào thang mk như mọi nơi khác; ở đây chỉ khai bố cục và màu.
   v2: thẻ sản phẩm là THẺ <a> bấm được (v1 nhét ô số + nút Thêm vào thẻ nên
   không có chỗ nào để đọc kỹ trước khi mua), thêm trang chi tiết và giỏ mới. */
/* Ba trang bán hàng tự dựng khung riêng nên KHÔNG ăn lề của .gsec —
   thiếu dòng này là chữ và thẻ dính sát mép màn hình. */
.od-ch,.od-pd,.od-gio-tr{padding:15px 15px 22px}
.od-h1{font-size:13px;font-weight:800;color:var(--o-cacao);margin:0 0 6px;letter-spacing:.01em}
.od-ch-mo{font-size:9.4px;line-height:1.62;color:#7A6A58;margin:0 0 12px}

.od-sp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.od-sp-o{display:block;border:1px solid #E8DFCC;border-radius:11px;overflow:hidden;background:#fff;
  text-decoration:none;color:inherit}
.od-sp-o .a{display:block;position:relative;width:100%;aspect-ratio:4/3;background:#F5EDDD;overflow:hidden}
.od-sp-o .a img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.od-sp-o .a .nen{display:flex;align-items:center;justify-content:center;height:100%;font-size:26px}
.od-sp-o .a .het{position:absolute;left:6px;top:6px;padding:2px 6px;border-radius:5px;
  background:rgba(42,29,16,.86);color:#fff;font-size:7.4px;font-style:normal;font-weight:700}
.od-sp-o .t{display:block;padding:8px 9px 10px}
.od-sp-o b{display:block;font-size:9.6px;line-height:1.34;color:#2A1D10}
.od-sp-o .p{display:-webkit-box;margin:3px 0 0;font-size:8px;line-height:1.45;color:#8A7B6B;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Chuỗi giá '2.900.000₫/tổ' là một khối không ngắt được; ở thẻ hai cột chỉ vừa
   khi hạ cỡ chữ, không thì '/tổ' bị cắt mất. */
.od-sp-o .g{display:block;font-size:10.4px;font-weight:800;color:var(--o-spice);
  margin:6px 0 3px;overflow-wrap:anywhere}
.od-sp-o .g i{font-size:7.6px;font-weight:500;font-style:normal;color:#8A7B6B}
.od-sp-o .xem{display:block;font-size:8.2px;font-weight:700;color:var(--o-gold)}

.od-sp-thanh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;
  padding:9px 11px;border-radius:10px;background:var(--o-cacao);color:var(--o-sand);font-size:9.4px}
.od-sp-thanh b{color:var(--o-gold);font-size:11px}
.nut{display:inline-block;padding:7px 14px;border-radius:8px;background:var(--o-spice);color:#fff;
  font-size:9.6px;font-weight:700}
.od-sp-thanh .nut{background:var(--o-gold);color:#2A1D10}

/* ── nút mua chung: một cỡ, một màu, dùng khắp phần bán hàng ── */
.od-nut-mua{display:inline-block;padding:9px 18px;border:0;border-radius:9px;background:var(--o-spice);
  color:#fff;font:inherit;font-size:10.4px;font-weight:800;cursor:pointer;text-decoration:none;text-align:center}
.od-nut-phu{display:inline-block;padding:6px 13px;border:1px solid #D9CCB4;border-radius:8px;background:#fff;
  color:#4A3728;font:inherit;font-size:9.2px;font-weight:600;cursor:pointer}

/* ── ô số lượng − 1 + : mũi tên gốc của <input type=number> quá nhỏ trên iPhone ── */
.od-so{display:inline-flex;align-items:stretch;border:1px solid #E0D5C0;border-radius:8px;overflow:hidden;background:#fff}
.od-so button{width:26px;border:0;background:#FBF4E6;color:#4A3728;font:inherit;font-size:13px;
  font-weight:700;line-height:1;cursor:pointer}
.od-so input{width:34px;padding:6px 0;border:0;border-left:1px solid #EFE6D6;border-right:1px solid #EFE6D6;
  font:inherit;font-size:10px;text-align:center;background:#fff;-moz-appearance:textfield}
.od-so input::-webkit-outer-spin-button,.od-so input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ══ OD_SPCHITIET_v1 — trang một sản phẩm ══ */
.od-pd-bc{font-size:8.4px;color:#8A7B6B;margin:0 0 8px}
.od-pd-bc a{color:var(--o-spice);text-decoration:none}
.od-pd-bc span{margin:0 3px;color:#C4B79F}
.od-pd-bc b{color:#4A3728;font-weight:600}
.od-pd-anh{border:1px solid #E8DFCC;border-radius:12px;overflow:hidden;background:#F5EDDD}
/* Khung ảnh dựng bằng padding-top chứ không bằng `aspect-ratio`: thuộc tính đó
   không ăn ở đây (ảnh vẫn cao gấp bốn lần khung), còn padding-top thì chắc chắn. */
.od-pd-anh .lon{display:block;position:relative;width:100%;height:0;padding-top:66.7%;overflow:hidden}
.od-pd-anh .lon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;margin:0;border-radius:0}
.od-pd-nho{display:flex;gap:5px;padding:6px;background:#fff;border-top:1px solid #EFE6D6}
.od-pd-nho button{width:44px;height:34px;padding:0;border:1px solid #E8DFCC;border-radius:6px;
  overflow:hidden;background:#F5EDDD;cursor:pointer}
.od-pd-nho button.on{border-color:var(--o-spice);box-shadow:0 0 0 1px var(--o-spice)}
.od-pd-nho img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.od-pd-ten{font-size:14px;font-weight:800;line-height:1.3;color:var(--o-cacao);margin:11px 0 0}
.od-pd-mo{font-size:9.6px;line-height:1.62;color:#7A6A58;margin:5px 0 0}
.od-pd-gia{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.od-pd-gia b{font-size:17px;font-weight:800;color:var(--o-spice);line-height:1}
.od-pd-gia i{font-size:8.6px;font-style:normal;color:#8A7B6B}
.od-pd-gia s{font-size:9.4px;color:#A99A88}
.od-pd-gia em{font-size:8.2px;font-style:normal;font-weight:700;color:#fff;background:#A8321B;
  padding:2px 6px;border-radius:5px}
.od-pd-kho{font-size:8.8px;font-weight:600;margin-bottom:11px}
.od-pd-kho.co{color:#177A45}
.od-pd-kho.het{color:#A8321B}
.od-pd-mua{display:flex;align-items:center;gap:8px;margin:0 0 13px}
.od-pd-mua .od-nut-mua{flex:1 1 auto;min-width:0}
.od-pd-cam{list-style:none;display:grid;gap:1px;margin:0 0 14px;padding:0;
  border:1px solid #E8DFCC;border-radius:11px;overflow:hidden;background:#EFE6D6}
.od-pd-cam li{display:grid;grid-template-columns:22px 1fr;gap:2px 8px;padding:8px 10px;background:#fff}
.od-pd-cam span{grid-row:span 2;font-size:14px;line-height:1}
.od-pd-cam b{font-size:9.4px;color:#2A1D10}
.od-pd-cam i{font-size:8.4px;font-style:normal;line-height:1.5;color:#8A7B6B}
.od-pd-noi{font-size:10.4px;line-height:1.75;color:#4A3728}
.od-pd-noi h2{font-size:11.6px;font-weight:800;color:var(--o-cacao);margin:15px 0 6px}
.od-pd-noi h3{font-size:10.4px;font-weight:800;color:#3A2820;margin:12px 0 4px}
.od-pd-noi p{margin:0 0 8px}
.od-pd-noi ul{margin:0 0 9px;padding-left:16px}
.od-pd-noi li{margin-bottom:4px}
/* ⚠️ `min-width:0` KHÔNG được bỏ: mk.css có luật toàn cục `table{min-width:660px}`,
   thiếu dòng này thì bảng thông số đẩy cả trang rộng ra, nút mua tràn khỏi màn. */
.od-pd-noi table{width:100%;max-width:100%;min-width:0;table-layout:fixed;
  border-collapse:collapse;margin:0 0 10px;font-size:9.4px}
.od-pd-noi th,.od-pd-noi td{padding:5px 7px;border:1px solid #EFE6D6;text-align:left;
  vertical-align:top;overflow-wrap:anywhere}
.od-pd-noi th{background:#FBF4E6;font-weight:700;width:38%;color:#3A2820}
.od-pd-khac{margin-top:18px}
.od-pd-khac h2{font-size:11.6px;font-weight:800;color:var(--o-cacao);margin:0 0 8px}
.od-pd-khac .od-sp{grid-template-columns:repeat(3,minmax(0,1fr))}
.od-pd-khac .od-sp-o .p{display:none}
/* Thẻ hẹp ~118px: chuỗi giá "2.900.000₫/tổ" là một khối không ngắt được nên
   tràn ra ngoài thẻ. Ở thẻ gợi ý thì bỏ đơn vị và hạ cỡ chữ cho vừa. */
.od-pd-khac .od-sp-o .g{font-size:9.4px;overflow-wrap:anywhere}
.od-pd-khac .od-sp-o .g i{display:none}
.od-pd-khac .od-sp-o .xem{display:none}
/* Thanh mua bám đáy. Dùng `sticky` chứ KHÔNG dùng `fixed`: cả khung .screen
   đang bị `zoom` co giãn, mà `fixed` neo theo cửa sổ thật nên lệch hẳn khỏi
   khung. `sticky` neo theo vùng cuộn nên co giãn cùng khung. */
.od-pd-day{position:sticky;bottom:0;z-index:40;margin:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 13px;background:rgba(255,255,255,.97);border-top:1px solid #E8DFCC;
  box-shadow:0 -3px 14px rgba(42,29,16,.09)}
.od-pd-day b{font-size:13px;font-weight:800;color:var(--o-spice)}
.od-pd-day i{font-size:8.4px;font-style:normal;color:#8A7B6B}
.od-pd-day .od-nut-mua{padding:8px 20px}

/* ══ OD_GIO_v2 — giỏ hàng ══ */
.od-gio-trong{text-align:center;padding:26px 10px}
.od-gio-trong span{font-size:34px;display:block;margin-bottom:8px}
.od-gio-trong p{font-size:10.4px;color:#8A7B6B;margin:0 0 12px}
.od-gio-d{display:grid;grid-template-columns:58px 1fr auto;gap:9px;align-items:start;
  padding:10px 0;border-bottom:1px solid #EFE6D6}
.od-gio-d .a{display:block;width:58px;height:58px;border-radius:8px;overflow:hidden;background:#F5EDDD}
.od-gio-d .a img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
/* min-width:0 để cột giữa co lại được — thiếu nó thì hàng nút −/+ và giá đẩy
   nút Xoá văng ra ngoài mép màn hình. */
.od-gio-d .t{min-width:0}
.od-gio-d .ten{display:block;font-size:9.6px;font-weight:700;line-height:1.34;color:#2A1D10;text-decoration:none}
.od-gio-d .dg{font-size:8.2px;color:#8A7B6B;margin-top:2px}
/* Cột giữa chỉ còn ~118px trên màn 390: ô −/+ và giá không đứng cùng hàng được,
   nên cho phép xuống dòng thay vì để chúng đè lên nhau. */
.od-gio-d .h{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-top:6px}
.od-gio-d .od-so{flex:0 0 auto}
.od-gio-d .tt{margin-left:auto;white-space:nowrap}
.od-gio-d .tt{font-size:10.4px;font-weight:800;color:var(--o-spice)}
.od-gio-d .xoa{align-self:start;padding:3px 7px;border:1px solid #E4D7C4;border-radius:6px;
  background:#fff;color:#96725F;font:inherit;font-size:8.2px;cursor:pointer}
.od-gio-tong{margin:12px 0;padding:10px 11px;border-radius:10px;background:#FBF4E6;font-size:9.4px}
.od-gio-tong .d{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.od-gio-tong .d.nho i{font-style:normal;font-size:8.4px;color:#8A7B6B}
.od-gio-tong .d.cong{border-top:1px solid #E4DACA;margin-top:5px;padding-top:6px;font-weight:800}
.od-gio-tong .d.cong b{font-size:12.6px;color:var(--o-spice)}
.od-gio-di{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;padding-bottom:18px}
.od-gio-di .od-nut-mua{flex:1 1 100%}
.od-gio-di .lien{flex:0 0 auto}
.od-gio-di .lien{font-size:9.2px;color:var(--o-spice)}

.od-tt-tom{padding:10px 11px;border-radius:10px;background:#FBF4E6;margin-bottom:11px;font-size:9.4px}
.od-tt-tom>div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.od-tt-tom .tong{border-top:1px solid #E4DACA;margin-top:5px;padding-top:6px;font-weight:800}
.od-tt-tom .tong b{color:var(--o-spice);font-size:11px}

.od-form{display:grid;gap:8px;position:relative}
.od-form label{display:block;font-size:9.4px;font-weight:600;color:#3A2820}
.od-form input,.od-form textarea{width:100%;margin-top:3px;padding:7px 9px;border:1px solid #E0D5C0;
  border-radius:8px;font:inherit;font-size:9.6px;background:#fff;box-sizing:border-box}
.od-form button{margin-top:4px;padding:9px 18px;border:0;border-radius:9px;background:var(--o-spice);
  color:#fff;font:inherit;font-size:10.4px;font-weight:700;cursor:pointer;justify-self:start}
.od-form-nho{font-size:8.4px;line-height:1.55;color:#8A7B6B;margin:2px 0 0}
.od-loi{padding:8px 10px;border-radius:8px;background:#FBEEE9;border-left:3px solid #A8321B;
  font-size:9.4px;margin-bottom:10px}

.od-don{padding:10px 11px;border-radius:10px;border:1px solid #E4DACA;background:#fff;margin-bottom:11px;font-size:9.4px}
.od-don .ma{font-size:9.4px;color:#8A7B6B;margin-bottom:7px}
.od-don .ma b{font-size:12px;color:var(--o-spice);letter-spacing:.02em}
.od-don .d{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.od-don .tong{border-top:1px solid #E4DACA;margin-top:5px;padding-top:6px;font-weight:800}
.od-qr{display:flex;gap:12px;align-items:flex-start;padding:11px;border-radius:10px;background:#FBF4E6}
.od-qr img{width:132px;height:auto;border-radius:8px;background:#fff;margin:0;flex:0 0 auto}
.od-qr .tx{font-size:9px;line-height:1.6;color:#3A2820}
.od-qr .tx b{color:#2A1D10}
.od-qr .nho{font-size:8.2px;color:#8A7B6B;margin:5px 0 0}
@media (min-width:760px){.od-sp{grid-template-columns:repeat(4,1fr)}}

/* ══ TB_GIO_v1 — nút giỏ trên topbar + huy hiệu số món ══════════════════════ */
.tb-act .ib.gio{position:relative}
.tb-act .ib.gio em{position:absolute;top:-3px;right:-4px;min-width:13px;height:13px;padding:0 3px;
  border-radius:7px;background:var(--o-gold);color:#2A1D10;font-size:7.6px;font-weight:800;
  font-style:normal;line-height:13px;text-align:center;box-sizing:border-box}
.bn a{position:relative}
.bn .bn-so{position:absolute;top:2px;left:50%;margin-left:3px;min-width:12px;height:12px;padding:0 3px;
  border-radius:6px;background:var(--o-spice);color:#fff;font-size:7.2px;font-weight:800;
  font-style:normal;line-height:12px;text-align:center;box-sizing:border-box}

/* FT_KHOANG_v1 — chân trang nền tối bắt đầu ngay sát khối cuối của bài/trang,
   nhìn như bị dính vào nhau. Chừa một khoảng cho mọi trang của cụm, không phải
   sửa từng trang một. */
.screen.o .scroll > .ft{margin-top:16px}

/* ══ DRAWER_ODAY_v1 — hàng ô vuông cuối không để lại ô trống ═══════════════
   Lưới 3 cột cố định: 5 mục thì hàng cuối có 2 ô và một khoảng trống bên phải,
   nhìn như thiếu mất một mục. Chuyển sang flex cho hàng cuối tự giãn ra cho đầy. */
/* ⚠️ Drawer nằm trong #mkdr, KHÔNG nằm trong .screen — nó được đưa ra ngoài
   khung zoom (xem MK_DRAWER_OUT_v1). Viết .screen.o là selector không bao giờ khớp. */
#mkdr .dgrid{display:flex;flex-wrap:wrap;gap:5px;padding:9px 11px 2px}
#mkdr .dtile{flex:1 1 calc(33.333% - 4px);min-width:calc(33.333% - 4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Hai ô ở hàng cuối thì mỗi ô ăn nửa hàng, không để hở. */
#mkdr .dgrid > .dtile:nth-last-child(2):nth-child(3n+1),
#mkdr .dgrid > .dtile:nth-last-child(1):nth-child(3n+2){flex-basis:calc(50% - 3px);min-width:0}
/* Một ô lẻ ở hàng cuối thì chiếm trọn hàng. */
#mkdr .dgrid > .dtile:nth-last-child(1):nth-child(3n+1){flex-basis:100%;min-width:0}

/* Dòng ghi nguồn ảnh/video dưới bài — nhẹ, không tranh chỗ với nội dung. */
.od-nguon{margin-top:14px;padding-top:9px;border-top:1px solid #EFE6D6;
  font-size:8.8px;line-height:1.6;color:#8A7B6B}
.od-nguon a{color:var(--o-spice);font-weight:600}

/* ══ TB_CO_NGU_v1 — cờ chuyển ngữ trên topbar ═════════════════════════════
   Không phải nút tròn như các nút khác: cần hiện cả cờ lẫn mã ngữ để người ta
   biết bấm vào sẽ sang bản nào, nên nó là một viên thuốc hẹp. */
/* Chỉ hiện lá cờ, bỏ mã ngữ: topbar đã có 4 nút, thêm hai chữ nữa là tên miền
   bị cắt cụt ("ARONBEE.CO…"). Nội dung đầy đủ vẫn nằm ở title và aria-label. */
.tb-act .ib.ngu{display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(217,162,27,.42);
  background:rgba(255,255,255,.06);text-decoration:none}
.tb-act .ib.ngu .co{font-size:11px;line-height:1}

/* Tên miền dài thì hạ cỡ chữ cho vừa topbar, thay vì bị cắt bằng dấu ba chấm. */
.screen.o .tb-name.vua{font-size:9.4px}
.screen.o .tb-name.dai{font-size:8.4px;letter-spacing:0}

/* ══ OD_TOUR_v1 — trang tour trải nghiệm ═══════════════════════════════════ */
.od-tour,.od-tour-xong{padding:15px 15px 22px}

.od-tour-dau{padding:15px 14px 16px;border-radius:14px;color:#fff;
  background:linear-gradient(150deg,var(--o-spice),var(--o-cacao));position:relative;overflow:hidden}
.od-tour-dau .nhan{display:inline-block;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:7.8px;font-weight:700;letter-spacing:.04em}
.od-tour-dau h1{margin:8px 0 0;font-size:17px;line-height:1.25;font-weight:800}
.od-tour-dau .mo{margin:7px 0 0;font-size:9.8px;line-height:1.62;color:rgba(255,255,255,.86)}
.od-tour-dau .gia{display:flex;align-items:baseline;gap:7px;margin:12px 0 11px}
.od-tour-dau .gia s{font-size:9.6px;color:rgba(255,255,255,.55)}
.od-tour-dau .gia b{font-size:20px;font-weight:800;color:var(--o-gold);line-height:1}
.od-tour-dau .gia i{font-size:8.6px;font-style:normal;color:rgba(255,255,255,.72)}
.od-tour-dau .od-nut-mua{background:var(--o-gold);color:#2A1D10}

.od-tour-manh{list-style:none;display:grid;gap:1px;margin:12px 0 0;padding:0;
  border:1px solid #E8DFCC;border-radius:12px;overflow:hidden;background:#EFE6D6}
.od-tour-manh li{display:grid;grid-template-columns:24px 1fr;gap:2px 9px;padding:10px 11px;background:#fff}
.od-tour-manh span{grid-row:span 2;font-size:15px;line-height:1}
.od-tour-manh b{font-size:9.8px;line-height:1.4;color:#2A1D10}
.od-tour-manh i{font-size:8.6px;font-style:normal;line-height:1.55;color:#8A7B6B}

.od-tour-khung{margin-top:20px}
.od-tour-khung h2{font-size:12.6px;font-weight:800;color:var(--o-cacao);margin:0 0 9px;letter-spacing:.01em}

.od-tour-lich{list-style:none;margin:0;padding:0 0 0 15px;position:relative}
.od-tour-lich:before{content:"";position:absolute;left:3px;top:5px;bottom:5px;width:2px;
  background:linear-gradient(var(--o-gold),transparent)}
.od-tour-lich li{position:relative;padding:0 0 13px}
.od-tour-lich li:before{content:"";position:absolute;left:-15px;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--o-spice)}
.od-tour-lich b{display:block;font-size:9.8px;color:#2A1D10;line-height:1.4}
.od-tour-lich span{display:block;margin-top:2px;font-size:8.8px;line-height:1.6;color:#8A7B6B}

.od-tour-anh{margin-top:20px}
.od-tour-anh h2{font-size:12.6px;font-weight:800;color:var(--o-cacao);margin:0 0 9px}
.od-tour-anh .luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.od-tour-anh figure{margin:0;border:1px solid #E8DFCC;border-radius:10px;overflow:hidden;background:#fff}
.od-tour-anh .lon,.od-tour-anh figure img{display:block;width:100%;aspect-ratio:4/3;
  object-fit:cover;margin:0;border-radius:0}
.od-tour-anh figcaption{padding:6px 8px;font-size:7.8px;line-height:1.4;color:#8A7B6B;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.od-tour-anh .ghi{margin:8px 0 0;font-size:8.2px;color:#A0917E}

.od-tour-gom{display:grid;gap:10px}
.od-tour-gom ul{list-style:none;margin:0;padding:0}
.od-tour-gom li{position:relative;padding:0 0 5px 17px;font-size:9.4px;line-height:1.55;color:#4A3728}
.od-tour-gom .co li:before{content:"✓";position:absolute;left:0;color:#177A45;font-weight:800}
.od-tour-gom .khong li{color:#8A7B6B}
.od-tour-gom .khong li:before{content:"×";position:absolute;left:0;color:#A8321B;font-weight:800}

.od-tour-hd h3{font-size:10px;font-weight:800;color:#3A2820;margin:11px 0 3px}
.od-tour-hd p{margin:0;font-size:9.4px;line-height:1.65;color:#6B5C4C}

.od-tour-form{margin-top:22px;padding:14px 13px 16px;border:1px solid #E8DFCC;
  border-radius:14px;background:#FBF4E6}
.od-tour-form h2{font-size:12.6px;font-weight:800;color:var(--o-cacao);margin:0 0 4px}
.od-tour-form .mo{margin:0 0 12px;font-size:9.2px;line-height:1.6;color:#8A7B6B}
.od-tour-form .od-nut-mua{width:100%}
.od-tour-form .od-so{margin-top:3px}

.od-tour-tinh{margin:4px 0 2px;padding:10px 11px;border-radius:10px;background:#fff;
  border:1px solid #EFE6D6;font-size:9.4px}
.od-tour-tinh>div{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:#6B5C4C}
.od-tour-tinh .tong{border-top:1px solid #EFE6D6;margin-top:5px;padding-top:6px;font-weight:800;color:#2A1D10}
.od-tour-tinh .tong b{font-size:12.6px;color:var(--o-spice)}
.od-tour-tinh .qua{display:block;margin-top:5px;font-size:8.4px;color:#177A45;font-weight:600}

/* ── trang xác nhận ── */
.od-tour-ok{text-align:center;padding:14px 10px 16px}
.od-tour-ok span{font-size:30px;display:block;margin-bottom:6px}
.od-tour-ok h1{margin:0;font-size:14px;font-weight:800;color:var(--o-cacao)}
.od-tour-ok p{margin:6px 0 0;font-size:9.6px;line-height:1.62;color:#6B5C4C}
.od-tour-thu{margin:10px 0 0;font-size:9px;color:#8A7B6B;text-align:center}
.od-tour-diachi{margin-top:16px;padding:11px 12px;border:1px solid #E8DFCC;border-radius:11px;background:#fff}
.od-tour-diachi b{font-size:9.8px;color:#2A1D10}
.od-tour-diachi p{margin:4px 0 8px;font-size:9px;line-height:1.6;color:#8A7B6B}
.od-tour-ve{margin:16px 0 0;text-align:center;font-size:9.2px}
.od-tour-ve a{color:var(--o-spice);font-weight:600}

/* Khối QR trên trang xác nhận tour: xếp DỌC, không xếp ngang.
   Xếp ngang thì mã QR ăn nửa bề rộng, phần chữ còn ~120px nên tiêu đề vỡ
   thành bốn dòng và số tài khoản bị ngắt giữa chừng. */
.od-tour-xong .od-qr{flex-direction:column;align-items:center;gap:10px;
  border:1px solid #E8DFCC;margin-top:14px}
.od-tour-xong .od-qr img{width:180px;flex:0 0 auto}
.od-tour-xong .od-qr .t{width:100%;font-size:9.2px;line-height:1.6;color:#4A3728}
.od-tour-xong .od-qr .t b{color:#2A1D10}
.od-tour-xong .od-qr .t>b{display:block;font-size:10.4px;margin-bottom:3px;text-align:center}
.od-tour-xong .od-qr .t p{margin:0 0 7px;font-size:8.8px;color:#8A7B6B;text-align:center}
.od-tour-xong .od-qr .t ul{list-style:none;margin:0;padding:9px 10px;border-radius:8px;
  background:#fff;border:1px solid #EFE6D6}
.od-tour-xong .od-qr .t li{padding:2px 0;font-size:8.8px;overflow-wrap:anywhere}

/* Thanh dưới 6 mục: nhãn hai chữ như "Trang chủ" bị ngắt xuống dòng, cao hơn
   các mục còn lại nên hàng lệch hẳn. Đủ 6 mục thì hạ cỡ chữ và cấm ngắt dòng.
   Chọn theo SỐ LƯỢNG con nên nav 5 mục không bị ảnh hưởng. */
.screen.o .bn a:first-child:nth-last-child(6),
.screen.o .bn a:first-child:nth-last-child(6) ~ a{padding-left:1px;padding-right:1px}
.screen.o .bn a:first-child:nth-last-child(6) span,
.screen.o .bn a:first-child:nth-last-child(6) ~ a span{font-size:5.6px;white-space:nowrap;
  letter-spacing:-.01em}