/*
 * Reset nhẹ + kiểu chữ nền.
 * Lấy đúng phần khai báo gốc của bản thiết kế, không thêm thắt.
 */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tgs-muc);
  color: var(--tgs-nga);
  font-family: var(--tgs-chu-than);
  font-size: var(--tgs-cd-than);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

/*
 * BƯỚC 19 · B-15-2 — liên kết trần thừa kế cỡ chữ của chỗ nó đứng, ở site này
 * hầu hết là 9,5–16px, tức CHỮ NHỎ. Nên dùng biến thể theo nền, không dùng
 * `--tgs-son` gốc (đo được 4,05 trên ngà và 4,26 trên mực — cả hai trượt AA).
 * Thân trang mặc định nền mực nên `a` lấy bản tối; dải sáng lấy bản sáng.
 *
 * `:not([class])` KHÔNG phải cho gọn mắt — nó sửa một lỗi đã đo được. Bản đầu
 * của luật này viết trơn `.tgs-dai--sang a`, độ ưu tiên (0,1,1), và nó thắng
 * `.tgs-nut--toi { color: var(--tgs-nga) }` (0,1,0) ở components.css: chữ trên
 * nút nền mực trong dải sáng bị đổi từ ngà sang son, đo được tụt 4,26 → 3,68
 * ở trang chủ và Collection. Tức luật quét cả những phần tử TỰ SƠN NỀN riêng,
 * mà `.tgs-dai--sang` thì không nói gì về nền thật của chúng.
 * Giới hạn lại đúng thứ nó nhắm tới: liên kết trong đoạn văn, không mang class
 * nào. Bất cứ `a` có class là có ngữ cảnh riêng và tự khai màu lấy.
 */
a { color: var(--tgs-son-tren-toi); text-decoration: none; transition: color var(--tgs-vua) ease; }
.tgs-dai--sang a:not([class]) { color: var(--tgs-son-tren-sang); }
a:hover { color: var(--tgs-nga); }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

::selection { background: var(--tgs-son); color: var(--tgs-nga); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--tgs-chu-de);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--tgs-gian-de);
  text-wrap: balance;   /* balance cho tiêu đề — không dùng pretty ở đây */
}

h1 { font-size: var(--tgs-cd-h1); }
h2 { font-size: var(--tgs-cd-h2); }
h3 { font-size: var(--tgs-cd-h3); }

p { margin: 0 0 var(--tgs-k2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Nhãn nhỏ viết hoa, dùng ở đầu mỗi dải nội dung: "01 · Brand beginning" */
.tgs-nhan {
  font-size: var(--tgs-cd-nhan);
  letter-spacing: var(--tgs-gian-nhan);
  text-transform: uppercase;
  color: var(--tgs-nga-60);
}

/* Câu tiếng Nhật ở trang Our Story dùng họ chữ riêng. */
.tgs-nhat { font-family: var(--tgs-chu-nhat); }

/* ---- Hiệu ứng hiện dần khi cuộn tới ----
 *
 * MẶC ĐỊNH NỘI DUNG LUÔN HIỆN. Hiệu ứng chỉ được BẬT THÊM khi JS chạy được,
 * bằng class .tgs-co-hieu-ung đặt trên thẻ <html>.
 *
 * Vì sao làm ngược so với bản thiết kế gốc: bản gốc đặt opacity:0 sẵn rồi
 * nhờ JS hiện ra. Cách đó nghĩa là JS hỏng một dòng là cả trang trắng — và
 * fallback bằng setTimeout cũng vô dụng vì bản thân nó cũng là JS. Đây là
 * lỗi đã xảy ra thật ở một dự án trước, ghi trong kiến thức nền MTS.
 *
 * Với cách này, kịch bản xấu nhất là trang hiện đủ nội dung mà không có
 * hiệu ứng — chấp nhận được. Không bao giờ có kịch bản mất nội dung.
 */
.tgs-co-hieu-ung [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--tgs-lau) var(--tgs-nhip),
              transform var(--tgs-lau) var(--tgs-nhip);
}
.tgs-co-hieu-ung [data-reveal].tgs-hien { opacity: 1; transform: none; }

@keyframes tgs-troi {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(0, -1.4%, 0); }
}

/* Chỉ đọc được bằng trình đọc màn hình. */
.tgs-an-nhin {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Nút bỏ qua điều hướng — bắt buộc cho tiếp cận bàn phím. */
.tgs-bo-qua {
  position: absolute; left: -9999px;
  background: var(--tgs-nga); color: var(--tgs-muc);
  padding: var(--tgs-k2); z-index: 999;
}
.tgs-bo-qua:focus { left: var(--tgs-k2); top: var(--tgs-k2); }