/* =====================================================================================================
   MÀU CHÍNH THƯƠNG HIỆU + NÚT PHẲNG + MỘT ĐỘ RỘNG + ĐẦU TRANG FULL  (chủ giao 23/10/2026)
   Tệp này nạp CUỐI CÙNG trong layout.ejs: đổi màu/nền/viền/bóng/độ rộng, KHÔNG đổi cỡ chữ/độ đậm.
   Phạm vi: trang công khai + khu tài khoản. Khu vận hành tối-vàng (.opsapp) và /quan-tri không bị đổi.
   ----------------------------------------------------------------------------------------------------
   1) MÀU CHÍNH = xanh dương của nút "Đặt hẹn" đầu trang (#548feb = --ds-blue-500, đo computed style).
      Chữ trắng trên #548feb chỉ đạt 3,23:1 (chưa đạt AA 4,5:1) → NỀN NÚT (chữ trắng) dùng bậc đậm hơn cùng tông
      --brand-btn #3672da (4,59:1); hover #2061d7 (5,6:1). #548feb vẫn là màu viền/focus/biểu tượng/nhấn sáng.
   2) Màu chức năng (VIP vàng, Flash hồng-cam, E-Voucher tím, labo xanh đậm, vật tư tím, tuyển dụng cyan,
      mint = xác thực/thành công/đang mở) chỉ còn là điểm nhấn NHỎ (huy hiệu, icon, viền thẻ) — không tô nút chính.
   3) Nút phẳng: không bóng, không gradient, không viền đáy 3D, không nhấc khối khi hover (chỉ đổi màu nền).
   4) MỘT độ rộng: --wrap 1320px, lề 24px; đầu trang rộng full.
   ===================================================================================================== */

:root {
  --brand: #548feb;            /* = --ds-blue-500: viền, focus, icon, nhấn sáng */
  --brand-btn: #3672da;        /* nền nút chính (chữ trắng đạt AA 4,59:1) */
  --brand-btn-h: #2061d7;      /* hover nút chính */
  --brand-ink: #2061d7;        /* chữ liên kết trên nền trắng (5,6:1) */
  --brand-50: #f1f4fd; --brand-100: #e6eefb; --brand-200: #a6c9ff; --brand-700: #164ba8;
  --wrap: 1320px;
  --ds-container: 1320px;
  --w: 1320px;
}

/* ---------- 1. MÀU CHÍNH: nút chính ---------- */
.btn-mint:not(.opsapp *), .btn-blue:not(.opsapp *), .btn-primary:not(.opsapp *),
body[data-sec] main .btn-mint:not(.opsapp *), body[data-sec] main .inclinic .btn-mint, body[data-sec] main a.btn-mint[href*="#datHen"],
.auth .frm .btn-mint, .chatbtn:not(.off):not(.opsapp *), .ds-btn--primary, .ds-btn.lb3-cta, .ds-btn.td3-go, .ds-btn.tr3-go,
.td3-page .jside .btn-mint, .td3-apply .btn-mint, .td3-detail .btn-mint, .td3-detail .bk .chat-go, .td3-detail .bk .btn.chat,
.finder .go, .sbar button, .hc-search button, .sbox2 .sbtn, .askf-submit, .pq .pq-btn.pri, .vt-cta, .vt-rfq button[type=submit],
.cms-form .btn-primary, .bk .hd:not([style]) ~ .bd .cms-form .btn-primary, .abc-form .cms-form .btn-block, .superbox .sb-r .btn,
.tg3.bg-plans .superbox .sb-r .btn, .bk3-go, .bk3-btn.pri, .bk3-btn.mint, .ast-in button, .ast-ho-f button,
.qbook .bd .btn, .qbook .bd button[type=submit], .cb-btn, .ast-fab, .vp-box .btn-mint, .nk-modal-box .btn-mint {
  background: var(--brand-btn) !important; background-image: none !important; border-color: var(--brand-btn) !important; color: #fff !important;
}
.btn-mint:not(.opsapp *):hover, .btn-blue:not(.opsapp *):hover, .btn-primary:not(.opsapp *):hover,
body[data-sec] main .btn-mint:not(.opsapp *):hover, body[data-sec] main .inclinic .btn-mint:hover, body[data-sec] main a.btn-mint[href*="#datHen"]:hover,
.auth .frm .btn-mint:hover, .chatbtn:not(.off):hover, .ds-btn--primary:hover, .ds-btn.lb3-cta:hover, .ds-btn.td3-go:hover, .ds-btn.tr3-go:hover,
.td3-page .jside .btn-mint:hover, .td3-apply .btn-mint:hover, .td3-detail .btn-mint:hover, .td3-detail .bk .chat-go:hover,
.finder .go:hover, .sbar button:hover, .hc-search button:hover, .sbox2 .sbtn:hover, .askf-submit:hover, .pq .pq-btn.pri:hover, .vt-cta:hover, .vt-rfq button[type=submit]:hover,
.cms-form .btn-primary:hover, .abc-form .cms-form .btn-block:hover, .superbox .sb-r .btn:hover, .bk3-go:hover, .bk3-btn.pri:hover, .bk3-btn.mint:hover,
.ast-in button:hover, .ast-ho-f button:hover, .qbook .bd .btn:hover, .qbook .bd button[type=submit]:hover, .cb-btn:hover, .ast-fab:hover {
  background: var(--brand-btn-h) !important; border-color: var(--brand-btn-h) !important; color: #fff !important;
}
/* nút nhấn mạnh trong đầu trang / ô tìm cũng dùng cùng bậc (đè luật `.hv-hd button { color: inherit }`) */
.hv-hd .ds-btn--primary, .hv-sx .ds-btn--primary { background: var(--brand-btn); color: #fff; }
.hv-hd .ds-btn--primary:hover, .hv-sx .ds-btn--primary:hover { background: var(--brand-btn-h); }
.ds-btn--ghost, .hv-hd .ds-btn--ghost { color: var(--brand-ink); }

/* nút nhỏ trên thẻ voucher / E-Voucher / Lấy mã: tông xanh nhạt (Flash giữ cam đào vì là danh tính Flash Sale) */
.v3-vc .ds-btn, .v3-ev .ds-btn { background: var(--brand-100); color: var(--brand-700); }
.v3-vc .ds-btn:hover, .v3-ev .ds-btn:hover { background: var(--brand-200); }
.btn-mint.btn-sm:not(.opsapp *) { color: #fff !important; }
.btn-or.btn-sm:not(.get):not(.opsapp *) { background: var(--brand-100); border-color: transparent; color: var(--brand-700); }
.btn-or.btn-sm:not(.get):not(.opsapp *):hover { background: var(--brand-btn); color: #fff; }

/* nút tím cũ (btn-violet) → xanh chính */
.btn-violet:not(.opsapp *) { background: var(--brand-btn) !important; color: #fff !important; }
.btn-violet:not(.opsapp *):hover { background: var(--brand-btn-h) !important; }
.cta-row.cta-vc { background: #fff6ec; }

/* gói VIP / nâng cấp: nút vẫn là xanh chính (vàng/xanh lá chỉ còn ở huy hiệu hạng) */
.pcard .btn-mint, .plan .btn-mint, .plans .btn-mint { background: var(--brand-btn) !important; }

/* trạng thái chọn: tab / chip / phân trang / phân đoạn */
.pill.on, .pill.on:hover, body[data-sec] .pill.on, body[data-sec] .tabs .tab.on, body[data-sec] .dm-page .pill.on { background: var(--brand-100); border-color: var(--brand-200); color: var(--brand-700); }
body[data-sec] .pill.on i, body[data-sec] .tab.on i { color: var(--brand-ink) !important; }
.pager a.on, body[data-sec] nav.pager a.on, .n.on, .n.on.edge { background: var(--brand-btn); border-color: var(--brand-btn); color: #fff; }
.seg button.on, .seg a.on { background: var(--brand-100); color: var(--brand-700); }
.ua-it.on { background: var(--brand-100); color: var(--brand-700); }
.ua-it.on > i:first-child { color: var(--brand-ink); }
.ua-it.on .ua-n { color: var(--brand-700); }
.pnx, .pnx[data-ac] { --ac: var(--brand-btn); --ac-d: var(--brand-btn-h); --ac-s: var(--brand-100); }
.dk-kinds a.on { background: var(--brand-btn); border-color: var(--brand-btn); color: #fff; }
.cl3 .ptabs a.on::after { background: var(--brand); }
.cl3 .ptabs a.on { color: var(--brand-ink); }
.ab-tabs button.on { border-bottom-color: var(--brand) !important; }

/* khung đặt hẹn bk3: bộ màu mặc định = xanh chính (trước là mint) */
.bk3 { --bk-ac: var(--brand-btn); --bk-ac-50: var(--brand-50); --bk-ac-100: var(--brand-100); --bk-ac-700: var(--brand-700); --bk-ac-2: var(--brand-btn); }
.bk3-go::after { display: none; }

/* viền focus chung */
:focus-visible:not(.opsapp *) { outline-color: var(--brand); }
a { text-decoration-color: currentColor; }

/* ô tìm trên đầu trang: viền 1,5px màu chính, focus rõ */
.hv-sx--hd .hv-sx-f, .hv-sx-f { border: 1.5px solid var(--brand); background: #fff; }
.hv-sx--hd .hv-sx-f:hover { border-color: var(--brand-btn-h); }
.hv-sx.is-open .hv-sx-f, .hv-sx-f:focus-within { border-color: var(--brand-btn-h); box-shadow: 0 0 0 3px rgba(84, 143, 235, .28); }

/* ---------- 2. NÚT PHẲNG ---------- */
.btn:not(.opsapp *), .btn-mint:not(.opsapp *), .btn-blue:not(.opsapp *), .btn-primary:not(.opsapp *), .btn-violet:not(.opsapp *), .btn-or:not(.opsapp *), .btn-ghost:not(.opsapp *),
.btn-block, .ds-btn, .ds-tab, .tab, .tab.on, .bk3-btn, .bk3-go, .bk3-seg button, .bk3-seg button[aria-selected="true"], .chatbtn:not(.opsapp *), .sbtn, .go, .sv, .tr3-sv,
.ibtn, .dk-fab, .ast-fab, .cb-btn, .cb-fab button, .nk-modal-box button, .superbox .sb-r .btn, .cl3 .pid .acts .ibtn, .dm-lay .claim .btn, .gs-nav, .carousel nav,
.hc-search button, .sbar button, .finder .go, .vt-cta, .askf-submit, .qbook .bd .btn, .qbook .bd button[type=submit], .pq-btn, .ds-arrow, .ds-heart, .cms-form .btn-primary {
  box-shadow: none !important; text-shadow: none;
}
.btn:not(.opsapp *):hover, .btn-mint:not(.opsapp *):hover, .btn-blue:not(.opsapp *):hover, .btn-primary:not(.opsapp *):hover, .btn-ghost:not(.opsapp *):hover,
.ds-btn:hover, .bk3-btn:hover, .bk3-go:hover, .chatbtn:not(.opsapp *):hover, .sbtn:hover, .ibtn:hover, .dk-fab:hover, .ast-fab:hover, .cb-btn:hover, .superbox .sb-r .btn:hover,
.abc-form .cms-form .btn-block:hover, .qbook .bd .btn:hover, .qbook .bd button[type=submit]:hover, .dm-lay .claim .btn:hover, .tr3-sv:hover, .sv:hover {
  transform: none !important; box-shadow: none !important;
}
.dm-lay .claim .btn:hover { background: #ffc965; }
.btn-mint:not(.opsapp *), .btn-blue:not(.opsapp *), .btn-violet:not(.opsapp *) { background-image: none; }
.sbox2 .sbtn:active { transform: none; box-shadow: none; }
.btn-ghost:not(.opsapp *) { background-image: none; }

/* ---------- 3. MỘT ĐỘ RỘNG DUY NHẤT (máy tính ≥ 1024px; mobile để nguyên) ---------- */
@media (min-width: 1024px) {
  :root { --wrap-gut: var(--ds-gutter-in, 24px); }
  .wrap.wrap, .wrap.wrap.wrap {
    max-width: calc(var(--wrap) + 2 * var(--wrap-gut)); padding-left: var(--wrap-gut); padding-right: var(--wrap-gut); --gut: var(--wrap-gut);
  }
  body.home-v2 main.wrap.wrap.wrap { width: auto; max-width: calc(var(--wrap) + 2 * var(--wrap-gut)); padding-inline: var(--wrap-gut); }
  .wrap:has(> .ua-ext) { max-width: calc(var(--wrap) + 2 * var(--wrap-gut)) !important; }
  main.pnx { max-width: calc(var(--wrap) + 2 * var(--wrap-gut)); }
  .ds-wrap { width: min(var(--wrap), 100% - 2 * var(--wrap-gut)); }
  /* các khung từng có độ rộng riêng */
  .ab-in { max-width: calc(var(--wrap) + 2 * var(--wrap-gut)); padding-inline: var(--wrap-gut); }
  .dkp, .acct.panel-ns, .xm, .ab-vs, .ab-road, .abc-wrap { max-width: var(--wrap); }
  .ab-hero .wrap, .hc-hero .wrap.hc-hero-in { max-width: calc(var(--wrap) + 2 * var(--wrap-gut)); }
  main.wrap.cvpage.td3-apply:has(.ap-wrap) { max-width: calc(var(--wrap) + 2 * var(--wrap-gut)) !important; }
}

/* ---------- 4. ĐẦU TRANG FULL CHIỀU NGANG (cả khi ở đầu trang lẫn khi cuộn; thanh tiện ích cũng full) ---------- */
@media (min-width: 1024px) {
  .hv-in { width: calc(100% - 2 * var(--ds-gutter, 32px)); max-width: none; }
}