/* ==========================================================================
   giao-dien.css — nền móng: biến màu, chữ, khung, nút
   Trang: ai.ketoanthue.net — Khoá "AI Thực Chiến Cho Kế Toán"
   ========================================================================== */

:root {
  /* Màu nền — giấy kem, gợi sổ sách */
  --nen:        #FAF7F0;
  --nen-2:      #F3EEE3;
  --nen-3:      #EBE4D5;
  --trang:      #FFFDF9;

  /* Mực */
  --muc:        #14181D;
  --muc-2:      #3A424E;
  --muc-nhat:   #5A6270;
  --muc-mo:     #8D95A2;

  /* Đường viền */
  --vien:       #E4DCCB;
  --vien-dam:   #D2C7B0;

  /* Màu thương hiệu — xanh rêu thẫm (tư duy pháp lý) */
  --chinh:      #0F3D3A;
  --chinh-sang: #1A5F5A;
  --chinh-mo:   #E6EDEB;

  /* Nhấn — đồng thau (số liệu, huy hiệu) */
  --nhan:       #B4753A;
  --nhan-mo:    #F6ECDF;

  /* Trạng thái dữ liệu */
  --tot:        #167D5B;
  --tot-mo:     #E4F2EB;
  --canh:       #B0431F;
  --canh-mo:    #FAEAE3;

  /* Chữ */
  --chu-hien: 'Fraunces', Georgia, 'Times New Roman', serif;
  --chu-than: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --chu-so:   'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Khoảng cách */
  --rong-toi-da: 1240px;
  --le-ngang: 24px;
  --bo-goc: 14px;

  /* Đổ bóng */
  --bong-nhe: 0 1px 2px rgba(20, 24, 29, .04), 0 4px 14px -8px rgba(20, 24, 29, .10);
  --bong-vua: 0 2px 6px rgba(20, 24, 29, .05), 0 18px 40px -24px rgba(20, 24, 29, .22);
}

/* ---------- Đặt lại ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--nen);
  color: var(--muc);
  font-family: var(--chu-than);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- Chữ ---------- */
.hien {
  font-family: var(--chu-hien);
  font-weight: 380;
  line-height: 1.06;
  letter-spacing: -.028em;
  font-optical-sizing: auto;
  margin: 0;
}
.hien em { font-style: italic; font-weight: 400; }

h1.hien { font-size: clamp(2.2rem, 5vw, 3.55rem); text-wrap: balance; }
h2.hien { font-size: clamp(1.8rem, 3.9vw, 2.8rem); text-wrap: balance; }
h3.hien { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

.mo-dau {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--chinh);
  margin: 0 0 18px;
}
.mo-dau::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  flex: none;
}

.dan {
  font-size: clamp(1rem, 1.6vw, 1.135rem);
  color: var(--muc-nhat);
  line-height: 1.68;
  max-width: 62ch;
}

.so { font-family: var(--chu-so); font-variant-numeric: tabular-nums; }
.nho { font-size: 13.5px; }
.mo  { color: var(--muc-mo); }

/* ---------- Khung ---------- */
.khung {
  width: 100%;
  max-width: var(--rong-toi-da);
  margin: 0 auto;
  padding: 0 var(--le-ngang);
}

.lop { padding: clamp(64px, 8.5vw, 116px) 0; }
.lop-hep { padding: clamp(48px, 6vw, 80px) 0; }
.lop-muc { background: var(--muc); color: var(--nen); }
.lop-muc .dan { color: rgba(250, 247, 240, .72); }
.lop-muc .mo-dau { color: #7FC9AE; }
.lop-kem { background: var(--nen-2); }

.vach { border-top: 1px solid var(--vien); }

/* ---------- Nút ---------- */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.nut:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; }

.nut-chinh { background: var(--muc); color: var(--nen); }
.nut-chinh:hover {
  background: var(--chinh);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -14px rgba(15, 61, 58, .75);
}

.nut-vien { background: transparent; color: var(--muc); border-color: var(--vien-dam); }
.nut-vien:hover { border-color: var(--muc); background: var(--trang); }

.nut-luc { background: var(--chinh); color: #F4FAF8; }
.nut-luc:hover { background: var(--chinh-sang); transform: translateY(-1px); }

.nut-sang { background: var(--nen); color: var(--muc); }
.nut-sang:hover { background: #fff; transform: translateY(-1px); }

.nut-nho { padding: 9px 16px; font-size: 13px; }

/* ---------- Thẻ nhãn ---------- */
.nhan-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--vien-dam);
  background: var(--trang);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muc-2);
  white-space: nowrap;
}
.nhan-chip.luc { background: var(--tot-mo); border-color: #BFE0D2; color: var(--tot); }
.nhan-chip.dong { background: var(--nhan-mo); border-color: #E7CFB2; color: var(--nhan); }

.cham {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tot); flex: none;
}
.cham-dap { animation: dap 2.1s ease-in-out infinite; }
@keyframes dap { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }

/* ---------- Thẻ ---------- */
.the {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: 26px;
}

/* ---------- Tiện ích ---------- */
.chi-doc-may { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bo-qua {
  position: absolute; left: 12px; top: -60px;
  background: var(--muc); color: var(--nen);
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  z-index: 200; text-decoration: none; font-weight: 700;
  transition: top .18s ease;
}
.bo-qua:focus { top: 0; }