/*
 Theme Name: Flatsome Child
 Template: flatsome
 Description: Child theme cho SingSing Saigon (singsingsaigon.com) — bản phục dựng lưu trữ từ bản chụp Wayback 2025-04-08
 Version: 1.0
 Text Domain: flatsome-child-singsingsaigon-com
*/

/* ═══════════════════════════════════════════════════════════════════════════
   MÀU — bóc từ style nội tuyến của bản chụp mốc 20250408013536
   (config.json "colors" / data/singsingsaigon.com/thiet-ke-goc.json).
   #116dff và #3899ec là màu HỆ THỐNG của Wix, không phải màu thương hiệu — đã
   loại từ lúc bóc. Khai token ở :root rồi dùng lại, không rải mã màu trần.

   FONT — Playfair Display · Syne · Questrial, đúng ba họ chữ bản gốc, nạp bằng
   Google Fonts ở sss_enqueue() (lý do chọn ghi đầy đủ trong functions.php).
   Font hệ thống Madefor / DIN-Next / Helvetica-W01 của Wix đã loại từ lúc bóc.

   BỐ CỤC là THIẾT KẾ MỚI (ADR-0003 khoản 2): dàn trang tuyệt đối của Wix không
   phục lại; nội dung giữ nguyên văn, giao diện dựng lại trên Flatsome.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --sss-hong:   #f8abb9;  /* màu chính */
  --sss-xanh:   #2b5672;  /* màu phụ */
  --sss-den:    #000000;
  --sss-trang:  #ffffff;
  --sss-chu:    #1a1a1a;  /* Flatsome mặc định #777 — quá nhạt, thay hẳn */
  --sss-mo:     #6b6b6b;
  --sss-vien:   rgba(0, 0, 0, .12);
  --sss-nen-nhe: #faf7f6;

  --sss-font-tieu-de: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sss-font-phu:     'Syne', 'Trebuchet MS', system-ui, sans-serif;
  --sss-font-than:    'Questrial', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ═══ NỀN CHỮ ══════════════════════════════════════════════════════════════ */
body {
  background: var(--sss-trang);
  color: var(--sss-chu);
  font-size: 17px;
  line-height: 1.7;
}
body, p, li, td, .entry-content { color: var(--sss-chu); }

h1, h2, h3, h4, h5, h6,
.sss-tieu-de {
  color: var(--sss-den);
  letter-spacing: .01em;
}

/* ═══ ĐÈ CUỐI CASCADE ══════════════════════════════════════════════════════
   Hai luật font-family dưới đây tách riêng và cố tình dài dòng ('html body',
   'body h1') để có độ đặc hiệu 0-0-2 thay vì 0-0-1.

   VÌ SAO: theme cha in <style id="custom-css"> ở wp_head ưu tiên 100
   (function-custom-css.php:676) — tức SAU mọi thẻ <link>, kể cả tệp này, dù
   functions.php đã khai phụ thuộc 'flatsome-main'. Dependency chỉ xếp thứ tự
   giữa các <link>, không với tới thẻ <style> nội tuyến. Trong khối đó cha in
   'body{font-family:…}' (function-custom-css.php:239) và
   'h1,h2,h3,h4,h5,h6,.heading-font,…{font-family:…}' (dòng 265) — CÙNG độ đặc
   hiệu thì bản in sau thắng.

   Triệu chứng khi hỏng lại (rất khó thấy vì tên họ chữ vẫn đúng): chuỗi DỰ
   PHÒNG bị thay. Cha dựng stack bằng flatsome_parse_font_family() nên ra
   '"Playfair Display", sans-serif'; bản của ta là Playfair Display → Georgia →
   Times New Roman → serif. Khi Google Fonts không tải được (khách chặn bên thứ
   ba, hoặc sau này tự host theo đường nâng cấp ghi trong functions.php), mọi
   thẻ tiêu đề TRẦN — <h1> của trang 410 ở 404.php, h2/h3 user gõ tay trong
   trình soạn thảo — rơi về sans-serif thay vì serif. Tiêu đề do
   sss_render_khoi() dựng thì không dính vì có lớp .sss-tieu-de (0-1-0).

   Đo tay: mở DevTools ở một <h1> trần, ô Computed > font-family phải còn
   Georgia trong chuỗi.                                                      */
html body { font-family: var(--sss-font-than); }
body h1, body h2, body h3, body h4, body h5, body h6,
.sss-tieu-de { font-family: var(--sss-font-tieu-de); }
.sss-tieu-de-1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.15; margin: .6em 0 .45em; }
.sss-tieu-de-2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); margin: 1.6em 0 .5em; }
.sss-tieu-de-3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 1.4em 0 .45em; }
/* Bản gốc dùng H5 làm câu dẫn lớn dưới H1 của /about — giữ đúng cấp thẻ, chỉ
   trả lại cỡ chữ cho khớp vai trò dẫn dắt của nó. */
.sss-tieu-de-5 {
  font-family: var(--sss-font-phu);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--sss-xanh);
  margin: .8em 0 1.2em;
}
.sss-doan { margin: 0 0 1.15em; }

a { color: var(--sss-xanh); }
a:hover { color: var(--sss-den); }

/* ═══ ĐƯỜNG DẪN PHÂN TẦNG (silo ảo) ════════════════════════════════════════ */
.sss-duong-dan {
  font-family: var(--sss-font-phu);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sss-mo);
  margin: 0 0 1.5rem;
}
.sss-duong-dan a { color: var(--sss-mo); text-decoration: none; }
.sss-duong-dan a:hover { color: var(--sss-den); }
.sss-duong-dan-cach { margin: 0 .5em; }

/* ═══ ẢNH ══════════════════════════════════════════════════════════════════
   width/height THẬT luôn nằm trên thẻ <img> (wp_get_attachment_image in ra) —
   đó là cách chống CLS. CSS dưới đây chỉ co giãn, không xoá tỉ lệ đó.        */
.sss-hinh { margin: 1.75rem 0; }
.sss-hinh img,
img.sss-anh { display: block; width: 100%; height: auto; }

/* Lưới gallery — 24 ảnh cuối của trang chủ ("SingSing Moments").
   CHỌN CSS Grid thuần, KHÔNG [ux_image_box] của Flatsome. Ba lý do:
    1. Ít phụ thuộc hơn: shortcode UX Builder là API của theme CHA, đổi giữa các
       bản Flatsome; CSS Grid là nền tảng trình duyệt, không ai gỡ mất.
    2. [ux_image_box] tự sinh thẻ <img> theo luật riêng của nó — không bảo đảm
       width/height (cổng audit đo chống CLS) và tự gắn lazy, phá luật "ảnh đầu
       trang phải eager + fetchpriority=high".
    3. Kiểm được bằng máy: render đi qua wp_get_attachment_image() nên php -l và
       cổng audit soi được; do_shortcode() thì phải có Flatsome đang chạy mới
       biết ra gì. */
.sss-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 2rem 0 2.5rem;
}
.sss-luoi-o { margin: 0; overflow: hidden; background: var(--sss-nen-nhe); }
.sss-luoi-o img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .35s ease;
}
.sss-luoi-o:hover img { transform: scale(1.04); }
@media (min-width: 850px) {
  .sss-luoi { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
}

/* ═══ NÚT + CHỮ ĐÃ RỤNG LIÊN KẾT ═══════════════════════════════════════════
   config.json "luat_lien_ket": đích trỏ trang 410 thì giữ NGUYÊN VĂN chữ, bỏ
   thẻ <a>. Cố tình KHÔNG tạo hình một cái nút xám "disabled": nút vẫn mời
   người ta bấm rồi im lặng. Chữ trông ra chữ.                                */
.sss-nut-bao { margin: 1.25rem 0 1.75rem; }
.button.sss-nut {
  font-family: var(--sss-font-phu);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sss-mat-lien-ket {
  font-family: var(--sss-font-phu);
  letter-spacing: .06em;
  color: var(--sss-mo);
}
.sss-nut-chu { text-transform: uppercase; font-size: .95rem; }

/* ═══ TỆP THỰC ĐƠN (PDF) ═══════════════════════════════════════════════════ */
.sss-tep { margin: .5rem 0; }
.sss-tep-link {
  font-family: var(--sss-font-phu);
  font-weight: 500;
  border-bottom: 1px solid var(--sss-hong);
}
.sss-tep-meta { color: var(--sss-mo); font-size: .875rem; }

/* ═══ LIÊN HỆ ══════════════════════════════════════════════════════════════ */
.sss-lien-he { margin: .35rem 0; font-family: var(--sss-font-phu); }

/* ═══ TRANG 410 ════════════════════════════════════════════════════════════ */
.sss-410-giai-thich { max-width: 46rem; margin: 0 auto 2rem; color: var(--sss-mo); }
.sss-410-nut .button { margin: .25rem .35rem; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════════ */
.sss-footer {
  background: var(--sss-den);
  color: var(--sss-trang);
  padding: 3.5rem 0 2rem;
  font-family: var(--sss-font-than);
}
.sss-footer-tieu-de {
  font-family: var(--sss-font-phu);
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sss-hong);
  margin: 0 0 .9rem;
}
.sss-footer-cot + .sss-footer-cot .sss-footer-tieu-de { margin-top: 0; }
.sss-footer-cot .sss-footer-tieu-de ~ .sss-footer-tieu-de { margin-top: 1.75rem; }
.sss-footer-ds { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.sss-footer-ds li { margin: 0 0 .4rem; line-height: 1.5; }
.sss-footer-link { color: var(--sss-trang); border-bottom: 1px solid transparent; }
.sss-footer-link:hover { color: var(--sss-hong); border-bottom-color: var(--sss-hong); }
/* Mục Quick Links đã rụng liên kết: vẫn đọc được, nhưng nhìn ra ngay là chữ */
.sss-footer .sss-mat-lien-ket,
.sss-footer-chu { color: rgba(255, 255, 255, .55); }
.sss-footer-tuyen-bo { font-size: .9375rem; line-height: 1.65; color: rgba(255, 255, 255, .8); }
.sss-footer-day-cuoi {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.sss-footer-ban-quyen { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .75); }
.sss-footer-phuc-dung { margin: .25rem 0 0; font-size: .8125rem; color: rgba(255, 255, 255, .5); }

/* ═══ HEADER ═══════════════════════════════════════════════════════════════ */
.header-main .nav > li > a {
  font-family: var(--sss-font-phu);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
}