/*
 * Reset + kiểu chữ nền.
 * Viết MOBILE-FIRST: mặc định là màn nhỏ, @media (min-width) nới dần lên.
 */

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

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

body {
  margin: 0;
  font-family: var(--hl-font);
  font-size: var(--hl-fs);
  line-height: 1.5;
  color: var(--hl-text);
  background: var(--hl-bg);
  /* Chừa chỗ cho thanh trên cùng cố định. */
  padding-top: var(--hl-topbar-h);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: normal;
  line-height: 1.3;
}

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; }

/* Danh sách trong nội dung bài viết vẫn cần dấu đầu dòng — xử lý ở
   .hl-rte bên dưới, không ở đây. */
nav ul, nav ol { list-style: none; }

a {
  color: var(--hl-link);
  text-decoration: none;
}

a:hover,
a:focus-visible { color: var(--hl-orange); text-decoration: underline; }

/* Vòng focus phải luôn thấy được — bản gốc bỏ hẳn outline, không đạt
   chuẩn tiếp cận. */
:focus-visible {
  outline: 2px solid var(--hl-orange);
  outline-offset: 2px;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* iframe KHÔNG được ăn `height: auto`. Nó là replaced element: `auto` làm
   trình duyệt rơi về chiều cao mặc định 150px và nuốt luôn thuộc tính
   `height` — bản đồ Google `height="450"` co còn 150px, widget Facebook
   `height="230"` cũng vậy. Chỉ chặn bề ngang, để chiều cao cho HTML quyết. */
iframe {
  max-width: 100%;
  border: 0;
}

svg { display: block; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* Chỉ đọc bằng trình đọc màn hình. */
.hl-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hl-sr:focus {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  padding: 10px 16px;
  clip: auto; clip-path: none;
  background: #fff;
  border: 2px solid var(--hl-blue);
  z-index: 10000;
}

/* Cắt chữ đúng N dòng — dùng khắp nơi cho tên sản phẩm / tiêu đề tin. */
.hl-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 1);
  line-clamp: var(--lines, 1);
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Nội dung do trình soạn thảo sinh ra (bài viết, mô tả SP, tab).
 * Nội dung cũ đầy <font>, <span style>, bảng — bọc trong .hl-rte để
 * gò lại mà không đụng vào HTML đã lưu.
 * ------------------------------------------------------------------ */
/* PHÒNG TRÀN — đọc trước khi sửa mấy luật `!important` bên dưới.
 *
 * Nội dung cũ (FCKeditor) và tab bảo hành dùng chung mang kích thước CỨNG
 * ngay trong `style=""`: `max-width:910px`, `white-space:pre`, `width="600"`.
 * Inline style thắng mọi selector thường, nên luật gò lại BẮT BUỘC phải
 * `!important` — không phải làm biếng.
 *
 * Vì `body { overflow-x: clip }` (layout.css) nên phần tràn KHÔNG cuộn được
 * mà bị CẮT MẤT — lỗi nhìn như "mất chữ/mất ảnh" chứ không như tràn khung.
 * Đo ở 375px, không tin ảnh chụp. Xem `.claude/MEMORY.md` mục giao diện. */
.hl-rte {
  text-align: justify;
  /* URL trần và mã sản phẩm dài không có dấu cách phải xuống dòng được. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Căn đều chỉ đẹp ở cột rộng. Cột hẹp thì khoảng cách từ giãn ra thành
   "dòng sông" trắng, đọc rất mệt — nặng nhất với tiếng Việt nhiều từ ngắn.
   Giữ căn đều ở khung đầy đủ, dưới 1200px trả về căn trái. (MEMORY §42)

   Nội dung cũ còn rắc `text-align: justify` thẳng vào `style=""` (riêng
   trang bảo hành: 118 phần tử), nên đổi mỗi `.hl-rte` là vô ích — phải
   ghi đè đúng phần tử. Khoá theo GIÁ TRỊ `justify`, không quét chung
   `[style*="text-align"]`: trong đó có `center` bọc ảnh, gạt nhầm là ảnh
   rớt về trái. */
@media (max-width: 1199px) {
  .hl-rte,
  .hl-rte [style*="text-align: justify"],
  .hl-rte [style*="text-align:justify"] { text-align: left !important; }
}

/* `max-width: 910px` inline (bề rộng cột desktop) đi theo tab bảo hành ra
   MỌI trang sản phẩm — ở mobile nó đẩy ảnh 600px ra ngoài khung 355px. */
.hl-rte img {
  height: auto !important;
  max-width: 100% !important;
}

/* Bất kỳ phần tử nào mang kích thước cứng inline cũng không được vượt khung. */
.hl-rte [style*="width"] { max-width: 100% !important; }

/* `white-space: pre|nowrap` inline chặn xuống dòng → cả dòng lòi ra ngoài.
   `<pre>` thật không dính luật này (nó lấy white-space từ UA, không từ inline). */
.hl-rte [style*="white-space"] { white-space: normal !important; }

.hl-rte pre {
  white-space: pre-wrap;
  overflow-x: auto;
  max-width: 100%;
}

.hl-rte ul,
.hl-rte ol { margin: 3px 3px 12px 20px; }

.hl-rte ul { list-style: disc; }
.hl-rte ol { list-style: decimal; }
.hl-rte li { margin: 3px 0; }

.hl-rte h2 { font-size: 17px; color: #333; padding: 10px 0 5px; }
.hl-rte h3 { font-size: 16px; color: #333; padding: 10px 0 5px; }
.hl-rte h4 { font-size: 15px; color: #333; padding: 10px 0 5px; }

/*
 * Bảng trong nội dung soạn thảo (bê từ FCKeditor sang) hay mang width cứng
 * → cho cuộn ngang thay vì phá bố cục. Xem MEMORY §48.
 *
 * ⚠️ PHẢI loại trừ bảng của WooCommerce Blocks. Trang giỏ hàng và thanh
 *    toán dựng bằng block, mà nội dung block lại đi qua `the_content` nên
 *    được bọc trong `.hl-rte` → luật này VỚ luôn `table.wc-block-cart-items`.
 *    `display: block` tắt thuật toán bố cục bảng: các cột co theo nội dung
 *    và KHÔNG lấp đầy bảng nữa. Đo 11-08-2026 ở 1400px: ô cuối kết thúc ở
 *    779px trong khi bảng rộng tới 818px — thừa 39px trống bên phải, cột
 *    "Tổng" không sát mép. Không lỗi, không cảnh báo, chỉ là nhìn lệch.
 *    Woo tự lo phần co giãn của bảng nó (class `.is-mobile`), không cần
 *    và không được phép gò bằng luật này.
 */
.hl-rte table:not([class*="wc-block"]) {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* Video nhúng có `width="560" height="315"` cứng: chặn ngang thôi là ảnh bị
   hụt/thừa khung đen. Ép tỉ lệ 16/9 rồi để chiều cao tự tính.
   CHỈ áp cho video — bản đồ Google phải giữ nguyên `height` của nó, ép 16/9
   vào map là mất phần lớn khung nhìn. */
.hl-rte iframe { max-width: 100%; }

.hl-rte iframe[src*="youtube"],
.hl-rte iframe[src*="youtu.be"],
.hl-rte iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Bản gốc dùng !important cho font — bỏ hẳn, chỉ ép lại họ chữ. */
.hl-rte font,
.hl-rte span[style*="font-family"] { font-family: var(--hl-font); }