/* =========================================================================
   components.css — MANH GHEP DUNG LAI NHIEU NOI
   Nut, the, huy hieu, thanh chip. Cai gi chi dung o MOT khoi thi de o file
   cua khoi do, dung nhet vao day.
   ========================================================================= */

/* ── Nut ─────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn svg { flex: none; }

.btn--primary {
  --btn-bg: var(--accent-solid);
  --btn-fg: #fff;
  box-shadow: 0 8px 20px rgba(232, 163, 23, .30);
}
.btn--primary:hover {
  --btn-bg: var(--accent-hover);
  color: var(--accent-fg);
  box-shadow: 0 14px 34px rgba(232, 163, 23, .42);
}

.btn--ghost {
  --btn-bg: transparent;
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--surface-3);
  border-color: var(--accent);
  color: var(--accent);
}

.btn--soft {
  --btn-bg: var(--accent-soft);
  --btn-fg: var(--accent);
}
.btn--soft:hover { --btn-bg: var(--accent-soft); color: var(--accent-hover); }

.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--sm { padding: 9px 16px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Vet sang chay ngang khi tro chuot — chi tren nut chinh, dung lam qua tay. */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.32) 46%, transparent 72%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(120%); }

/* ── The ────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sh-sm);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.card--hover:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--sh-lg);
  background: var(--card-hover);
}

/* Vien sang lan theo con tro. Toa do --mx/--my do js/spotlight.js gan. */
.card--spot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              var(--accent), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.card--spot:hover::before { opacity: 1; }

/* ── Huy hieu / chip ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 650;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge--ok     { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: transparent; }
.badge--warn   { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border-color: transparent; }
.badge--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.badge--dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

/* ── Danh sach co dau tick ───────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 32px;
  margin: 0;
  color: var(--text-muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 6px; top: .58em;
  width: 8px; height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.ticks strong { color: var(--text); font-weight: 650; }

/* ── Khung anh / anh chup man hinh ───────────────────────── */
.shot {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
/* Thanh tieu de gia cho giong cua so Windows. */
.shot__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.shot__dots { display: flex; gap: 6px; }
.shot__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.shot__dots i:first-child { background: #ff5f57; }
.shot__dots i:nth-child(2) { background: #febc2e; }
.shot__dots i:nth-child(3) { background: #28c840; }
.shot__title {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: 600;
}
.shot__body { display: block; background: var(--surface); }
.shot__body img,
.shot__body iframe,
.shot__body video { width: 100%; height: auto; display: block; }

/* Trang HTML nhúng không tự cao theo ruột được (khung riêng, trang chủ
   không với tới bên trong). Giữ đúng tỉ lệ khung ảnh 1000×620 để nó cao
   bằng ảnh, khỏi hụt hay thừa một khoảng. */
.shot__body iframe { aspect-ratio: 1000 / 620; height: auto; border: 0; }

/* Ruột khung có thể bọc thêm một lớp [data-domain] (mỗi lĩnh vực một
   bản demo). Lớp đó phải trong suốt về mặt bố cục, không thì ảnh bên
   trong không kéo giãn được. */
.shot__body > [data-domain] { display: block; }
.shot__body > [data-domain][hidden] { display: none; }

/* ── Liên kết chữ thường trong nội dung ─────────────────────────────────
   Dùng khi cần một đường dẫn trông ra đường dẫn mà không phải là nút:
   góc trên các khối ở trang tài khoản, chân khung hướng dẫn tải…

   Gạch chân là CỐ Ý: chỉ đổi màu thôi thì người mù màu không phân biệt được
   đâu là chữ thường đâu là chữ bấm được. text-underline-offset để nét gạch
   không cắt qua dấu tiếng Việt (ạ, ộ, ợ). */
.link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.link:hover { color: var(--accent-hover); }

/* ═══════════════════════════════════════════════════════════
   HOP CHON CHE DO TAI  (MT.download.chonCheDo — shared/js/download.js)
   Bam "Tai ve" tren the san pham: che do online dat TREN va noi bat hon,
   che do tai file day du dat duoi. Dat o components.css chu khong o
   products.css vi hop nay do download.js dung — file dung chung cho moi
   trang, khong rieng trang san pham.
   ═══════════════════════════════════════════════════════════ */
.dlmode{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.55);
}
.dlmode__box{
  width:100%; max-width:560px;
  background:var(--surface-1,#fff); color:var(--text,#111);
  border:1px solid var(--border,#e5e7eb); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  overflow:hidden;
}
.dlmode__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border,#e5e7eb);
}
.dlmode__head b{ font-size:15px; }

.dlmode__row{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px;
}
.dlmode__row + .dlmode__row{ border-top:1px solid var(--border,#e5e7eb); }

/* Che do online noi bat hon — nhung KHONG tu dong chon giup nguoi dung:
   xem ghi chu bay popup trong download.js. */
.dlmode__row.is-primary{ background:var(--surface-2,#f8fafc); }

.dlmode__ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--surface-3,#eef2f7); color:var(--accent,#b4610f);
}
.dlmode__txt{ flex:1 1 auto; min-width:0; }
.dlmode__txt b{ display:block; font-size:14px; margin-bottom:3px; }
.dlmode__txt span{
  display:block; font-size:12.5px; line-height:1.5;
  color:var(--text-muted,#6b7280);
}
.dlmode__txt i{
  display:block; margin-top:5px; font-style:normal;
  font-size:12px; color:var(--text-muted,#6b7280); opacity:.85;
}
.dlmode__row .btn{ flex:0 0 auto; align-self:center; }

@media (max-width:520px){
  .dlmode__row{ flex-wrap:wrap; }
  .dlmode__row .btn{ width:100%; margin-top:4px; }
}

/* ═══════════════════════════════════════════════════════════
   CHUONG THONG BAO — CHUYEN TU forum/forum.css SANG DAY 06/09/2026.

   Vi sao chuyen: nut chuong do shared/js/chuong.js dung len o MOI trang,
   nhung CSS thi nam trong forum.css ma CHI trang dien dan va trang tai lieu
   nap file do. Sau trang con lai co nut ma khong co kieu dang: .tbhop mat
   position:fixed nen khung thong bao roi xuong CUOI TRANG thanh mot mo chu
   tran. Dat o components.css — file ca 14 trang deu nap.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   CHUONG THONG BAO   (06/09/2026)
   ═══════════════════════════════════════════════════════════ */

.chuong{ position:relative; }

/* So tin chua doc. Dat am ra ngoai goc nut de khong de len hinh cai chuong. */
.chuong__so{
  position:absolute; top:-2px; right:-2px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:9px;
  background:var(--danger,#c0392b); color:#fff;
  font-size:10px; font-weight:700; font-style:normal;
  line-height:16px; text-align:center;
}

/* ── Khung tha xuong ──
   position:fixed chu KHONG absolute trong header: header co overflow rieng,
   hop se bi cat cut. Toa do do bang getBoundingClientRect cua nut chuong. */
.tbhop{
  position:fixed; z-index:130;
  width:min(380px, calc(100vw - 16px));
  background:var(--surface-1,#fff);
  border:1px solid var(--border,#e5e7eb); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  overflow:hidden;
}
.tbhop__head, .tbhop__foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}
.tbhop__head{ border-bottom:1px solid var(--border,#e5e7eb); }
.tbhop__foot{ border-top:1px solid var(--border,#e5e7eb); justify-content:center; }

/* 70% chieu cao man hinh — chot 06/09/2026. Tru phan dau va chan de tong
   chieu cao hop khong vuot qua nguong do. */
.tbhop__list{ max-height:calc(70vh - 92px); overflow-y:auto; }
.tbtrang    { max-height:70vh;             overflow-y:auto; margin-top:10px; }

.tbhop__trong, .tbhop__tai{
  padding:22px 14px; text-align:center;
  color:var(--text-muted,#6b7280); font-size:13px;
}

/* ── Mot dong thong bao ── */
.tbdong{ position:relative; border-bottom:1px solid var(--border,#e5e7eb); }
.tbdong:last-child{ border-bottom:0; }
.tbdong--moi{ background:var(--surface-2,#f8fafc); }

.tbdong__link{
  display:block; padding:11px 40px 11px 14px;
  color:inherit; text-decoration:none;
}
.tbdong__link:hover{ background:var(--surface-3,#eef2f7); }
.tbdong__cau  { font-size:13px; font-weight:600; }
.tbdong__de   { font-size:13px; margin-top:2px; }
.tbdong__trich{
  font-size:12px; margin-top:3px;
  color:var(--text-muted,#6b7280);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.tbdong__luc{ font-size:11px; margin-top:4px; color:var(--text-muted,#6b7280); }

.tbdong__bacham{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border:0; border-radius:6px;
  background:transparent; cursor:pointer;
  color:var(--text-muted,#6b7280); font-size:16px; line-height:1;
}
.tbdong__bacham:hover{ background:var(--surface-3,#eef2f7); }

.tbmenu{
  position:absolute; top:32px; right:8px; z-index:5;
  background:var(--surface-1,#fff);
  border:1px solid var(--border,#e5e7eb); border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  overflow:hidden;
}
.tbmenu__nut{
  display:block; width:100%; padding:9px 14px;
  border:0; background:transparent; cursor:pointer;
  font-size:13px; text-align:left; white-space:nowrap;
}
.tbmenu__nut:hover{ background:var(--surface-3,#eef2f7); }