/* ==========================================================================
   base.css - Reset nhe + typography mac dinh + a11y toan cuc
   Chi dung var(--ec-*), khong hardcode hex.
   ========================================================================== */

/* ---------- Reset nhe ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--ec-bg);
  color: var(--ec-text);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-base);
  font-weight: 400;
  line-height: var(--ec-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Tieu de: dung font condensed cho dung mockup ---------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ec-space-3);
  color: var(--ec-text);
  font-family: var(--ec-font-ui);
  font-weight: 700;
  line-height: var(--ec-lh-tight);
}

h1 { font-size: var(--ec-fs-2xl); }
h2 { font-size: var(--ec-fs-xl); }
h3 { font-size: var(--ec-fs-lg); }
h4 { font-size: var(--ec-fs-md); }
h5, h6 { font-size: var(--ec-fs-base); }

p, ul, ol, dl, blockquote, figure, table, pre {
  margin: 0 0 var(--ec-space-4);
}

ul, ol {
  padding-left: var(--ec-space-5);
}

small { font-size: var(--ec-fs-sm); }

strong, b { font-weight: 700; }

hr {
  height: 0;
  margin: var(--ec-space-6) 0;
  border: 0;
  border-top: var(--ec-rule-width) solid var(--ec-rule);
}

/* ---------- Link ---------- */
a {
  color: var(--ec-link);
  text-decoration: none;
}

/* Khong gach chan khi hover - chi doi mau (user chot 2026-07-27) */
a:hover,
a:active {
  color: var(--ec-link-hover);
  text-decoration: none;
}

/*
 * Link trong than bai: user chot 2026-07-27 bo het gach chan.
 * Dung font-weight 600 de phan biet voi chu thuong - neu chi khac o mau navy
 * thi nguoi mu mau khong nhan ra day la link (WCAG 1.4.1).
 */
.ec-entry-content a,
.ec-page-content a {
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Anh & media responsive ---------- */
img,
svg,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
  border: 0;
}

figure { margin: 0 0 var(--ec-space-4); }

figcaption {
  color: var(--ec-meta);
  font-size: var(--ec-fs-sm);
  padding-top: var(--ec-space-2);
}

blockquote {
  margin-left: 0;
  padding-left: var(--ec-space-4);
  border-left: 3px solid var(--ec-border-strong);
  font-style: italic;
}

/* ---------- Form ---------- */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
  max-width: 100%;
}

button { cursor: pointer; }

/* ---------- Bang ---------- */
table {
  width: 100%;
  border-collapse: collapse;
}

/*
 * Noi dung dan tu Word/Excel thuong mang inline style width: 820px... (ca tren
 * table lan div con ben trong) rong hon man hinh mobile va thang CSS thuong.
 * max-width !important la cach duy nhat thang duoc inline style, giu trang
 * khoi bi cuon ngang.
 */
.ec-page-content table,
.ec-page-content table *,
.ec-entry-content table,
.ec-entry-content table * {
  max-width: 100% !important;
  height: auto !important;
}

/* URL dai khong duoc day trang ra ngang */
.ec-page-content,
.ec-entry-content {
  overflow-wrap: break-word;
}

th, td {
  padding: var(--ec-space-2) var(--ec-space-3);
  border-bottom: var(--ec-rule-width) solid var(--ec-border);
  text-align: left;
}

/* ---------- A11y: focus thay ro tren moi phan tu tuong tac ---------- */
:focus-visible {
  outline: var(--ec-focus-width) solid var(--ec-focus-light);
  outline-offset: var(--ec-focus-offset);
}

/* Tren nen navy/blue thi doi sang mau green cho du tuong phan (8.9:1) */
.ec-header :focus-visible,
.ec-footer :focus-visible,
.ec-nav :focus-visible,
.ec-backtotop :focus-visible {
  outline-color: var(--ec-focus-dark);
}

/* An outline mac dinh cua Chrome khi click chuot, giu cho ban phim */
:focus:not(:focus-visible) { outline: none; }

/* Chi doc bang screen reader */
.ec-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link "nhay toi noi dung" - hien khi focus bang ban phim */
.ec-skip-link {
  position: absolute;
  left: var(--ec-space-2);
  top: -100px;
  z-index: 999;
  padding: var(--ec-space-2) var(--ec-space-4);
  background: var(--ec-navy);
  color: var(--ec-on-navy);
  font-family: var(--ec-font-ui);
}

.ec-skip-link:focus {
  top: var(--ec-space-2);
  color: var(--ec-on-navy);
  text-decoration: none;
}

/* ---------- Ton trong prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}