/* ============================================================
   BigBen One — style.css
   TOÀN BỘ giao diện của site nằm ở đây (view không dùng inline style).

   Mục lục:
     0) Biến thiết kế (màu, bo góc, khoảng cách)
     1) Nền tảng: reset, typography, container, section
     2) Thành phần chung: nút, thẻ, form, bảng, badge/pill, tabs, flash
     3) Header + drawer mobile + dropdown ngôn ngữ
     4) Footer
     5) Trang chủ: hero, dịch vụ, sản phẩm, band license, blog
     6) Trang chi tiết sản phẩm
     7) Trang thanh toán (checkout)
     8) Trang đăng nhập / đăng ký
     9) Dashboard khách
    10) Trang 404
    11) Responsive
   ============================================================ */

/* ---------- 0) BIẾN THIẾT KẾ ---------- */
:root {
  /* màu chủ đạo */
  --green:        #4e8900;
  --green-hover:  #3f7000;
  --green-deep:   #2c3d10;
  --lime:         #9fce5a;
  --dark:         #1e2913;

  /* chữ */
  --ink:          #1c2314;
  --text:         #3a4230;
  --muted:        #5c6653;
  --muted-2:      #728260;
  --faint:        #8b9580;
  --faint-2:      #a3ab99;

  /* nền + viền */
  --bg:           #fbfcf9;
  --bg-soft:      #f6f9f0;
  --bg-tint:      #eef5e2;
  --bg-thead:     #f8faf4;
  --bg-hover:     #f4f7ef;
  --line:         #ecf0e4;
  --line-card:    #e8ede0;
  --line-row:     #f0f3ea;
  --border:       #dde4d4;

  /* trạng thái */
  --warn-bg:      #fff8e6;  --warn-line: #f2dfa8;  --warn-text: #7a5c14;
  --err-bg:       #fff5f5;  --err-line:  #f0d6d6;  --err-text:  #b3261e;

  /* bo góc */
  --r-sm: 9px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  /* khoảng đệm ngang của container */
  --pad-x: clamp(18px, 4vw, 28px);
}

/* ---------- 1) NỀN TẢNG ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  /* --font-body do layout đặt theo Font Family trong Admin → Cài đặt → Website */
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: var(--ink);
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); text-decoration: underline; }

.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 1180px; margin: 0 auto; width: 100%; }
.site-main { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Section: khối nội dung chuẩn của mọi trang */
.section { padding: clamp(40px, 6vw, 64px) var(--pad-x); display: flex; flex-direction: column; gap: 28px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.section-head--center { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.section-title { margin: 0; font-size: clamp(23px, 4.4vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.section-sub { margin: 0; color: var(--muted); font-size: 14.5px; }
/* Cột chữ (tiêu đề + mô tả) bên trái section-head.
   PHẢI dùng class riêng, KHÔNG dùng ".section-head > div": selector đó khớp cả
   .chip-row nằm cạnh, đè flex-direction:column lên nó và làm dải chip xếp dọc. */
.section-head-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 28px); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------- 2) THÀNH PHẦN CHUNG ---------- */
/* Nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--primary:hover { background: var(--green-hover); border-color: var(--green-hover); color: #fff; }
.btn--outline { background: #fff; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--bg-tint); color: var(--green); }
.btn--danger { background: #d92d2d; color: #fff; border-color: #d92d2d; }
.btn--danger:hover { background: #bf2020; border-color: #bf2020; color: #fff; }
.btn--ghost { background: #fff; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn--lime { background: var(--lime); color: var(--dark); border-color: var(--lime); }
.btn--lime:hover { filter: brightness(.95); }
.btn--lg { padding: 14px 22px; font-size: 14.5px; border-radius: var(--r-md); }
.btn--sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }

/* Thẻ trắng viền nhạt */
.card { background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-xl); }
.card--pad { padding: 22px; display: flex; flex-direction: column; gap: 14px; }

/* Panel = card có thanh tiêu đề + phần thân (bảng, danh sách) */
.panel { background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-xl); overflow: hidden; }
.panel-head { padding: 15px 20px; border-bottom: 1px solid var(--line-row); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bg-thead); }
.panel-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

/* Form */
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.input {
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-size: 14.5px; font-family: inherit; background: #fff; outline-color: var(--green); width: 100%;
}
.input--sm { padding: 9px 13px; font-size: 13px; border-radius: var(--r-sm); }
.input--mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.checkbox { accent-color: var(--green); }

/* Bảng dữ liệu */
/* Cuộn ngang có "bóng mép": chỗ nào còn nội dung bị khuất thì hiện vệt mờ ở
   mép đó, cuộn hết thì vệt tự tắt. Thuần CSS nhờ background-attachment:
   lớp local cuộn theo nội dung, lớp scroll đứng yên → tự che nhau. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right,  #fff 28%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,   #fff 28%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0    50%, rgba(30, 50, 10, .14), rgba(30, 50, 10, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(30, 50, 10, .14), rgba(30, 50, 10, 0)) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Thanh cuộn ngang mảnh + bo tròn, thay scrollbar mặc định thô kệch. */
.table-scroll { scrollbar-width: thin; scrollbar-color: #c8d2ba transparent; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: #cdd7c0; border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: #aab993; }
.table { width: 100%; border-collapse: collapse; }
.table thead tr { background: var(--bg-thead); }
.table th {
  text-align: left; padding: 12px 20px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; color: var(--muted-2); text-transform: uppercase;
}
.table tbody tr { border-top: 1px solid var(--line-row); transition: background .12s; }
.table tbody tr:hover { background: var(--bg-hover); }
.table td { padding: 14px 20px; font-size: 13.5px; }
.td-strong { font-weight: 600; }
.td-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; white-space: nowrap; color: var(--text); }
.td-muted { font-size: 13px; color: var(--muted); }
/* Ô dài (tên sản phẩm, tiêu đề ticket...) cắt còn 1 dòng + "…" cho gọn bảng;
   di chuột thấy đủ (title), hoặc bấm "Chi tiết" để xem đầy đủ. */
.td-clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
.table-empty { padding: 28px 20px; font-size: 13.5px; color: var(--faint); text-align: center; }
/* Nháy sáng dòng cần gia hạn khi bấm "Gia hạn ngay" ở alert — hướng mắt người xem. */
.lic-flash { animation: licFlash 1.3s ease 2; }
@keyframes licFlash {
  0%   { background: #fff2cc; box-shadow: inset 4px 0 0 #e0a800; }
  100% { background: transparent; box-shadow: inset 4px 0 0 rgba(224,168,0,0); }
}

/* Badge sản phẩm (HOT / SALE / NEW) */
.badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: var(--bg-tint); color: var(--green); }
.badge--sale { background: #fff3e0; color: #e65100; }
.badge--new  { background: #e7f0fb; color: #1565c0; }

/* ============================================================
   NHÃN SẢN PHẨM (.pbadge) — nổi trên ảnh: HOT / NEW / SALE.
   Nền gradient + viền sáng + vệt loang chạy qua cho có chiều sâu,
   thay cho ô màu phẳng cũ.
   ============================================================ */
.pbadge {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  color: #fff; text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .3);
  overflow: hidden; flex-shrink: 0;
}
.pbadge i { font-size: 10px; }
/* Vệt sáng quét ngang, lặp chậm cho đỡ rối mắt */
.pbadge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: pbadge-shine 3.6s ease-in-out infinite;
}
@keyframes pbadge-shine {
  0%, 62% { left: -60%; }
  92%, 100% { left: 130%; }
}
/* Máy bật "giảm chuyển động" thì tắt hiệu ứng quét sáng */
@media (prefers-reduced-motion: reduce) { .pbadge::after { animation: none; opacity: 0; } }

.pbadge--hot  { background: linear-gradient(135deg, #ff6a3d, #e8362a); }
.pbadge--new  { background: linear-gradient(135deg, #34b3ff, #1565c0); }
.pbadge--sale { background: linear-gradient(135deg, #ffb02e, #f2680c); }

/* Pill trạng thái (license, đơn hàng) */
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill--active { background: var(--bg-tint); color: var(--green); }
.pill--warn   { background: #fff3e0; color: #e65100; }
.pill--dead   { background: #f4f1f1; color: #8a7f7f; }
.pill--overdue{ background: #fdeaea; color: #d32f2f; }
.pill--blue   { background: #e7f0fb; color: #1565c0; }

/* ===== Chip lọc (Tất cả / Phần mềm bản quyền / Source code website) =====
   Dùng ở dải lọc danh mục trang chủ và lọc chủ đề trang blog.
   Xem thêm .chip-row (bố cục) và media query max-width:720px (cuộn ngang). */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;          /* chốt chiều cao: chip có badge số và chip không có vẫn thẳng hàng */
  padding: 0 15px;
  border: 1px solid var(--border);   /* 1px cho nét gọn — 1.5px bị trình duyệt làm mờ */
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;   /* tên danh mục dài không bị ngắt giữa từ */
  cursor: pointer;
  text-decoration: none;
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.chip i { font-size: 12px; opacity: .75; }

/* Hover đổi cả nền chứ không chỉ viền — nhìn "bắt" chuột rõ hơn nhiều */
.chip:hover {
  border-color: var(--green);
  background: var(--bg-tint);
  color: var(--green);
  text-decoration: none;
}
.chip:hover i { opacity: 1; }

/* Bàn phím: vẽ vòng focus riêng, outline mặc định bị bo tròn cắt góc trông xấu */
.chip:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(78, 137, 0, .22);
}

.chip.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78, 137, 0, .2);
}
.chip.is-active:hover { background: var(--green-hover); border-color: var(--green-hover); color: #fff; }
.chip.is-active i { opacity: 1; }

/* Badge số: min-width + tabular-nums để "1" và "12" vẫn tròn đều như nhau */
.chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-tint);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip:hover .chip-count { background: #fff; }
.chip.is-active .chip-count { background: rgba(255, 255, 255, .2); color: #fff; }

/* Tabs gạch chân */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-card); overflow-x: auto; }
.tab-btn {
  padding: 12px 16px; border: none; background: transparent; font-family: inherit;
  border-bottom: 2.5px solid transparent; font-size: 13.5px; font-weight: 700;
  color: var(--muted-2); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.tab-btn.is-active { border-bottom-color: var(--green); color: var(--green); }
/* Màn hình hẹp: 3 tab tiếng Việt dài hơn bề ngang (419px trong khung 324px) nên
   bị cuộn ngang, tab cuối khuất hẳn. Cho xuống hàng để không giấu mục nào. */
@media (max-width: 560px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; gap: 2px; }
  .tab-btn { padding: 10px 12px; font-size: 13px; }
}

/* Hộp thông báo */
.flash { padding: 12px 16px; background: var(--bg-tint); border: 1px solid #cfe0b3; border-radius: var(--r-md); font-size: 13.5px; color: #3d6600; font-weight: 600; }
.note { padding: 12px 14px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.55; }
.note--warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text); }
.note--err  { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-text); font-size: 13px; }
.note--info { background: var(--bg-soft); border: 1px solid var(--line-card); color: var(--muted); font-size: 13.5px; }

/* Ảnh giữ chỗ kẻ sọc (khi chưa upload ảnh thật) */
.ph-media { background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 13px, #edf3e1 13px, #edf3e1 26px); display: grid; place-items: center; }
.ph-label { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #6c7a55; background: #ffffffcc; padding: 4px 10px; border-radius: 5px; }

/* ---------- 3) HEADER + DRAWER + NGÔN NGỮ ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #ffffffee; backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { padding: 10px var(--pad-x); min-height: 66px; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; }

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand em { font-style: normal; color: var(--green); }
.brand--lg { font-size: 20px; }
/* Logo ảnh (Admin → Cài đặt → Website): cao cố định, rộng tự co theo tỉ lệ */
.brand--img img { height: 34px; width: auto; max-width: 200px; display: block; object-fit: contain; }

/* Banner trang chủ */
.home-banner { display: block; border-radius: 14px; overflow: hidden; line-height: 0; }
.home-banner img { width: 100%; height: auto; display: block; }
a.home-banner { transition: transform .18s ease, box-shadow .18s ease; }
a.home-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); }

/* --- Thanh khuyến mãi trên cùng --- */
.promo-bar { background: var(--dark); color: #e6efd8; font-size: 13px; }
/* KHÔNG dùng flex ở đây: để flex thì nhãn HOT là một khối riêng, chữ dài xuống
   dòng là hai bên lệch nhau. Cho chữ chảy bình thường, nhãn HOT nằm ngay trong
   dòng đầu — xuống dòng bao nhiêu lần vẫn canh giữa đều tăm tắp. */
.promo-inner { display: block; padding: 8px var(--pad-x); text-align: center; }
.promo-bar em {
  display: inline-block; vertical-align: 1px; margin-right: 7px;
  font-style: normal; padding: 2px 8px; border-radius: 5px;
  background: var(--lime); color: var(--dark);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.promo-bar span { display: inline; }
@media (max-width: 700px) {
  .promo-bar { font-size: 12px; line-height: 1.5; }
  .promo-inner { padding: 7px var(--pad-x); }
  .promo-bar em { font-size: 10px; padding: 2px 7px; margin-right: 6px; }
}
/* Thanh khuyến mãi chỉ là chữ, không phải link → không gạch chân, không đổi màu khi rê chuột */
.promo-bar span { color: #e6efd8; }

/* --- Hàng trên: nút phụ cạnh logo --- */
.menu-top { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.btn-top { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: #fff; font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.btn-top:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.btn-top i { font-size: 12px; opacity: .85; }
.btn-top--accent { background: var(--green); border-color: var(--green); color: #fff; }
.btn-top--accent:hover { background: var(--green-hover); border-color: var(--green-hover); color: #fff; }

/* --- Hàng dưới: menu chính + ô tìm kiếm --- */
.nav-wrapper { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 45; }
.nav-inner { display: flex; align-items: center; gap: 10px; padding: 0 var(--pad-x); min-height: 52px; }
/* overflow: visible để dropdown danh mục con không bị cắt (trước để overflow-x:auto
   cuộn ngang, nhưng như thế trình duyệt ép overflow-y=auto → cắt mất dropdown). */
.main-nav { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: visible; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 15px 9px; border-bottom: 2.5px solid transparent;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: #4a5340;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s; }
.nav-link i { font-size: 13px; opacity: .8; }
/* Hover: nền nhạt + vạch xanh vừa đủ thấy. Trước đây vạch dùng --bg-tint (gần
   như trắng) nên rê chuột như không có gì, mà tệ hơn là mục ĐANG CHỌN bị hover
   ghi đè mất luôn vạch xanh đậm. */
.nav-link:hover { color: var(--green); background: var(--bg-tint); border-bottom-color: #b9d391; text-decoration: none; }
.nav-link:hover i { opacity: 1; }
.nav-link.active { color: var(--green); border-bottom-color: var(--green); }
.nav-link.active i { opacity: 1; }
.nav-link.active:hover { border-bottom-color: var(--green); }   /* giữ vạch của mục đang chọn */

/* ---- Dropdown danh mục CHA ▸ CON (desktop) ---- */
.nav-item--drop { position: relative; display: inline-flex; }
.nav-caret { font-size: 9px; margin-left: 4px; opacity: .5; transition: transform .18s; }
.nav-item--drop:hover .nav-caret { transform: rotate(180deg); opacity: .9; }
.nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 214px;
  background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-md);
  box-shadow: 0 16px 36px -14px rgba(30, 50, 10, .3);
  padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 50;
}
.nav-item--drop:hover .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-link {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background .14s, color .14s;
}
.nav-drop-link:hover, .nav-drop-link.active { background: var(--bg-tint); color: var(--green); }
.nav-drop-all { color: var(--muted); border-bottom: 1px solid var(--line-row); border-radius: 8px 8px 0 0; margin-bottom: 2px; }

/* ---- Mục con trong drawer mobile ---- */
.drawer-link--sub { padding-left: 42px; font-size: 13.5px; color: var(--muted); }
.drawer-link--sub i { font-size: 11px; opacity: .55; }

.nav-search { display: flex; align-items: center; flex-shrink: 0; border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; transition: border-color .15s; }
.nav-search:focus-within { border-color: var(--green); }
.nav-search input { border: 0; outline: 0; padding: 8px 14px; font-size: 13px; font-family: inherit; width: 146px; background: transparent; }
.nav-search button { border: 0; background: transparent; padding: 8px 13px 8px 4px; color: var(--muted-2); cursor: pointer; font-size: 13px; }
.nav-search button:hover { color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* --- Menu tài khoản (gom dashboard / admin / đăng xuất) --- */
.user-wrap { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-family: inherit; cursor: pointer; transition: border-color .15s; }
.user-btn:hover { border-color: var(--green); }
.user-ava { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--bg-tint); color: var(--green); font-size: 13px; font-weight: 800; line-height: 1; overflow: hidden; }
.user-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-ava--lg { width: 40px; height: 40px; font-size: 16px; }
.user-btn-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.user-btn .caret { font-size: 9px; color: var(--faint); }

.user-menu { position: absolute; top: calc(100% + 8px); right: 0; flex-direction: column; min-width: 232px; padding: 6px; background: #fff; border: 1px solid #e2e8d8; border-radius: 13px; box-shadow: 0 16px 38px rgba(40, 60, 10, .16); z-index: 70; }
.user-menu[hidden] { display: none; }
.user-menu:not([hidden]) { display: flex; }
.um-head { display: flex; align-items: center; gap: 11px; padding: 10px 11px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--line-row); }
.um-head-txt { display: flex; flex-direction: column; min-width: 0; }
.um-head-txt strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-head-txt span { font-size: 11.5px; color: var(--faint); }
.um-item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.um-item i { width: 15px; text-align: center; font-size: 13px; color: var(--muted-2); }
.um-item:hover { background: var(--bg-hover); color: var(--green); text-decoration: none; }
.um-item:hover i { color: var(--green); }
.um-item--danger { color: var(--err-text); }
.um-item--danger i { color: var(--err-text); }
.um-item--danger:hover { background: var(--err-bg); color: var(--err-text); }
.um-item--danger:hover i { color: var(--err-text); }
.um-sep { height: 1px; margin: 5px 4px; background: var(--line-row); }

/* Nút burger (mobile) */
.burger { display: none; place-items: center; align-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: #fff; padding: 0; cursor: pointer; font-size: 15px; color: var(--text); }

/* Dropdown ngôn ngữ */
.lang-wrap { position: relative; }
/* Nút đổi ngôn ngữ: chỉ hiện cờ tròn */
.lang-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; cursor: pointer; transition: border-color .15s, transform .12s; }
.lang-btn:hover { border-color: var(--green); transform: scale(1.06); }
.lang-btn .flag { width: 22px; height: 22px; }
/* Cờ tròn (SVG circle-flags trong assets/img/flags) */
.flag { width: 19px; height: 19px; border-radius: 50%; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; flex-direction: column; min-width: 168px; background: #fff; border: 1px solid #e2e8d8; border-radius: 11px; box-shadow: 0 14px 34px rgba(40, 60, 10, .16); overflow: hidden; z-index: 70; }
.lang-menu[hidden] { display: none; }
.lang-menu:not([hidden]) { display: flex; }
.lang-item { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: none; background: #fff; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.lang-item + .lang-item { border-top: 1px solid var(--line-row); }
.lang-item.is-active { background: var(--bg-tint); color: var(--green); }

/* Drawer mobile */
.scrim { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(20, 30, 10, .42); }
.scrim.open { display: block; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(292px, 82vw); z-index: 81; background: #fff; box-shadow: 14px 0 40px rgba(30, 45, 10, .18); display: none; flex-direction: column; padding: 20px; gap: 6px; overflow-y: auto; }
.drawer.open { display: flex; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer-close { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: #fff; font-size: 16px; color: var(--text); line-height: 1; cursor: pointer; }
.drawer-link { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border-radius: var(--r-md); font-size: 14.5px; font-weight: 600; color: var(--text); }
.drawer-link i { width: 18px; text-align: center; font-size: 13.5px; color: var(--muted-2); }
.drawer-link:hover { background: var(--bg-hover); text-decoration: none; }
.drawer-sep { height: 1px; background: #eef1e9; margin: 8px 0; }
.drawer-ctas { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.drawer-langs { display: flex; gap: 8px; margin-top: 14px; }
.drawer-langs .lang-item { flex: 1; justify-content: center; border: 1.5px solid #e2e8d8; border-radius: var(--r-md); padding: 11px; font-size: 13px; font-weight: 700; }

/* ---------- 4) FOOTER ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: auto; }
.footer-grid { padding: clamp(36px, 5vw, 48px) var(--pad-x) 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: clamp(24px, 3vw, 32px); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col--brand { gap: 12px; }
.footer-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 280px; }
.footer-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.footer-link { font-size: 13px; color: var(--muted); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .container { padding: 16px var(--pad-x); font-size: 12px; color: var(--faint-2); }

/* ---------- 5) TRANG CHỦ ---------- */
/* Hero */
.hero { background: linear-gradient(175deg, #f4f9ea 0%, #e6f1d2 70%, #fbfcf9 100%); position: relative; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 50%; background: rgba(78, 137, 0, .07); }
.hero-blob--tr { top: -120px; right: -100px; width: 420px; height: 420px; }
.hero-blob--bl { bottom: -160px; left: -120px; width: 380px; height: 380px; background: rgba(78, 137, 0, .06); }
.hero-inner { padding: clamp(44px, 7vw, 72px) var(--pad-x) clamp(40px, 6vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; position: relative; }
.hero-title { margin: 0; font-size: clamp(31px, 6.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; max-width: 760px; }
.hero-title em { font-style: normal; color: var(--green); }
.hero-sub { margin: 0; font-size: clamp(15px, 2.6vw, 16.5px); color: #55663a; max-width: 560px; line-height: 1.6; }
.hero-search { display: flex; flex-wrap: wrap; width: min(620px, 100%); background: #fff; border-radius: var(--r-lg); box-shadow: 0 12px 40px rgba(60, 90, 10, .12); padding: 7px; gap: 7px; margin-top: 8px; }
.hero-search input { flex: 1; min-width: 150px; border: none; outline: none; padding: 12px 16px; font-size: 14.5px; font-family: inherit; background: transparent; }
.hero-search .btn { padding: 12px 24px; border-radius: var(--r-md); font-size: 14px; }
.hero-stats { display: flex; gap: clamp(20px, 4vw, 36px); margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat strong { font-size: 24px; color: var(--green-deep); }
.stat span { font-size: 12.5px; color: var(--muted-2); }

/* Dịch vụ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.svc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tint); display: grid; place-items: center; font-size: 20px; color: var(--green); font-weight: 800; }
.svc-title { font-size: 16.5px; font-weight: 700; }
.svc-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* Dải chip lọc. Desktop: một hàng, chật thì tự xuống dòng. */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ĐIỆN THOẠI: một hàng CUỘN NGANG, không xuống dòng.
   Lý do: tên danh mục dài ("Source code website", "Phần mềm bản quyền") mà cho
   wrap thì trên máy 375px thành 3 hàng lệch lạc, đẩy lưới sản phẩm tụt hẳn xuống.

   Dải tràn ra sát hai mép màn hình (margin âm bù lại bằng padding cùng cỡ) để
   chip cuối bị cắt ngay ở mép — đó chính là dấu hiệu "còn nữa, vuốt tiếp đi",
   giống Shopee/Tiki. Thanh cuộn ẩn vì trên cảm ứng nó chỉ làm rối mắt.

   width phải là 100% + 2*pad-x: cha là flex (.section-head / .blog-toolbar) nên
   nếu để width tự tính theo nội dung thì cả hàng chip đội cha phình ra ngoài
   màn hình thay vì cuộn bên trong. */
@media (max-width: 720px) {
  .chip-row {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: calc(100% + var(--pad-x) * 2);
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }

  .chip {
    flex: 0 0 auto;        /* không cho co lại thành chip méo, chữ bị bóp */
    height: 40px;          /* ngón tay bấm: tối thiểu 40px */
    scroll-snap-align: start;
  }
}

/* Thẻ sản phẩm */
.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card[hidden] { display: none !important; }
/* Rê chuột: nhấc nhẹ + viền xanh, để cả thẻ trông bấm được */
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 32px rgba(40, 60, 10, .12);
}
.pc-media { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-media .badge { position: absolute; top: 12px; left: 12px; }

/* ============================================================
   MOCKUP — khung "cửa sổ macOS" bọc ảnh sản phẩm / bài viết cho
   nhìn giống ảnh chụp màn hình phần mềm thật.
   Cấu trúc:  .mock > .mock-bar (3 chấm + thanh địa chỉ) + .mock-screen (ảnh)
   ============================================================ */
.mock { position: relative; display: flex; flex-direction: column; background: #e9eee2; }
.mock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; flex-shrink: 0;
  background: linear-gradient(#fbfcf9, #eef1e8);
  border-bottom: 1px solid #dfe5d6;
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mock-dot--r { background: #ff5f57; }
.mock-dot--y { background: #febc2e; }
.mock-dot--g { background: #28c840; }
.mock-url {
  flex: 1; min-width: 0; margin-left: 6px; padding: 2px 9px;
  background: #fff; border: 1px solid #e2e8d8; border-radius: 999px;
  font-size: 9.5px; color: var(--faint); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.mock-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mock-screen .ph-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--faint-2); }
/* Ánh sáng chéo nhẹ như màn hình thật */
.mock-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 32%, transparent 55%);
}
.product-card:hover .mock-screen img,
.post-card:hover .mock-screen img { transform: scale(1.04); }
.mock-screen img { transition: transform .35s ease; }

/* Bản MacBook cho trang chi tiết: có thêm đế máy bên dưới */
.mock--laptop { background: transparent; }
.mock--laptop .mock-frame {
  border: 9px solid #2b2f28; border-bottom-width: 12px;
  border-radius: 14px; overflow: hidden;
  background: #2b2f28; box-shadow: 0 18px 40px rgba(40, 60, 10, .18);
  display: flex; flex-direction: column;
}
.mock--laptop .mock-bar { padding: 6px 9px; }
.mock--laptop .mock-screen { aspect-ratio: 16/10; }
/* Đế rộng hơn màn hình một chút cho giống MacBook; trên mobile thu về đúng
   bề ngang khung để không bị tràn/lệch mép. */
.mock-base {
  height: 13px; width: 112%; margin: 0 -6%;
  background: linear-gradient(#d7dbd2, #b9bfb2);
  border-radius: 0 0 12px 12px; position: relative;
  box-shadow: 0 8px 16px rgba(40, 60, 10, .14);
}
@media (max-width: 860px) {
  .mock-base { width: 100%; margin: 0; }
}
.mock-base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 88px; height: 5px; border-radius: 0 0 6px 6px; background: #a9b0a1;
}
.pc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
/* Hàng đầu: nhãn + danh mục bên trái, số đã bán dạt sang phải */
.pc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted-2); }
.pc-meta-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Nhãn HOT / NEW / SALE — pill nhỏ gradient + icon, đứng trước danh mục */
.pc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  color: #fff; flex-shrink: 0;
}
.pc-badge i { font-size: 9px; }
.pc-badge--hot  { background: linear-gradient(135deg, #ff7a45, #e8362a); box-shadow: 0 2px 7px rgba(224, 54, 42, .28); }
.pc-badge--new  { background: linear-gradient(135deg, #3aa5ff, #1565c0); box-shadow: 0 2px 7px rgba(21, 101, 192, .26); }
.pc-badge--sale { background: linear-gradient(135deg, #ffb02e, #f2680c); box-shadow: 0 2px 7px rgba(242, 104, 12, .26); }
.pc-cat {
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-tint); color: var(--green-deep);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Điểm sao bên phải hàng danh mục — thay cho "đã bán" cũ */
.pc-rating {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-weight: 800; color: var(--ink); white-space: nowrap; letter-spacing: .01em;
}
.pc-rating i { font-size: 11px; color: #f5a623; }
/* Tên + mô tả hiện ĐỦ, không cắt bằng dấu … — khách phải đọc được hết mới
   quyết định mua. Các thẻ trong lưới vẫn cao bằng nhau nhờ grid tự kéo. */
.pc-name {
  font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink);
  text-decoration: none; transition: color .15s ease; overflow-wrap: anywhere;
}
.pc-name:hover { color: var(--green); text-decoration: none; }
.pc-desc {
  font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1;
  overflow-wrap: anywhere;
}
/* Chân thẻ: gạch phân cách rồi tới giá + nút */
.pc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.price-block { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.price { font-size: 18px; font-weight: 800; color: var(--green-deep); letter-spacing: -.01em; }
/* Dòng dưới giá: giá gạch ngang + % giảm (đã chuyển ra khỏi ảnh) */
.price-sub { display: flex; align-items: center; gap: 7px; }
.price-old { font-size: 11.5px; color: var(--faint-2); text-decoration: line-through; }

/* ============================================================
   NHÃN GIẢM GIÁ — dùng chung thẻ sản phẩm (.price-off) và trang
   chi tiết (.off-tag). Kiểu "tem giá": có khấc răng cưa bên trái.
   ============================================================ */
.price-off, .off-tag {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 9px;
  border-radius: 4px 999px 999px 4px;
  background: linear-gradient(135deg, #ff6a4d, #e03826);
  color: #fff; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(224, 56, 38, .28);
}
.price-off { font-size: 10.5px; }
.off-tag   { font-size: 12px; padding: 4px 11px 4px 12px; }
.off-tag i { font-size: 10px; opacity: .9; }
/* Lỗ tròn của cái tem, đặt ở đầu nhãn */
.price-off::before, .off-tag::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .85);
}
.price-off { padding-left: 13px; }
.off-tag   { padding-left: 16px; }
.pc-btn { gap: 7px; padding: 9px 15px; font-size: 13px; white-space: nowrap; }
.pc-btn i { font-size: 12px; }
.grid-empty { grid-column: 1 / -1; text-align: center; padding: 36px 0; color: var(--faint); font-size: 14px; }

/* Band kiểm tra license (nền tối) */
.lic-band { background: var(--dark); }
.lic-inner { padding: clamp(40px, 6vw, 64px) var(--pad-x); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: center; }
.lic-copy { display: flex; flex-direction: column; gap: 16px; }
.lic-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--lime); text-transform: uppercase; }
.lic-title { margin: 0; font-size: clamp(24px, 4.6vw, 30px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.lic-sub { margin: 0; color: #b9c7a6; font-size: 14.5px; line-height: 1.65; }
.lic-points { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lic-point { display: flex; gap: 10px; align-items: center; color: #dce7cc; font-size: 13.5px; }
.lic-point .tick { color: var(--lime); font-weight: 800; }
.lic-form { background: #ffffff10; border: 1px solid #ffffff22; border-radius: 18px; padding: clamp(20px, 4vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.lic-form-title { color: #fff; font-size: 16px; font-weight: 700; }
/* Ô nhập tên miền: chữ thường bình thường, không phải mono in hoa như lúc nhập key */
.lic-input {
  padding: 14px 16px; border-radius: 11px; border: 1.5px solid #ffffff2e;
  background: #ffffff14; color: #fff; font-family: inherit; font-size: 14.5px; outline: none;
}
.lic-input::placeholder { color: #ffffff5c; }
.lic-input:focus { border-color: var(--lime); background: #ffffff1f; }
.lic-note { font-size: 12px; color: #8fa07a; text-align: center; line-height: 1.55; }

/* Kết quả tra cứu — hiện tại chỗ, không bắn popup chặn màn hình */
.lic-result:empty { display: none; }
.lic-result { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.lic-result.is-load { align-items: center; padding: 6px 0; }

.lic-result.is-bad {
  flex-direction: row; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: 11px;
  background: #ff6a5c1f; border: 1px solid #ff9d9340; color: #ffb3ab;
  font-weight: 600; line-height: 1.5;
}
.lic-result.is-bad > i { font-size: 14px; margin-top: 1px; }

.lic-result.is-ok {
  padding: 13px 15px; border-radius: 12px;
  background: #9fce5a1a; border: 1px solid #9fce5a44;
}
.lic-res-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lic-res-top > i { color: var(--lime); font-size: 16px; }
.lic-res-top > b { color: #fff; font-size: 15px; word-break: break-all; }
.lic-res-st {
  margin-left: auto; padding: 3px 11px; border-radius: 999px;
  background: var(--lime); color: #1e2913; font-size: 11.5px; font-weight: 800;
}
/* Sắp hết hạn / hết hạn thì nhãn đổi màu, đừng để xanh lá gây hiểu nhầm */
.lic-result.is-expiring .lic-res-st { background: #ffcf6b; }
.lic-result.is-expired  .lic-res-st { background: #ff9d93; }
.lic-result.is-expired  .lic-res-top > i { color: #ff9d93; }

.lic-res-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px 16px; }
.lic-res-rows > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lic-res-rows span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8fa07a; }
.lic-res-rows b { font-size: 13px; color: #e6efd8; word-break: break-word; }
/* Chỉ báo đã xác minh — không kèm chi tiết riêng tư của khách */
.lic-res-verified { color: var(--lime); font-weight: 700; font-size: 13.5px; line-height: 1.55; }
.lic-res-sub { color: #c3d6a2; font-size: 12.5px; line-height: 1.5; }

/* Blog */
.blog-band { background: var(--bg-soft); border-top: 1px solid var(--line); }
.post-card { background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.post-card:hover { text-decoration: none; color: inherit; }
.post-media { aspect-ratio: 16/9; overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted-2); }
.post-tag { padding: 3px 9px; border-radius: 6px; background: var(--bg-tint); color: var(--green); font-weight: 800; font-size: 11px; white-space: nowrap; }
.post-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.post-excerpt { font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1; }
.post-more { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 4px; }

/* ---------- 6) CHI TIẾT SẢN PHẨM ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); flex-wrap: wrap; }
.breadcrumb a { font-weight: 600; }
.breadcrumb .current { color: var(--text); }

.gallery { aspect-ratio: 16/10; border-radius: var(--r-xl); border: 1px solid var(--line-card); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prod-head { display: flex; flex-direction: column; gap: 10px; }
.prod-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-rating { font-size: 12.5px; color: var(--muted-2); font-weight: 700; }
.prod-rating i { color: #f2a819; font-size: 11px; margin-right: 1px; }
.prod-title { margin: 0; font-size: clamp(24px, 4.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
/* Câu tóm tắt (short_desc) ngay dưới tên sản phẩm — đậm hơn mô tả thường một bậc */
.prod-lead { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.55; }
.prod-desc { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.65; }

/* Mô tả thu gọn (chỉ bật trên điện thoại, do JS thêm .js-clamp khi mô tả dài).
   Khi đang thu gọn: giới hạn chiều cao + làm mờ dần phần cuối bằng mask (không
   cần biết màu nền), kèm nút "Xem thêm". Bấm nút → thêm .is-open → bung full. */
.prod-desc-wrap { position: relative; }
.prod-desc-more { display: none; align-items: center; gap: 6px; margin-top: 10px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 700 13.5px/1 inherit; color: var(--green); }
.prod-desc-more i { font-size: 11px; transition: transform .15s; }
.prod-desc-wrap.js-clamp .prod-desc-more { display: inline-flex; }
.prod-desc-wrap.js-clamp:not(.is-open) .prod-desc {
  max-height: 150px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
          mask-image: linear-gradient(to bottom, #000 58%, transparent);
}

/* MÔ TẢ đầy đủ: khối riêng RỘNG HẾT TRANG bên dưới hàng ảnh + hộp mua (trước đây
   nhồi trong cột phải làm lệch bố cục PC). Dạng "box" trắng có viền cho gọn gàng. */
.prod-desc-section {
  margin-top: clamp(22px, 3.4vw, 36px);
  background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg);
  padding: clamp(18px, 2.6vw, 28px);
}
.prod-sec-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.prod-sec-title i { color: var(--green); font-size: 16px; }
.prod-desc-section .prod-desc { font-size: 15px; color: var(--text); }

.buy-box { padding: 20px; gap: 14px; }
.buy-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buy-price { font-size: 28px; font-weight: 800; color: var(--green-deep); }
.buy-price-old { font-size: 14px; color: var(--faint-2); text-decoration: line-through; }
.buy-price-sub { display: inline-flex; align-items: center; gap: 9px; }

/* ============================================================
   GALLERY ẢNH SẢN PHẨM (Splide) — thay cho khung MacBook cũ.
   Ảnh lớn: fade + nút qua/lại; dải ảnh nhỏ: kéo thả được.
   ============================================================ */
.gal { display: flex; flex-direction: column; gap: 12px; }

.gal-main {
  position: relative;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; overflow: hidden;
}
.gal-main .splide__slide { display: flex; align-items: center; justify-content: center; }
/* object-fit: contain để ảnh không bị cắt mất phần rìa */
.gal-main .splide__slide img {
  width: 100%; aspect-ratio: 16/10; object-fit: contain;
  display: block; background: #f7f9f3;
}
/* Bấm ảnh để phóng to — icon kính lúp hiện ở góc */
.gal-zoom { display: block; position: relative; width: 100%; cursor: zoom-in; }
.gal-zoom:hover { text-decoration: none; }
.gal-zoom-ico {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(30, 41, 19, .72); color: #fff; font-size: 13px;
  opacity: .85; transition: opacity .15s ease, background-color .15s ease;
  pointer-events: none;
}
.gal-zoom:hover .gal-zoom-ico { opacity: 1; background: var(--green); }
.gal-empty {
  aspect-ratio: 16/10; display: grid; place-items: center;
  background: #f7f9f3; font-size: 30px; color: var(--faint-2);
}

/* Nút qua/lại: nằm đè hai bên ảnh, mờ đi khi không rê chuột */
.gal-main .splide__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fffffff2; color: var(--text); cursor: pointer;
  box-shadow: 0 3px 12px rgba(40, 60, 10, .14);
  /* Luôn hiện (mờ nhẹ) chứ không chỉ khi rê chuột — trên điện thoại không có
     hover, giấu đi thì khách tưởng không có nút. */
  opacity: .82; transition: opacity .18s ease, background-color .15s ease, transform .12s ease;
}
.gal-main .splide__arrow svg { width: 15px; height: 15px; fill: currentColor; }
.gal-main .splide__arrow--prev svg { transform: scaleX(-1); }   /* lật mũi tên prev thành "<" */
.gal-main .splide__arrow--prev { left: 12px; }
.gal-main .splide__arrow--next { right: 12px; }
.gal-main:hover .splide__arrow, .gal-main .splide__arrow:focus-visible { opacity: 1; }
.gal-main .splide__arrow:hover { background: var(--green); color: #fff; border-color: var(--green); }
.gal-main .splide__arrow:active { transform: translateY(-50%) scale(.94); }
.gal-main .splide__arrow:disabled { opacity: 0 !important; }
@media (max-width: 560px) {
  .gal-main .splide__arrow { width: 34px; height: 34px; }
  .gal-main .splide__arrow--prev { left: 8px; }
  .gal-main .splide__arrow--next { right: 8px; }
}

/* Bộ đếm ảnh */
.gal-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(30, 41, 19, .78); color: #e6efd8;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}

/* Dải ảnh nhỏ — kéo được, ảnh đang xem có viền xanh */
.gal-thumb {
  width: 100%; height: 100%; padding: 0; display: block;
  border: 2px solid var(--line); border-radius: 9px;
  background: #fff; overflow: hidden; cursor: pointer; opacity: .62;
  transition: opacity .15s ease, border-color .15s ease;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gal-thumb:hover { opacity: 1; }
.gal-thumb.is-cur { opacity: 1; border-color: var(--green); }
.gal-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.gal-thumbs .splide__track { cursor: grab; }
.gal-thumbs .splide__track:active { cursor: grabbing; }
.buy-note { font-size: 12px; color: var(--muted-2); text-align: center; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-item span { font-size: 11.5px; color: var(--faint); }
.meta-item strong { font-size: 13.5px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
/* Thẻ cam kết: icon tròn nền xanh nhạt bên trái + tiêu đề đậm + mô tả ngắn.
   Viền mảnh, hover sáng lên nhẹ. */
.feature-card {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.feature-card:hover { border-color: var(--green); box-shadow: 0 4px 16px rgba(78, 137, 0, .09); transform: translateY(-1px); }
.feature-card .ftr-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--bg-tint); color: var(--green); font-size: 17px;
}
.feature-card .ftr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feature-card strong { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.feature-card span { font-size: 12.8px; color: var(--muted); line-height: 1.55; }

.log-list { display: flex; flex-direction: column; gap: 12px; }
.log-item { background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg); padding: 18px 20px; display: flex; gap: 16px; flex-wrap: wrap; }
.log-ver { display: flex; flex-direction: column; min-width: 110px; }
.log-ver strong { font-size: 14px; color: var(--green); }
.log-ver span { font-size: 12px; color: var(--faint); }
.log-text { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--text); line-height: 1.6; }
/* FAQ dạng accordion: câu hỏi là <summary>, bấm mở/đóng câu trả lời.
   Mỗi câu có icon "?" tròn, nút +/− vẽ bằng CSS, mở thì đổi màu xanh + trượt hiện. */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.faq-item:hover { border-color: rgba(78,137,0,.4); }
.faq-item[open] { border-color: var(--green); box-shadow: 0 10px 26px -18px rgba(44,61,16,.55); }
.faq-head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4;
}
.faq-head::-webkit-details-marker { display: none; }
.faq-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--bg-tint); color: var(--green); transition: background .18s, color .18s;
}
.faq-item[open] .faq-ic { background: var(--green); color: #fff; }
.faq-q { flex: 1 1 auto; min-width: 0; }
/* Nút +/− : hai gạch chồng nhau, mở thì gạch dọc mờ đi → thành dấu trừ. */
.faq-tog { flex-shrink: 0; position: relative; width: 16px; height: 16px; margin-left: 4px; }
.faq-tog::before, .faq-tog::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--green); border-radius: 2px; transition: transform .22s ease, opacity .22s ease;
}
.faq-tog::before { width: 13px; height: 2px; }
.faq-tog::after  { width: 2px; height: 13px; }
.faq-item[open] .faq-tog::after { transform: rotate(90deg); opacity: 0; }
.faq-ans {
  padding: 2px 18px 16px 60px; font-size: 13.5px; color: var(--muted); line-height: 1.7;
}
.faq-item[open] .faq-ans { animation: faqIn .26s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-more {
  margin: 16px 0 0; padding: 13px 16px; font-size: 13px; color: var(--muted); line-height: 1.6;
  background: var(--bg-soft); border: 1px solid var(--line-card); border-radius: var(--r-md);
}
.faq-more i { color: var(--green); margin-right: 7px; }
.faq-more a { color: var(--green); font-weight: 700; }
.faq-empty { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 560px) {
  .faq-head { gap: 11px; padding: 13px 14px; font-size: 13.8px; }
  .faq-ic { width: 27px; height: 27px; }
  .faq-ans { padding: 2px 15px 15px; }   /* bỏ thụt lề trái cho rộng chữ trên đt */
}

/* ---------- 7) THANH TOÁN ---------- */
.checkout-wrap { max-width: 1000px; }
.steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; }
.step-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--line-row); color: var(--faint); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.step-label { font-size: 13px; font-weight: 700; color: var(--faint); }
.step.is-done .step-dot, .step.is-current .step-dot { background: var(--green); color: #fff; }
.step.is-done .step-label, .step.is-current .step-label { color: var(--ink); }
.step-line { flex: 1; min-width: 20px; height: 1.5px; background: var(--border); }
.step-line.is-done { background: var(--green); }

/* ---------- Khung thẻ dùng chung cho checkout & hóa đơn ---------- */
.co-card { background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg); overflow: hidden; }
.co-card-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-row);
  background: var(--bg-soft); font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
}
.co-card-hd i { color: var(--green); font-size: 15px; }
.co-card-bd { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.co-muted { font-size: 13.5px; color: var(--muted); margin: 0; }

/* Bố cục 2 cột: chọn thanh toán bên trái, tóm tắt đơn bám dính bên phải */
.co-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.co-main, .co-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-sticky { position: sticky; top: 84px; }
@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-sticky { position: static; }
  .co-side { order: -1; }        /* trên điện thoại: xem đơn trước rồi mới chọn cách trả */
}

/* ---------- Chọn cách thanh toán ---------- */
.pay-opt { position: relative; display: block; cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pay-opt-box {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: #fff; transition: border-color .15s, background-color .15s;
}
.pay-opt:hover .pay-opt-box { border-color: var(--green); }
.pay-opt input:checked + .pay-opt-box { border-color: var(--green); background: var(--bg-tint); }
.pay-opt-ico {
  width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 11px; font-size: 17px;
}
.pay-opt-ico--wallet { background: #eef5e2; color: var(--green-deep); }
.pay-opt-ico--bank   { background: #e7f0fb; color: #1565c0; }
.pay-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pay-opt-txt strong { font-size: 14px; }
.pay-opt-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.pay-opt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; flex-shrink: 0; }
.pay-opt-right b { font-size: 14px; }
.pay-opt-right b.ok { color: var(--green-deep); }
.pay-opt-right b.no { color: var(--err-text); }
.pay-opt-right small { font-size: 11px; color: var(--faint); }
/* Ô đánh dấu vuông bo góc thay cho dấu tích tròn — chưa chọn thì là ô rỗng
   viền xám, chọn rồi thì tô xanh có dấu tích trắng, nhìn ra ngay đang chọn cái nào */
.pay-opt-tick {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 2px solid var(--border); border-radius: 7px;
  background: #fff; color: transparent; font-size: 11px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pay-opt:hover .pay-opt-tick { border-color: var(--green); }
.pay-opt input:checked + .pay-opt-box .pay-opt-tick {
  background: var(--green); border-color: var(--green); color: #fff;
}
.pay-opt.is-off .pay-opt-tick { background: var(--bg-soft); }

/* Ô đang chọn nổi hẳn lên: viền dày hơn + vệt sáng nhẹ */
.pay-opt input:checked + .pay-opt-box {
  box-shadow: 0 0 0 1px var(--green), 0 4px 14px rgba(60, 90, 10, .08);
}
/* Không đủ số dư → khóa lựa chọn nhưng vẫn cho thấy còn thiếu bao nhiêu */
.pay-opt.is-off { cursor: not-allowed; }
.pay-opt.is-off .pay-opt-box { opacity: .6; background: var(--bg-soft); }
.pay-opt.is-off:hover .pay-opt-box { border-color: var(--border); }

.bank-picker-lb { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.bank-picker[hidden] { display: none; }

/* ---------- Tóm tắt đơn ---------- */
/* --- Đăng nhập / đăng ký ngay trong trang thanh toán --- */
.au-tabs {
  display: flex; gap: 4px; padding: 4px; align-self: flex-start;
  background: var(--bg-soft); border-radius: 999px;
}
.au-tab {
  padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
.au-tab:hover { color: var(--green); }
.au-tab.is-active { background: #fff; color: var(--green-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.au-form { display: flex; flex-direction: column; gap: 13px; margin: 0; }
.au-form[hidden] { display: none; }
.au-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.au-field > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.au-field .input { width: 100%; padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 520px) { .au-row { grid-template-columns: 1fr; } }

.co-item { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line-row); }
.co-thumb {
  width: 64px; height: 48px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--line-card); background: var(--bg-soft); color: var(--faint-2);
}
.co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-item-txt strong { font-size: 13.5px; line-height: 1.35; }
.co-item-txt span { font-size: 12px; color: var(--muted-2); }
.co-submit { margin-top: 2px; }
.co-safe { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; font-size: 12px; color: var(--faint); }
.co-hint {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-md);
  background: #fff8e6; border: 1px solid #f2ddab; font-size: 13px; line-height: 1.55; color: #7a5a12;
}
.co-hint i { color: #d99e14; font-size: 15px; margin-top: 2px; }

/* ---------- Hóa đơn ---------- */
/* ============================================================
   HÓA ĐƠN (/invoice/{id}) — hai cột trên desktop.
     trái  : việc phải làm ngay (chuyển khoản / kết quả), dính khi cuộn
     phải  : tờ hóa đơn thật — có đầu đề, bên bán/bên mua, bảng hàng,
             cột tổng lệch phải và con mộc trạng thái.
   Xếp dọc dưới 980px, cột trái vẫn lên trước.
   ============================================================ */
/* ============================================================
   TRANG HÓA ĐƠN / THANH TOÁN — hai cột, phong cách tối giản.
   Trái: khối thanh toán (QR / kết quả). Phải: tờ hóa đơn.
   Thiết kế "basic": nền trắng, viền mảnh, bóng đổ nhẹ, ít màu — điểm nhấn
   chỉ là màu xanh thương hiệu. Không gradient đậm, không đổ bóng nặng.
   ============================================================ */
.iv { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.iv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iv-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--muted); }
.iv-back:hover { color: var(--green); text-decoration: none; }
.iv-top .pill { display: inline-flex; align-items: center; gap: 6px; }

.iv-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; min-width: 0; }
.iv-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Card chung — viền mảnh, bo vừa, bóng rất nhẹ */
.iv-panel, .iv-doc {
  background: #fff; border: 1px solid var(--line-card); border-radius: 14px;
  overflow: hidden; min-width: 0; box-shadow: 0 1px 3px rgba(30, 50, 10, .05);
}
.iv-panel > .note { margin: 18px; }

/* ---------- Khối thanh toán: đầu (số tiền + đếm giờ) ---------- */
/* Nền xanh RẤT nhạt thay cho dải gradient đậm — nhẹ nhàng, chuyên nghiệp hơn */
.iv-pay-hd { padding: 22px 22px 20px; text-align: center; background: var(--bg-tint); border-bottom: 1px solid var(--line-card); }
.iv-pay-lb { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.iv-pay-hd strong {
  display: block; margin-top: 5px; color: var(--green-deep);
  font-size: clamp(28px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.iv-timer {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 5px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.iv-timer .inv-count { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green-deep); }
.iv-timer:has(.is-soon) { background: #fff0ee; border-color: #f1c3bd; color: #b3261e; }
.iv-timer:has(.is-soon) .inv-count { color: inherit; }
.inv-count.is-out { opacity: .55; }

/* ---------- Khối thanh toán: thân ---------- */
.iv-pay-bd { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.iv-qr { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.iv-qr-img {
  width: 210px; aspect-ratio: var(--qr-ratio, 1 / 1); padding: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line-card); border-radius: 12px;
}
.iv-qr-img > img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.iv-qr-img.qr-fail::after { content: "Không tải được mã QR"; font-size: 12px; color: var(--faint); text-align: center; }
.iv-qr-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.iv-qr-note i { color: var(--green); margin-top: 2px; flex-shrink: 0; }

.iv-or { display: flex; align-items: center; gap: 12px; color: var(--faint-2); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.iv-or::before, .iv-or::after { content: ""; flex: 1; height: 1px; background: var(--line-row); }

/* Số tài khoản — bảng gọn, không khung để nhẹ nhàng */
.iv-rows { display: flex; flex-direction: column; }
.iv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line-row); font-size: 13px; min-width: 0;
}
.iv-row:last-child { border-bottom: 0; }
.iv-row > span { color: var(--faint); flex-shrink: 0; }
.iv-row > b { text-align: right; word-break: break-word; min-width: 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; word-break: break-all; }

/* Nội dung chuyển khoản — hộp nổi bật vừa phải */
.iv-note-ck {
  display: flex; flex-direction: column; gap: 4px; text-align: center;
  padding: 13px 15px; border-radius: 10px; background: var(--bg-tint); border: 1px dashed #a9c37e;
}
.iv-note-lb { font-size: 11.5px; font-weight: 700; color: var(--green-deep); }
.iv-note-lb i { margin-right: 5px; opacity: .7; }
.iv-note-ck > b { font-size: 19px; font-weight: 800; color: var(--green-deep); word-break: break-all; }
.iv-note-ck > em { font-style: normal; font-size: 11px; color: var(--muted-2); line-height: 1.5; }

.iv-wait { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }

/* ---------- Khối kết quả: đã xong / đã hủy ---------- */
.iv-res { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 34px 24px 28px; }
.iv-res-ico {
  width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-tint); color: var(--green); font-size: 26px;
}
.iv-res h1 { margin: 5px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.iv-res p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.iv-res-act { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.iv-res-more { margin-top: 10px; font-size: 12.5px; font-weight: 600; }
.iv-res-more i { font-size: 10px; margin-left: 3px; }
.iv-res.is-dead .iv-res-ico { background: #f7e6e4; color: var(--err-text); }

/* ---------- Tờ hóa đơn ---------- */
/* Cả trang hóa đơn dùng CHUNG font của web (Be Vietnam Pro…), bỏ monospace kiểu
   chữ code cho mã/số — chỉ giữ canh số đều bằng tabular-nums cho gọn mắt. */
.iv .mono, .iv-no b, .iv-timer .inv-count { font-family: inherit; letter-spacing: 0; }
.iv .mono, .iv-no b, .iv-timer .inv-count, .iv-sum, .iv-c-price, .iv-note-ck > b { font-variant-numeric: tabular-nums; }

.iv-doc-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 20px 22px 16px;
}
.iv-doc-title { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.iv-no { display: flex; flex-direction: column; gap: 1px; text-align: right; min-width: 0; }
.iv-no b { font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.iv-no em { font-style: normal; font-size: 11.5px; color: var(--faint); }

.iv-parties { display: grid; grid-template-columns: 1fr; background: #fff; border-bottom: 1px solid var(--line-card); }
.iv-parties > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 24px; background: #fff; min-width: 0; }
.iv-parties span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.iv-parties b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.iv-parties em { font-style: normal; font-size: 12px; color: var(--muted-2); overflow-wrap: anywhere; }

/* Bảng hàng — bốn cột, thoáng */
.iv-tb { padding: 2px 24px 0; }
.iv-tb-hd, .iv-tb-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px 110px; gap: 12px; align-items: center; }
.iv-tb-hd { padding: 12px 0 10px; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.iv-tb-hd span:nth-child(3) { text-align: center; }
.iv-tb-hd span:nth-child(4) { text-align: right; }
.iv-tb-row { padding: 14px 0; border-bottom: 1px solid var(--line-row); font-size: 14px; }
.iv-tb-row:last-child { border-bottom: 0; }
.iv-c-name { font-weight: 700; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.iv-c-plan { font-size: 12.5px; color: var(--muted-2); }
.iv-c-plan i { color: var(--green); margin-right: 4px; }
.iv-c-qty { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.iv-c-qty-sm { display: none; }
.iv-c-price { text-align: right; font-weight: 800; white-space: nowrap; }

.iv-sum { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 24px 20px; border-top: 1px solid var(--line-card); }
.iv-sum-box { width: min(300px, 100%); display: flex; flex-direction: column; gap: 7px; }
.iv-sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--muted); }
.iv-minus { color: #d33a2c; }
.iv-sum-row--tot { margin-top: 3px; padding-top: 11px; border-top: 1.5px solid var(--border); font-size: 18px; font-weight: 800; color: var(--ink); }
.iv-sum-row--tot span:last-child { color: var(--green-deep); letter-spacing: -.02em; }
.iv-tax-note { margin: 8px 0 0; font-size: 11px; color: var(--faint); line-height: 1.5; text-align: right; }

.iv-stamp {
  margin-right: auto; transform: rotate(-10deg);
  padding: 6px 14px; border: 2.5px double currentColor; border-radius: 8px;
  font-size: 15px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green); opacity: .2; white-space: nowrap; user-select: none;
}
.iv-doc.is-dead .iv-stamp { color: #c1392b; }

.iv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; padding: 16px 24px; border-top: 1px solid var(--line-card); background: #fff; }
.iv-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iv-meta span { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.iv-meta b { font-size: 13px; overflow-wrap: anywhere; }
.iv-meta b i { color: var(--green); margin-right: 5px; }

.iv-doc-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 24px; border-top: 1px solid var(--line-row); font-size: 12px; color: var(--faint); }
.iv-doc-ft i { margin-right: 5px; }

@media (max-width: 860px) {
  /* Màn hẹp: một cột, bó gọn cho vừa tầm đọc */
  .iv { max-width: 560px; }
  .iv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .iv-doc-hd, .iv-parties > div, .iv-tb, .iv-sum, .iv-meta, .iv-doc-ft { padding-left: 16px; padding-right: 16px; }
  .iv-parties { grid-template-columns: 1fr; }
  .iv-no { text-align: left; }
  .iv-tb-hd { display: none; }
  .iv-tb-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .iv-c-name  { grid-area: 1 / 1; }
  .iv-c-price { grid-area: 1 / 2; }
  .iv-c-plan  { grid-area: 2 / 1 / 2 / -1; }
  .iv-c-qty   { display: none; }
  .iv-c-qty-sm { display: inline; font-style: normal; }
  .iv-sum-box { width: 100%; }
  .iv-stamp { display: none; }
}

/* Khi in: bỏ hết phần thừa, chỉ còn tờ hóa đơn */
@media print {
  .site-header, .nav-wrapper, .site-footer, .promo-bar, .iv-top, .iv-side,
  .bb-modal, .iv-doc-ft .btn { display: none !important; }
  .iv { max-width: 100%; }
  .iv-grid { display: block; }
  .iv-doc { border: 0; box-shadow: none; }
  .iv-stamp { opacity: .3; }
  body { background: #fff; }
}

/* ============================================================
   CHỌN GÓI (trang chi tiết sản phẩm): vĩnh viễn + các gói thuê
   ============================================================ */
.plan-lb { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-opt { position: relative; display: block; cursor: pointer; }
.plan-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

/* Nút tròn thật thay cho icon dấu tích: icon tích lúc chưa chọn nhìn như
   đã tick sẵn (chỉ khác màu), khách dễ nhầm là đang chọn cả mấy gói. */
.plan-radio {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); background: #fff;
  display: grid; place-items: center;
  transition: border-color .15s;
}
.plan-radio::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); transform: scale(0); transition: transform .15s;
}
.plan-opt input:checked + .plan-box .plan-radio { border-color: var(--green); }
.plan-opt input:checked + .plan-box .plan-radio::after { transform: scale(1); }
/* Bàn phím Tab tới cũng phải thấy đang ở gói nào */
.plan-opt input:focus-visible + .plan-box { outline: 2px solid var(--green); outline-offset: 2px; }

/* Nhãn "Rẻ nhất theo tháng" */
.plan-tag {
  margin-left: 6px; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-tint); color: var(--green-deep);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}

/* Cột giá: tổng tiền ở trên, quy ra mỗi tháng ở dưới */
.plan-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; text-align: right; }
.plan-cost b { font-size: 15px; font-weight: 800; color: var(--green-deep); white-space: nowrap; }
.plan-cost i { font-style: normal; font-size: 11px; color: var(--faint); white-space: nowrap; }

.plan-box {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: #fff;
  transition: border-color .15s, background-color .15s;
}
.plan-opt:hover .plan-box { border-color: var(--green); }
.plan-opt input:checked + .plan-box { border-color: var(--green); background: var(--bg-tint); }
.plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.plan-name em { flex: 1 0 100%; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted-2); }

/* ============================================================
   DASHBOARD — license dạng thẻ (thay bảng cũ)
   ============================================================ */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 18px; }
.lic-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--line-card); border-radius: var(--r-lg); background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lic-card:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(40, 60, 10, .08); }
.lic-card[hidden] { display: none; }
.lic-card.is-soon { border-color: #f0cf8a; background: #fffdf6; }

.lic-top { display: flex; align-items: center; gap: 11px; }
.lic-ico {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 11px; background: var(--bg-tint); color: var(--green-deep); font-size: 15px;
}
.lic-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lic-name strong { font-size: 14.5px; line-height: 1.3; }
.lic-name .pill { align-self: flex-start; }

/* Key: chữ mono to, tự xuống dòng nếu dài, kèm nút copy */
.lic-key {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-soft); border: 1px dashed #cfdcb5;
}
.lic-key code {
  flex: 1; min-width: 0; word-break: break-all;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: var(--green-deep);
}

.lic-rows { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.lic-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lic-row span { color: var(--faint); display: inline-flex; align-items: center; gap: 6px; }
.lic-row span i { width: 13px; text-align: center; }
.lic-row b { font-weight: 700; text-align: right; word-break: break-word; }
.lic-forever { color: var(--green-deep); }

.lic-bar { height: 5px; border-radius: 999px; background: var(--line-row); overflow: hidden; }
.lic-bar-fill { height: 100%; border-radius: 999px; background: var(--green); }
.lic-card.is-soon .lic-bar-fill { background: #e0a52a; }
.lic-left { font-size: 11.5px; color: var(--muted-2); text-align: right; }
.lic-left.is-soon { color: #a8760a; font-weight: 700; }

.lic-soon-txt { color: #a8760a; }

/* Hàng thao tác: ô nhập tên miền + nút đổi key */
.lic-act { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-row); }
.lic-dom {
  display: flex; align-items: center; flex: 1; min-width: 0; margin: 0;
  border: 1.5px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
  transition: border-color .15s;
}
.lic-dom:focus-within { border-color: var(--green); }
.lic-dom > i { padding-left: 11px; color: var(--faint-2); font-size: 12px; }
.lic-dom input {
  flex: 1; min-width: 0; border: 0; outline: 0; padding: 8px 10px;
  font-family: inherit; font-size: 12.5px; background: #fff;
}
.lic-dom button {
  align-self: stretch; border: 0; padding: 0 12px; cursor: pointer; flex-shrink: 0;
  background: var(--bg-tint); color: var(--green-deep); font-size: 12px;
}
.lic-dom button:hover { background: var(--green); color: #fff; }
.lic-newkey {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: #fff; color: var(--muted); font-size: 12.5px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.lic-newkey:hover { border-color: var(--err-text); color: var(--err-text); }

/* ============================================================
   KÊNH LIÊN HỆ (Telegram / Fanpage / Zalo / Hotline)
   ============================================================ */
/* --- Ở chân trang --- */
/* --- Kênh liên hệ ở chân trang ---
   Mỗi kênh một dòng: icon tròn màu thương hiệu + tên kênh + giá trị thật
   (số Zalo / @telegram). Hiện luôn giá trị để khách khỏi phải bấm mới biết. */
.footer-ct {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin: -6px -8px; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
  transition: background-color .15s;
}
.footer-ct:hover { background: var(--bg-hover); text-decoration: none; color: var(--text); }
.footer-ct + .footer-ct { margin-top: 2px; }

.footer-ct-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--ct, var(--green)) 12%, #fff);
  color: var(--ct, var(--green)); font-size: 13px;
}
.footer-ct:hover .footer-ct-ico { background: var(--ct, var(--green)); color: #fff; }

.footer-ct-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.footer-ct-txt b  { font-size: 13px; font-weight: 600; line-height: 1.3; }
.footer-ct-txt em {
  font-style: normal; font-size: 12px; color: var(--muted-2); line-height: 1.35;
  word-break: break-all;
}


/* Bảng tóm tắt trong popup xác nhận trừ số dư */
.swal-pay { text-align: left; font-size: 13.5px; }
.swal-pay-sp { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--bg-soft); font-weight: 700; }
.swal-pay-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; }
.swal-pay-row span { color: var(--muted); }
.swal-pay-row--after { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-row); }
.swal-pay-row--after b { color: var(--green-deep); }
/* Nút "Thanh toán" khóa lại sau khi bấm đồng ý, tránh tạo 2 đơn */
.co-submit.is-busy { opacity: .65; cursor: not-allowed; }

/* Nút copy nhỏ nằm cạnh số tài khoản / số tiền */
.cp-btn {
  border: 0; background: transparent; padding: 2px 5px; margin-left: 5px;
  color: var(--faint); font-size: 12px; cursor: pointer; border-radius: 5px;
}
.cp-btn:hover { color: var(--green); background: var(--bg-tint); }

.sum-rows { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--muted); }
.sum-row { display: flex; justify-content: space-between; }
.sum-row--total { padding-top: 10px; border-top: 1px solid var(--line-row); font-size: 16px; font-weight: 800; color: var(--ink); }

/* Chọn phương thức: radio ẩn, nhãn thành nút pill */
.pay-methods { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-method { flex: 1; min-width: 96px; position: relative; }
.pay-method input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pay-method span {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  text-align: center; padding: 9px 11px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--border); background: #fff; color: var(--text);
}
.pay-method span img { height: 20px; width: auto; display: block; }
/* Chip được chọn: viền + nền tint (không đổ màu đặc để logo luôn đọc được) */
.pay-method input:checked + span { border-color: var(--green); background: var(--bg-tint); box-shadow: inset 0 0 0 1px var(--green); }

/* Dải "hình thức thanh toán" ở trang chủ */
.post-more i { font-size: 11px; }
.pay-strip { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: center; background: linear-gradient(135deg, #f4f9ea 0%, #e6f1d2 100%); border: 1px solid #dfe8cf; border-radius: 22px; padding: clamp(26px, 5vw, 46px); }
.pay-strip-blob { position: absolute; border-radius: 50%; }
.pay-strip-blob--tr { top: -90px; right: -70px; width: 260px; height: 260px; background: rgba(159, 206, 90, .16); }
.pay-strip-blob--bl { bottom: -110px; left: -80px; width: 300px; height: 300px; background: rgba(78, 137, 0, .08); }
.pay-strip-copy { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pay-eyebrow { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #d8e4c2; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pay-title { margin: 0; font-size: clamp(22px, 3.6vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pay-sub { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 440px; }
.pay-points { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.pay-point { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); }
.pay-point i { width: 27px; height: 27px; border-radius: 8px; background: #fff; color: var(--green); display: grid; place-items: center; font-size: 12px; box-shadow: 0 4px 12px rgba(60, 90, 10, .12); flex-shrink: 0; }
.pay-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pay-card { background: #fff; border: 1px solid #e3ead6; border-radius: 16px; padding: 22px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; box-shadow: 0 6px 18px rgba(60, 90, 10, .06); transition: transform .18s, box-shadow .18s; }
.pay-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(60, 90, 10, .16); }
.pay-card-logo { height: 34px; display: flex; align-items: center; justify-content: center; }
.pay-card-logo img { max-height: 30px; max-width: 112px; display: block; }
.pay-card-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.pay-card-tag { font-size: 11px; color: var(--faint); margin-top: -4px; }
@media (max-width: 760px) {
  .pay-strip { grid-template-columns: 1fr; }
  /* Điện thoại: mỗi phương thức 1 hàng, logo trái - chữ phải */
  .pay-cards { grid-template-columns: 1fr; }
  .pay-card { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 16px; text-align: left; }
  .pay-card-logo { height: auto; width: 56px; flex-shrink: 0; }
  .pay-card-logo img { max-height: 26px; max-width: 56px; }
  .pay-card-name { font-size: 13.5px; }
  .pay-card-tag { margin-top: 0; margin-left: auto; }
}

/* --- Chọn tài khoản nhận tiền (checkout) --- */
.bank-picker { display: flex; flex-direction: column; gap: 10px; }
.bank-opt { position: relative; display: block; cursor: pointer; }
.bank-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bank-opt-box { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: #fff; }
.bank-opt input:checked + .bank-opt-box { border-color: var(--green); background: var(--bg-tint); }
.bank-opt-logo { width: 46px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: #fff; border: 1px solid var(--line-card); color: var(--muted-2); }
.bank-opt-logo img { max-width: 40px; max-height: 26px; display: block; }
.bank-opt-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.bank-opt-info .mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--text); letter-spacing: .03em; }
.bank-opt-owner { font-size: 12px; color: var(--faint); }
/* Cùng kiểu ô đánh dấu với .pay-opt-tick cho đồng bộ */
.bank-opt-tick {
  margin-left: auto; width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 2px solid var(--border); border-radius: 7px;
  background: #fff; color: transparent; font-size: 11px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bank-opt:hover .bank-opt-tick { border-color: var(--green); }
.bank-opt input:checked + .bank-opt-box .bank-opt-tick {
  background: var(--green); border-color: var(--green); color: #fff;
}

/* --- Hóa đơn: mã chuyển khoản, chờ nhận tiền, thành công --- */
.paycode-box { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; border: 1.5px dashed var(--green); border-radius: var(--r-md); background: var(--bg-tint); }
.paycode-label { font-size: 12.5px; color: var(--muted); }
.paycode-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paycode { font-family: ui-monospace, Menlo, monospace; font-size: clamp(19px, 4vw, 24px); font-weight: 700; letter-spacing: .12em; color: var(--green-deep); background: #fff; border: 1px solid var(--line-card); border-radius: 8px; padding: 7px 14px; }
.paycode-hint { font-size: 12px; color: var(--muted-2); }

.pay-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.spinner { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: bbSpin .8s linear infinite; }
@keyframes bbSpin { to { transform: rotate(360deg); } }

.pay-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px 8px; }
.pay-done i { font-size: 46px; color: var(--green); }
.pay-done strong { font-size: 18px; }
.pay-done span { font-size: 13.5px; color: var(--muted); }

.qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; background: var(--bg-soft); border: 1px dashed #b7cd8f; border-radius: var(--r-lg); }
.qr-img { width: 172px; height: 172px; border-radius: 12px; background: #fff; border: 1px solid var(--line-card); display: grid; place-items: center; overflow: hidden; }
.qr-img > img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.qr-img .ph-label { font-size: 11px; text-align: center; }
.qr-img.qr-fail::after { content: "VietQR"; font-size: 11px; color: var(--faint); }
.qr-note { font-size: 12px; color: var(--muted); text-align: center; max-width: 260px; line-height: 1.5; }

.bank-rows { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.bank-row { display: flex; justify-content: space-between; gap: 12px; }
.bank-row span { color: var(--faint); }
.bank-row strong.mono { font-family: ui-monospace, Menlo, monospace; }
.bank-row strong.hl { font-family: ui-monospace, Menlo, monospace; color: var(--green); }

/* ---------- 8) ĐĂNG NHẬP / ĐĂNG KÝ ---------- */
.auth-grid { min-height: 100vh; display: grid; grid-template-columns: 1.02fr .98fr; background: var(--bg); }
.auth-col { display: flex; flex-direction: column; padding: clamp(20px, 3.5vw, 36px) clamp(20px, 5vw, 64px); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.auth-form { margin: auto; width: 100%; max-width: 430px; display: flex; flex-direction: column; gap: 20px; }
.auth-card-form { background: #fff; border: 1px solid var(--line-card); border-radius: 5px; padding: clamp(24px, 4vw, 34px); }
.auth-foot { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--faint-2); }

.auth-head { display: flex; flex-direction: column; gap: 9px; }
.auth-title { margin: 0; font-size: clamp(24px, 4.6vw, 29px); font-weight: 800; letter-spacing: -.02em; }
.auth-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.auth-fields { display: flex; flex-direction: column; gap: 15px; }
.auth-form .input { width: 100%; padding: 13px 15px; border-radius: 12px; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.auth-form .input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(159, 206, 90, .22); outline: none; }
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); border: none; background: transparent; font-size: 15px; line-height: 1; padding: 7px 9px; border-radius: 9px; cursor: pointer; }
.pw-toggle:hover { background: var(--bg-tint); }

.auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.auth-remember { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.auth-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.auth-agree input { margin-top: 2px; }
.auth-switch { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.auth-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

/* Nút submit tối giản: nền xanh phẳng của .btn--primary, không shadow/hiệu ứng */
.btn-auth { margin-top: 4px; border-radius: 5px; }

/* --- Đăng nhập bằng Google --- */
/* Vạch "hoặc": đường kẻ hai bên chữ, làm bằng flex + pseudo cho khỏi cần ảnh */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px;
  font-size: 13px; color: var(--muted);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #e6ece0);
}
/* Nút theo đúng hướng dẫn nhận diện của Google: nền trắng, viền xám, chữ đậm */
.btn--google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 0;
  background: #fff; color: #3c4043;
  border: 1px solid #dadce0;
  font-weight: 600;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn--google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, .18); }
.btn--google svg { flex-shrink: 0; }

/* --- Panel phải: nền tối + mock license card --- */
.auth-panel { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 60px); background: radial-gradient(1100px 700px at 85% -10%, #33491b 0%, #1e2913 48%, #131b0b 100%); }
.auth-panel-blob { position: absolute; border-radius: 50%; }
.auth-panel-blob--br { inset: auto -90px -130px auto; width: 360px; height: 360px; background: rgba(159, 206, 90, .13); }
.auth-panel-blob--tl { top: -110px; left: -70px; width: 300px; height: 300px; background: rgba(159, 206, 90, .09); }
.auth-panel-inner { position: relative; display: flex; flex-direction: column; gap: 24px; width: min(430px, 100%); }

.auth-panel-copy { display: flex; flex-direction: column; gap: 8px; }
.auth-panel-title { font-size: clamp(20px, 2.6vw, 25px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.auth-panel-sub { font-size: 13.5px; line-height: 1.65; color: #b9c7a6; }

.auth-feats { display: flex; flex-direction: column; gap: 10px; }
.auth-feat { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #dde8cd; }
.auth-feat .fk { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: rgba(159, 206, 90, .18); color: var(--lime); font-size: 12px; font-weight: 800; }

.auth-stats { display: flex; gap: clamp(18px, 3vw, 30px); padding-top: 18px; border-top: 1px solid rgba(159, 206, 90, .16); }
.auth-stat strong { display: block; font-size: 18px; color: var(--lime); letter-spacing: -.01em; }
.auth-stat span { font-size: 11.5px; color: #8fa079; }

/* --- SweetAlert2 đồng bộ giao diện site --- */
.swal2-popup { font-family: 'Be Vietnam Pro', system-ui, sans-serif !important; border-radius: 8px !important; }
.swal2-title { letter-spacing: -.01em; font-size: 20px !important; font-weight: 600 !important; }
.swal2-html-container { font-weight: 400 !important; }
/* Nút: vuông vắn (không bo tròn), chữ thường — đổi 4px→0 nếu muốn vuông hẳn */
.swal2-styled { border-radius: 4px !important; font-weight: 500 !important; box-shadow: none !important; }

@media (max-width: 860px) { .auth-grid { grid-template-columns: 1fr; } }

/* ---------- 9) DASHBOARD KHÁCH ---------- */
.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-title { margin: 0; font-size: clamp(23px, 4.4vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.page-sub { margin: 0; font-size: 14px; color: var(--muted); }

.btn-dot { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #e65100; color: #fff; font-size: 11px; }

/* ============================================================
   KHU VỰC KHÁCH HÀNG (/dashboard, /license/{id})
   Bố cục kiểu client area: cột trái thông tin + liên kết nhanh,
   cột phải là các ô số liệu và khối nội dung có vạch màu.
   ============================================================ */
.ca { display: flex; flex-direction: column; gap: 18px; }

/* --- Tiêu đề + breadcrumb --- */
.ca-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ca-head h1 { margin: 0 0 6px; font-size: clamp(21px, 3.6vw, 27px); font-weight: 800; letter-spacing: -.02em; }
.ca-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.ca-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--faint-2); }
.ca-crumb a { color: var(--green); }
.ca-crumb .is-active { color: var(--faint); }

/* --- Lưới 2 cột --- */
.ca-grid { display: grid; grid-template-columns: 262px 1fr; gap: 18px; align-items: start; }
.ca-side, .ca-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) {
  .ca-grid { grid-template-columns: 1fr; }
  .ca-side { order: 2; }          /* điện thoại: nội dung chính lên trước */
}

/* --- Khối panel dùng chung --- */
.ca-panel { background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg); overflow: hidden; }
.ca-panel-hd {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--line-row);
  background: var(--bg-thead); font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
}
.ca-panel-hd > i:first-child { color: var(--green); font-size: 15px; }
.ca-panel-hd .pill { font-weight: 700; }
.ca-hd-btn { margin-left: auto; }
.ca-panel-bd { padding: 16px; }
.ca-panel-ft { padding: 12px 14px; border-top: 1px solid var(--line-row); background: var(--bg-soft); }
/* Vạch màu trên đầu khối (kiểu panel-accent) */
.ca-accent-gold  { border-top: 3px solid #e0a52a; }
.ca-accent-blue  { border-top: 3px solid #2f7fd4; }
.ca-accent-green { border-top: 3px solid var(--green); }
.ca-accent-red   { border-top: 3px solid #d3452f; }

.ca-count { padding: 2px 9px; border-radius: 999px; background: var(--bg-tint); color: var(--green-deep); font-size: 12px; }
.ca-search {
  margin-left: auto; width: min(220px, 46vw);
  padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: 12.5px; background: #fff; outline: 0; font-weight: 500;
}
.ca-search:focus { border-color: var(--green); }
.ca-empty { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.ca-panel-bd .ca-empty + .btn { margin-top: 12px; }

/* Nút phụ nằm bên phải tiêu đề khối (vd "Gửi yêu cầu" ở khối hỗ trợ) */
.ca-panel-act {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--green);
}
.ca-panel-act:hover { color: var(--green-hover); text-decoration: none; }
.ca-panel-act i { font-size: 10px; }

/* ============================================================
   TÀI KHOẢN KHÁCH (/profile, /password)
   Nằm trong khung .ca-* của khu vực khách hàng.
   ============================================================ */
.ac-flash {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  padding: 12px 15px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.55;
}
.ac-flash.is-ok  { background: var(--bg-tint); border: 1px solid #c3d9a0; color: var(--green-deep); }
.ac-flash.is-err { background: var(--err-bg);  border: 1px solid var(--err-line); color: var(--err-text); }
.ac-flash i { font-size: 15px; margin-top: 1px; }

/* Tab chuyển giữa Thông tin cá nhân ↔ Đổi mật khẩu */
.ac-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ac-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.ac-tab:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.ac-tab.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.ac-tab i { font-size: 13px; }

.ac-form { display: flex; flex-direction: column; gap: 17px; padding: 20px; }
.ac-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ac-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-lb { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ac-lb > em { font-style: normal; color: #d33a2c; }
.ac-hint { font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.ac-hint i { color: #d99e14; margin-right: 3px; }
.ac-hint.is-bad { color: #d33a2c; }
.ac-hint.is-good { color: var(--green); }

/* Ảnh đại diện (chỉ xem, sinh tự động theo tên) */
.ac-ava { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.ac-ava-img {
  width: 62px; height: 62px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--bg-tint); border: 1px solid var(--line-card);
}
.ac-ava-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-ava-txt { display: flex; flex-direction: column; gap: 2px; }
.ac-ava-txt b { font-size: 14px; }
.ac-ava-txt span { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Ô tick nhận email */
.ac-check {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 13px 15px; border-radius: var(--r-md);
  background: var(--bg-soft); border: 1px solid var(--line-card);
}
.ac-check input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--green); cursor: pointer; }
.ac-check span { display: flex; flex-direction: column; gap: 2px; }
.ac-check b  { font-size: 13.5px; }
.ac-check em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Ô mật khẩu + nút con mắt */
.ac-pw { position: relative; display: block; }
.ac-pw > .input { width: 100%; padding-right: 42px; }
.ac-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--faint); font-size: 13px;
}
.ac-eye:hover { background: var(--bg-tint); color: var(--green); }

/* Thanh đo độ mạnh mật khẩu */
.ac-meter { display: block; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ac-meter > b { display: block; height: 100%; width: 0; border-radius: 999px; background: #d33a2c; transition: width .2s, background-color .2s; }
.ac-meter.is-2 > b { background: #e0a52a; }
.ac-meter.is-3 > b { background: #7aa832; }
.ac-meter.is-4 > b { background: var(--green); }

.ac-warn {
  display: flex; gap: 10px; padding: 12px 15px; border-radius: var(--r-md);
  background: var(--bg-tint); border: 1px dashed #b7cd8f;
  font-size: 12.5px; line-height: 1.55; color: var(--green-deep);
}
.ac-warn i { color: var(--green); font-size: 14px; margin-top: 2px; }

.ac-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

/* Bảng thông tin chỉ đọc */
.ac-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; padding: 18px 20px;
}
.ac-meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-meta span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.ac-meta b { font-size: 14px; }
.ac-bal { color: var(--green-deep); }

@media (max-width: 560px) {
  .ac-row2 { grid-template-columns: 1fr; }
  .ac-tab { flex: 1; justify-content: center; }
}

/* --- Phân trang trong khu vực khách hàng --- */
.ca-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line-row); background: var(--bg-soft);
}
.ca-pager-info { font-size: 12.5px; color: var(--muted); }
.ca-pager-info b { color: var(--ink); }
.ca-pager-nav { display: flex; align-items: center; gap: 5px; }
.ca-pg {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .14s, background-color .14s, color .14s;
}
.ca-pg:hover { border-color: var(--green); color: var(--green); text-decoration: none; background: var(--bg-tint); }
.ca-pg.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.ca-pg.is-off { opacity: .4; pointer-events: none; }
.ca-pg-gap { padding: 0 2px; color: var(--faint-2); font-size: 13px; }

@media (max-width: 560px) {
  .ca-pager { justify-content: center; padding: 12px; }
  .ca-pager-info { width: 100%; text-align: center; }
}

/* Số tin nhắn trong 1 yêu cầu hỗ trợ */
.ca-msgn {
  margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: var(--bg-tint); color: var(--green-deep);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* --- Cột trái: thông tin tài khoản --- */
.ca-me { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ca-ava { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; background: var(--bg-tint); border: 1px solid var(--line-card); margin-bottom: 4px; }
.ca-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-me strong { font-size: 15px; }
.ca-me em { font-style: normal; font-size: 12.5px; color: var(--muted); word-break: break-all; }
.ca-me-join { font-size: 11.5px; color: var(--faint-2); }
.ca-wallet {
  width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--bg-tint); border: 1px solid #d7e4bd;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ca-wallet span { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ca-wallet b { font-size: 15px; color: var(--green-deep); }

/* --- Cột trái: liên kết nhanh --- */
.ca-links { display: flex; flex-direction: column; }
.ca-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-row);
  font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none;
  transition: background-color .14s, color .14s;
}
.ca-links a:last-child { border-bottom: 0; }
.ca-links a i { width: 16px; text-align: center; color: var(--muted-2); font-size: 13px; }
.ca-links a:hover { background: var(--bg-tint); color: var(--green); text-decoration: none; }
.ca-links a:hover i { color: var(--green); }
.ca-links a.is-out { color: var(--err-text); }
.ca-links a.is-out i { color: var(--err-text); }
.ca-badge { margin-left: auto; min-width: 19px; padding: 1px 6px; border-radius: 999px; background: #e65100; color: #fff; font-size: 11px; text-align: center; }

/* --- 4 ô số liệu bấm được ---
   Mỗi ô mang một màu chủ đề (--tile) dùng chung cho ô icon, vạch trái và
   trạng thái hover, nên chỉ cần đổi 1 biến là đổi cả ô. */
.ca-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px) { .ca-tiles { grid-template-columns: repeat(2, 1fr); } }

.ca-tile {
  --tile: #2f7fd4;
  --tile-soft: #e7f0fb;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; background: #fff;
  border: 1px solid var(--line-card); border-left: 4px solid var(--tile);
  border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ca-tile.is-green { --tile: #5f9720; --tile-soft: #e9f4d8; }
.ca-tile.is-gold  { --tile: #d99b1c; --tile-soft: #fdf1d9; }
.ca-tile.is-red   { --tile: #d3452f; --tile-soft: #fbe9e6; }

.ca-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(40, 60, 10, .1);
  border-color: var(--line-card); border-left-color: var(--tile);
  text-decoration: none; color: var(--ink);
}
.ca-tile-ico {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 12px; background: var(--tile-soft); color: var(--tile); font-size: 17px;
  transition: background-color .16s ease, color .16s ease;
}
.ca-tile:hover .ca-tile-ico { background: var(--tile); color: #fff; }

.ca-tile-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ca-tile-txt b { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
/* Cho nhãn XUỐNG DÒNG chứ đừng cắt bằng dấu …: ô chỉ rộng ~200px khi xếp 4 cột,
   "Đang hiệu lực" và "Yêu cầu hỗ trợ" đều bị cụt. Thà cao thêm một dòng. */
.ca-tile-txt > span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint);
  line-height: 1.3;
}
/* Mũi tên mờ, hiện rõ và nhích sang khi rê chuột */
.ca-tile-go {
  flex-shrink: 0; font-size: 12px; color: var(--faint-2); opacity: 0;
  transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease, color .16s ease;
}
.ca-tile:hover .ca-tile-go { opacity: 1; transform: translateX(0); color: var(--tile); }
/* Màn cảm ứng không có hover → luôn hiện mũi tên cho biết bấm được */
@media (hover: none) { .ca-tile-go { opacity: .5; transform: none; } }

/* --- 4 ô số liệu trên điện thoại ---
   Giữ 2 cột (xếp 1 cột thì 4 ô đẩy nội dung xuống quá sâu), nhưng đổi sang
   bố cục DỌC: icon trên, số giữa, nhãn dưới. Nằm ngang trong ô hẹp thì
   nhãn kiểu "Yêu cầu hỗ trợ" bị cắt cụt còn "Yêu cầu h…". */
@media (max-width: 560px) {
  .ca-tiles { gap: 10px; }
  .ca-tile {
    flex-direction: column; align-items: flex-start; gap: 9px;
    padding: 13px 12px; border-left-width: 3px; border-radius: var(--r-md);
  }
  .ca-tile-ico { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .ca-tile-txt { gap: 2px; width: 100%; }
  .ca-tile-txt b { font-size: 20px; }
  .ca-tile-txt > span { font-size: 10.5px; line-height: 1.35; letter-spacing: .03em; }
  /* Mũi tên bỏ hẳn: ô hẹp, cả ô đã bấm được rồi, giữ lại chỉ tốn chỗ */
  .ca-tile-go { display: none; }
}

/* --- Dải nhắc gia hạn --- */
.ca-warn {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--r-md);
  background: #fff8e6; border: 1px solid #f2ddab; color: #7a5a12; font-size: 13.5px;
}
.ca-warn i { color: #d99e14; font-size: 16px; }
.ca-warn div { flex: 1; min-width: 180px; }

/* Thẻ nhắc gia hạn (dashboard): icon tròn + tiêu đề + phụ đề + nút, gọn gàng.
   ĐỎ = có dịch vụ đã hết hạn (khẩn); VÀNG = chỉ sắp hết hạn. */
.ca-alert {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--r-lg); border: 1px solid transparent;
}
.ca-alert-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
}
.ca-alert-txt { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
.ca-alert-txt b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ca-alert-txt span { font-size: 13px; opacity: .82; }
.ca-alert-cta { flex-shrink: 0; }
.ca-alert--red  { background: #fdecec; border-color: #f4bcbc; color: #8a1f1f; }
.ca-alert--red  .ca-alert-ico { background: #fadadd; color: #d92d2d; }
.ca-alert--warn { background: #fff8e6; border-color: #f2ddab; color: #7a5a12; }
.ca-alert--warn .ca-alert-ico { background: #fbe7ba; color: #d99e14; }
.ca-alert--info    { background: #eaf3fd; border-color: #bcd8f4; color: #1c4e86; }
.ca-alert--info    .ca-alert-ico { background: #d6e8fb; color: #1565c0; }
.ca-alert--success { background: #eaf7ec; border-color: #b9e2c0; color: #1f6b32; }
.ca-alert--success .ca-alert-ico { background: #d3efd8; color: #2e9e46; }
/* Thông báo dashboard: cho phép xuống dòng dài, canh trên cho gọn */
.ca-notice { align-items: flex-start; }
.ca-notice .ca-alert-txt span { opacity: .9; }
@media (max-width: 560px) {
  .ca-alert { flex-wrap: wrap; gap: 12px; }
  .ca-alert-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   CHI TIẾT BẢN QUYỀN (/license/{id})
   ============================================================ */
.lc-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lc-thumb {
  width: 84px; height: 62px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--line-card); background: var(--bg-soft); color: var(--faint-2);
}
.lc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-key-box { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.lc-key-lb { font-size: 12px; color: var(--muted); }
.lc-key-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-key-row code {
  flex: 1; min-width: 0; word-break: break-all;
  padding: 9px 14px; border-radius: var(--r-sm);
  background: var(--bg-tint); border: 1px dashed #b7cd8f;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(14px, 2.6vw, 17px); font-weight: 700; letter-spacing: .1em; color: var(--green-deep);
}

.lc-time { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-row); display: flex; flex-direction: column; gap: 8px; }
.lc-time-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }

.lc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .lc-cols { grid-template-columns: 1fr; } }

.lc-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.lc-list li { display: flex; justify-content: space-between; gap: 12px; }
.lc-list span { color: var(--faint); }
.lc-list b { text-align: right; word-break: break-word; }

.lc-manage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .lc-manage { grid-template-columns: 1fr; } }
.lc-form { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.lc-form label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lc-form small { font-size: 11.5px; color: var(--faint-2); line-height: 1.5; }
.lc-form > .btn { align-self: flex-start; }
.lc-input { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding-left: 11px; }
.lc-input:focus-within { border-color: var(--green); }
.lc-input > i { color: var(--faint-2); font-size: 13px; }
.lc-input input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 9px 4px; font-family: inherit; font-size: 13px; background: transparent; }
.lc-input .btn { margin: 4px; }

.lc-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lc-log li { display: flex; gap: 11px; font-size: 13px; line-height: 1.5; }
.lc-log-dot { width: 9px; height: 9px; margin-top: 5px; flex-shrink: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--bg-tint); }
.lc-log em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--faint-2); }

/* --- Dashboard cũ (giữ cho các trang khác chưa đổi) --- */
.db { display: flex; flex-direction: column; gap: 16px; }

/* --- Đầu trang: tài khoản + ví + lối tắt --- */
.db-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg);
}
.db-user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.db-ava {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--bg-tint); border: 1px solid var(--line-card);
}
.db-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-user-txt { min-width: 0; }
.db-user-txt h1 { margin: 0 0 3px; font-size: clamp(18px, 3vw, 21px); font-weight: 800; letter-spacing: -.02em; }
.db-user-txt p { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.db-user-txt p span { display: inline-flex; align-items: center; gap: 6px; }
.db-user-txt p i { color: var(--faint-2); }

.db-head-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-wallet {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 16px;
  border-radius: var(--r-md); background: var(--bg-tint); border: 1px solid #d7e4bd;
}
.db-wallet span { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.db-wallet strong { font-size: 17px; font-weight: 800; color: var(--green-deep); letter-spacing: -.01em; }

/* --- 4 thẻ số liệu, tất cả cùng một kiểu --- */
.db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.db-stat {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-lg);
  transition: border-color .16s ease;
}
.db-stat:hover { border-color: var(--green); }
.db-stat-ico {
  width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 12px; background: var(--bg-tint); color: var(--green-deep); font-size: 16px;
}
.db-stat-ico.is-ok { background: #e6f4d9; color: var(--green); }
.db-stat-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.db-stat-lb { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.db-stat-txt strong { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.db-stat-note { font-size: 11.5px; color: var(--faint-2); }

/* --- Dải nhắc gia hạn --- */
.db-warn {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--r-md);
  background: #fff8e6; border: 1px solid #f2ddab; color: #7a5a12; font-size: 13.5px;
}
.db-warn i { color: #d99e14; font-size: 16px; }
.db-warn div { flex: 1; min-width: 180px; }

/* --- Tiêu đề khối: thêm số đếm + ô tìm --- */
.db-count {
  min-width: 22px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-tint); color: var(--green-deep); font-size: 12px; font-weight: 800;
}
.db-search {
  margin-left: auto; width: min(230px, 45vw);
  padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: 12.5px; background: #fff; outline: 0;
}
.db-search:focus { border-color: var(--green); }

/* --- Khối rỗng --- */
.db-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(26px, 5vw, 40px) 20px; text-align: center; }
.db-empty-ico {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-soft); color: var(--faint-2); font-size: 22px;
}
.db-empty strong { font-size: 15.5px; }
.db-empty > span { font-size: 13px; color: var(--muted); max-width: 320px; line-height: 1.55; }

/* Bảng đơn hàng nằm sát mép thẻ */
.db-table { margin: 0; }

/* Khối rỗng dùng chung (license, đơn hàng, ticket) */
.empty-box { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: clamp(30px, 6vw, 48px) 20px; text-align: center; }
.empty-box > i { font-size: 34px; color: var(--faint-2); }
.empty-box strong { font-size: 15.5px; }
.empty-box span { font-size: 13.5px; color: var(--muted); max-width: 340px; }
.empty-box .btn { margin-top: 6px; }

/* Nút copy key trong bảng */
.key-copy { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 2px 5px; border-radius: 5px; font-size: 12px; }
.key-copy:hover { background: var(--bg-tint); color: var(--green); }

/* ============================================================
   TRANG HỖ TRỢ (/support)
   Dải đầu trang → kênh liên hệ nhanh → 2 cột (form | danh sách).
   ============================================================ */
.sp { max-width: 1120px; margin: 0 auto; gap: 18px; }

/* --- Dải đầu trang (tiêu đề + số liệu + kênh liên hệ) --- */
.sp-hero {
  padding: clamp(20px, 3.5vw, 28px) clamp(20px, 3.5vw, 30px); border-radius: var(--r-xl);
  background: linear-gradient(135deg, #2f4211 0%, #4a6b16 58%, #5a8419 100%);
  color: #fff;
}
.sp-hero-top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.sp-hero-txt { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-hero-ico {
  width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 16px; background: rgba(255, 255, 255, .15); font-size: 23px;
}
.sp-hero h1 { margin: 0; font-size: clamp(20px, 3.4vw, 26px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sp-hero p  { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }

.sp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-stat {
  min-width: 92px; padding: 10px 16px; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
}
.sp-stat b {
  display: block; font-size: 22px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sp-stat span { font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.sp-stat.is-open { background: rgba(255, 214, 130, .22); border-color: rgba(255, 214, 130, .4); }

/* --- Kênh liên hệ, nằm trong dải đầu trang ---
   Nền tối nên thẻ dùng lớp trắng mờ; rê chuột thì icon bừng lên đúng màu
   thương hiệu của kênh (--ch do PHP đặt). */
.sp-chan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .17);
}
.sp-chan-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: var(--r-md); text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color .15s, border-color .15s, transform .15s;
}
.sp-chan-item:hover {
  color: #fff; text-decoration: none; transform: translateY(-2px);
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .32);
}
.sp-chan-ico {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
  background: #fff; color: var(--ch, var(--green)); font-size: 16px;
  transition: transform .15s;
}
.sp-chan-item:hover .sp-chan-ico { transform: scale(1.06); }
.sp-chan-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-chan-txt b  { font-size: 13.5px; font-weight: 700; }
.sp-chan-txt em {
  font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-chan-go { margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, .55); flex-shrink: 0; }
.sp-chan-item:hover .sp-chan-go { color: #fff; }

/* --- Hai cột --- */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 18px; align-items: start; }

.sp-card {
  background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 50, 10, .04), 0 12px 30px rgba(30, 50, 10, .05);
}
.sp-card-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 20px; border-bottom: 1px solid var(--line-card); background: var(--bg-thead);
  font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
}
.sp-card-hd > i:first-child { color: var(--green); font-size: 15px; }
.sp-count {
  margin-left: auto; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-tint); color: var(--green-deep); font-size: 12px; font-weight: 700;
}

/* --- Form gửi yêu cầu --- */
.sp-form { display: flex; flex-direction: column; gap: 15px; padding: 20px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-lb { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sp-lb > em { font-style: normal; color: #d33a2c; }
.sp-lb .sp-opt { font-weight: 500; color: var(--faint-2); }
.sp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sp-form textarea.input { resize: vertical; font-family: inherit; line-height: 1.6; }

.sp-tips {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r-md);
  background: var(--bg-tint); border: 1px dashed #b7cd8f;
  font-size: 12.5px; line-height: 1.55; color: var(--green-deep);
}
.sp-tips i { color: #b58a12; font-size: 14px; margin-top: 2px; }
.sp-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--faint); }

/* --- Danh sách yêu cầu --- */
.sp-list { display: flex; flex-direction: column; }
.sp-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 14px 16px; border-bottom: 1px solid var(--line-row);
  color: var(--ink); text-decoration: none; transition: background-color .14s;
}
.sp-item:last-child { border-bottom: 0; }
.sp-item:hover { background: var(--bg-hover); color: var(--ink); text-decoration: none; }
/* Chấm trạng thái bên trái, thay cho cả một cột badge */
.sp-item-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--faint-2); }
.sp-item.is-open .sp-item-dot     { background: #e0a52a; }
.sp-item.is-answered .sp-item-dot { background: var(--green); }
.sp-item.is-closed .sp-item-dot   { background: var(--faint-2); }
.sp-item.has-new .sp-item-dot { box-shadow: 0 0 0 4px rgba(78, 137, 0, .16); }

.sp-item-bd { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sp-item-top { display: flex; align-items: center; gap: 9px; }
.sp-item-code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--green); letter-spacing: .02em; }
.sp-item-sub {
  font-size: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-item-meta { display: flex; gap: 13px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted-2); }
.sp-item-meta i { color: var(--faint-2); margin-right: 3px; }
.sp-item-go { font-size: 11px; color: var(--faint-2); flex-shrink: 0; }
.sp-item:hover .sp-item-go { color: var(--green); }

.sp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.sp-empty-ico {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-tint); color: var(--green); font-size: 24px; margin-bottom: 4px;
}
.sp-empty strong { font-size: 15px; }
.sp-empty span   { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 300px; }

@media (max-width: 900px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-hero-top { flex-direction: column; align-items: stretch; }
  .sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .sp-row2 { grid-template-columns: 1fr; }
  .sp-hero-txt { flex-direction: column; align-items: flex-start; gap: 12px; }
}

.ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.ticket-head-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.ticket-head-meta i { color: var(--faint-2); margin-right: 3px; }

.chat-box { display: flex; flex-direction: column; gap: 14px; }
.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.chat-msg--admin { flex-direction: row-reverse; }
.chat-ava { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bg-tint); color: var(--green); }
.chat-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-msg--admin .chat-ava { background: var(--dark); color: var(--lime); }
.chat-body { max-width: min(620px, 82%); background: #fff; border: 1px solid var(--line-card); border-radius: 14px; padding: 12px 15px; }
.chat-msg--admin .chat-body { background: var(--bg-tint); border-color: #cfe0b3; }
.chat-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.chat-meta strong { font-size: 13px; }
.chat-meta span { font-size: 11.5px; color: var(--faint); }
.chat-text { font-size: 14px; line-height: 1.65; color: var(--text); word-break: break-word; }
/* Tin của hỗ trợ viên là HTML (CKEditor) — bó lại cho vừa bong bóng chat */
.chat-text.rich p, .chat-text.rich ul, .chat-text.rich ol { margin: 0 0 8px; }
.chat-text.rich ul, .chat-text.rich ol { padding-left: 20px; }
.chat-text.rich h1, .chat-text.rich h2, .chat-text.rich h3, .chat-text.rich h4 { margin: 10px 0 6px; font-size: 15px; }
.chat-text.rich table { font-size: 13px; }

.reply-form { gap: 12px; }
.reply-form textarea.input { resize: vertical; font-family: inherit; line-height: 1.6; }
.reply-form .btn { align-self: flex-start; }

/* --- Trang blog: thanh công cụ, phân trang, bài chi tiết --- */
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.blog-search { display: flex; gap: 8px; }
.blog-search input {
  padding: 10px 15px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-size: 14px; font-family: inherit; min-width: 230px; outline-color: var(--green);
}

.site-pager { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.site-page { min-width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0 11px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none; }
.site-page:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.site-page.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.site-page.is-off { opacity: .4; pointer-events: none; }

.article { display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin: 0 auto; width: 100%; }
.article-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.article-title { margin: 0; font-size: clamp(24px, 4.6vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.article-meta i { color: var(--faint-2); margin-right: 4px; }
/* Ảnh bìa bài viết: hiện nguyên ảnh, chỉ bo góc + đổ bóng nhẹ.
   Không ép tỉ lệ cố định → ảnh dọc hay ngang đều không bị cắt mất phần nào.
   max-width do PHP đặt bằng kích thước gốc nên ảnh nhỏ không bị kéo giãn vỡ nét. */
.article-cover { margin: 4px auto; width: 100%; }
.article-cover img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-card); border-radius: var(--r-xl);
  box-shadow: 0 10px 30px rgba(30, 50, 10, .1);
}
.article-lead { margin: 0; padding-left: 15px; border-left: 3px solid var(--lime); font-size: 16px; line-height: 1.7; color: var(--muted); }
.article-body { font-size: 15.5px; line-height: 1.85; color: var(--text); }
.article-foot { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.related { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }

/* ============================================================
   .rich — kiểu chữ cho MỌI nội dung admin soạn bằng CKEditor:
   trang chủ, bài viết, mô tả sản phẩm, thông báo nổi.
   Chỉ khai báo một lần ở đây, chỗ nào cần thì thêm class="rich".
   ============================================================ */
.rich > :first-child { margin-top: 0; }
.rich > :last-child  { margin-bottom: 0; }
.rich h1, .rich h2, .rich h3, .rich h4 {
  margin: 26px 0 12px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink);
}
.rich h1 { font-size: 25px; } .rich h2 { font-size: 21px; }
.rich h3 { font-size: 18px; } .rich h4 { font-size: 16px; }
.rich p { margin: 0 0 14px; }
.rich ul, .rich ol { margin: 0 0 14px; padding-left: 22px; }
.rich li { margin-bottom: 6px; }
.rich a { color: var(--green); font-weight: 600; }
.rich img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.rich figure { margin: 0 0 14px; }
.rich figcaption { font-size: 12.5px; color: var(--faint); text-align: center; margin-top: 6px; }
.rich table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.rich th, .rich td { padding: 9px 12px; border: 1px solid var(--line-row); text-align: left; }
.rich th { background: var(--bg-thead); font-weight: 700; }
.rich blockquote {
  margin: 0 0 14px; padding: 12px 18px; border-left: 3px solid var(--green);
  background: var(--bg-tint); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--muted);
}
.rich hr { border: 0; border-top: 1px solid var(--line-row); margin: 22px 0; }
.rich pre {
  margin: 0 0 14px; padding: 13px 15px; overflow-x: auto;
  background: var(--dark); color: #dfeccb; border-radius: var(--r-md);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65;
}

/* Khối nội dung tự do ở cuối trang chủ */
.home-rich {
  background: #fff; border: 1px solid var(--line-card); border-radius: var(--r-xl);
  padding: clamp(20px, 4vw, 34px);
  font-size: 15px; line-height: 1.75; color: var(--text);
}

/* ============================================================
   THÔNG BÁO NỔI — popup giữa màn hình (Admin → Cài đặt → Giao diện)
   ============================================================ */
.bb-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* visibility đi kèm opacity: hiệu ứng không chạy thì popup ẩn HẲN, không để
     lại lớp trong suốt vẫn ăn click che cả trang. */
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.bb-modal.is-in { opacity: 1; visibility: visible; }

.bb-modal-back { position: absolute; inset: 0; background: rgba(14, 22, 6, .5); }

.bb-modal-box {
  position: relative; z-index: 1;
  width: min(600px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(12, 24, 2, .3);
  transform: translateY(-14px);
  transition: transform .2s ease;
}
.bb-modal.is-in .bb-modal-box { transform: none; }

/* ---------- Phần đầu: một dải màu đặc, tiêu đề trái, nút X phải ---------- */
.bb-modal-hd {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 13px 16px; background: var(--green); color: #fff;
}
.bb-modal-title {
  margin: 0; flex: 1; min-width: 0; color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35;
}
.bb-modal-x {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-sm);
  background: transparent; color: #fff; font-size: 14px; cursor: pointer;
  transition: background-color .15s;
}
.bb-modal-x:hover { background: rgba(255, 255, 255, .2); }

/* ---------- Nội dung ---------- */
.bb-modal-bd {
  padding: 18px 16px; overflow-y: auto;
  font-size: 14.5px; line-height: 1.7; color: var(--text);
}
.bb-modal-bd img { max-width: 100%; height: auto; }

/* ---------- Chân: nút dồn về phải ---------- */
.bb-modal-ft {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
  flex-shrink: 0; padding: 13px 16px; border-top: 1px solid var(--line-row);
}

/* Popup mở thì khóa cuộn nền */
body.bb-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .bb-modal { padding: 14px; }
  .bb-modal-box { width: 100%; max-height: calc(100vh - 28px); }
  .bb-modal-ft { flex-direction: column-reverse; align-items: stretch; }
  .bb-modal-ft .btn { justify-content: center; }
}

/* Khối HTML tự do cuối footer */
.footer-card { padding: 0 var(--pad-x) 20px; }

/* ---------- 10) TRANG 404 ---------- */
.nf { padding: clamp(60px, 10vw, 120px) var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.nf-code { font-size: 64px; font-weight: 800; color: var(--green); line-height: 1; }
.nf-title { margin: 0; font-size: clamp(20px, 4vw, 26px); font-weight: 800; }
.nf-desc { margin: 0; color: var(--muted); font-size: 14.5px; }
.nf code { background: #f2f5ec; padding: 2px 6px; border-radius: 5px; }

/* ---------- Tiện ích bổ sung ---------- */
.flash-wrap { padding: 16px var(--pad-x) 0; }
.section--flush { padding-bottom: 8px; }
.section--roomy { gap: 32px; }
.card--roomy { gap: 16px; }
/* Bố cục trang sản phẩm: CỘT TRÁI = ảnh + mô tả (xếp dọc), CỘT PHẢI = hộp mua.
   Dùng grid-areas để: PC hiện mô tả ngay dưới ảnh, hộp mua bám (sticky) bên phải;
   ĐT xếp dọc đúng thứ tự ảnh → hộp mua → mô tả (nút Mua luôn ở trên, không bị đẩy xuống). */
.prod-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas: "gal buy" "desc buy";
  column-gap: clamp(24px, 4vw, 44px);
  row-gap: clamp(18px, 2.6vw, 26px);
  align-items: start;
}
.prod-grid > .gal { grid-area: gal; }
.prod-grid > .prod-col { grid-area: buy; position: sticky; top: 14px; }
.prod-grid > .prod-desc-section { grid-area: desc; margin-top: 0; }
@media (max-width: 860px) {
  .prod-grid { grid-template-columns: 1fr; grid-template-areas: "gal" "buy" "desc"; }
  .prod-grid > .prod-col { position: static; }
}
.prod-col, .tab-block { display: flex; flex-direction: column; gap: 18px; }
.checkout-wrap.section { gap: 26px; }
.input--filter { min-width: 180px; }
.table--wide { min-width: 760px; }
.table--mid { min-width: 600px; }
.td-code { color: var(--green); font-weight: 600; }
.link-strong { font-weight: 700; }
.nf-btn { margin-top: 8px; }

/* ---------- 11) RESPONSIVE ---------- */
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  [data-authpanel] { display: none !important; }
  [data-authlang] { display: block !important; }
}
@media (max-width: 1090px) {
  /* Mobile dùng menu drawer (nút burger) → ẩn hẳn thanh nav ngang bên dưới header.
     Trước đây thanh này giữ ô tìm kiếm; đã bỏ tìm kiếm khỏi nav nên ẩn luôn cả thanh. */
  .nav-wrapper { display: none; }
  .burger { display: grid; order: -1; margin-right: 2px; }
}
@media (max-width: 700px) {
  /* Header gọn về ĐÚNG MỘT HÀNG: logo trái, các nút dồn phải.
     Trước đây .header-inner wrap xuống hàng 2 nên cụm nút nằm lệch bên trái,
     kéo theo dropdown (right:0) bị đẩy ra ngoài mép trái màn hình. */
  .header-inner { flex-wrap: nowrap; gap: 10px; }
  .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-top { flex-wrap: nowrap; flex-shrink: 0; }
  .menu-top .btn-top:not(.btn-top--accent) { display: none; }   /* chỉ giữ nút chính */
  /* Nút chính thu về icon tròn — chữ vẫn còn trong DOM cho trình đọc màn hình */
  .menu-top .btn-top--accent { width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .menu-top .btn-top--accent .bt-txt { display: none; }
  .menu-top .btn-top--accent i { font-size: 14px; opacity: 1; }
  .header-actions { flex-shrink: 0; }
}
@media (max-width: 560px) {
  [data-cta] { display: none !important; }
  .hero-search .btn { flex: 1 1 100%; }
  /* Nút tài khoản co lại còn avatar cho đỡ chật header */
  .user-btn { padding: 5px; }
  .user-btn-name, .user-btn .caret { display: none; }
}
/* Chốt chặn: dropdown không bao giờ rộng hơn màn hình, dù nút nằm ở đâu */
.user-menu, .lang-menu { max-width: calc(100vw - 24px); }
@media (max-width: 420px) {
  .menu-top { display: none; }              /* quá hẹp thì bỏ hẳn, mọi mục đã có trong drawer */
  .header-actions { margin-left: auto; }    /* menu-top ẩn rồi thì tự cụm nút dồn phải */
}
@media (max-width: 1000px) {
  /* Panel head: ô tìm kiếm xuống hàng, chiếm full ngang */
  .panel-head .input--filter { flex: 1 1 100%; min-width: 0; }

  /* Bảng giữ nguyên dạng bảng (cuộn ngang) chứ không xếp thành card —
     bóp bớt khoảng đệm để mỗi màn nhìn được nhiều cột hơn. */
  .table th { padding: 10px 14px; }
  .table td { padding: 11px 14px; font-size: 13px; }
  .table--wide { min-width: 720px; }
  .table--mid  { min-width: 560px; }
}

/* ---------- Giữ tương thích trang cũ (admin/install còn dùng) ---------- */
.btn-reset { font-family: inherit; cursor: pointer; }
.btn-primary { background: var(--green); color: #fff; border: none; }
.btn-primary:hover { background: var(--green-hover); }
.btn-outline { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--bg-tint); }

/* ============================================================
   GIA HẠN BẢN QUYỀN (/license/{id})
   ============================================================ */
.lc-renew-note { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.lc-renew { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.lc-renew-opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: #fff;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lc-renew-opt:hover {
  color: var(--ink); text-decoration: none; transform: translateY(-2px);
  border-color: var(--green); box-shadow: 0 8px 20px rgba(30, 50, 10, .09);
}
.lc-renew-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lc-renew-top b { font-size: 15px; }
.lc-renew-price { font-size: 15px; font-weight: 800; color: var(--green-deep); white-space: nowrap; }
.lc-renew-to { font-size: 12px; color: var(--muted-2); }
.lc-renew-go {
  margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--green);
  display: inline-flex; align-items: center; gap: 6px;
}
.lc-renew-go i { font-size: 10px; transition: transform .15s; }
.lc-renew-opt:hover .lc-renew-go i { transform: translateX(3px); }
.lc-renew-alt { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }

/* Nhắc "đơn này là đơn gia hạn" ở trang thanh toán */
.co-renew {
  display: flex; gap: 11px; margin-bottom: 16px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: var(--bg-tint); border: 1px dashed #a9c37e;
  font-size: 13px; line-height: 1.6; color: var(--green-deep);
}
.co-renew > i { font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.co-renew b { display: block; margin-bottom: 2px; }
.co-renew code { padding: 1px 6px; border-radius: 5px; background: #fff; font-size: 12.5px; }

/* Ô "Nâng cấp vĩnh viễn" trong khối gia hạn — nổi hơn các gói tháng vì đây là
   lựa chọn dứt điểm, khách khỏi phải quay lại gia hạn nữa. */
.lc-renew-opt.is-forever { position: relative; border-color: var(--green); background: var(--bg-tint); }
.lc-renew-opt.is-forever:hover { box-shadow: 0 8px 20px rgba(78, 137, 0, .18); }
.lc-renew-opt.is-forever .lc-renew-top b i { margin-right: 5px; }
.lc-renew-tag {
  position: absolute; top: -9px; right: 12px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .03em; white-space: nowrap;
}