/*
 Theme Name: Flatsome Child
 Template: flatsome
 Description: Child theme cho K=K | Yêu Mới Khó (yeumoikho.com) — bản phục dựng
 Version: 1.1
 Text Domain: flatsome-child-yeumoikho-com
*/

/* ═══════════════════════════════════════════════════════════════════════════
   Bảng màu lấy từ style nội tuyến của bản chụp 2023-01-23.
   Bố cục thì DỰNG MỚI: bố cục gốc nằm trong JS/CSS riêng của Next.js, không
   có trong bản chụp (user chốt 2026-08-31: dựng lại tương đối là được).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ymk-chinh:  #5b5bdd;
  --ymk-phu:    #ff36d3;
  --ymk-cam:    #ff4c00;
  --ymk-luc:    #90da30;
  --ymk-kem:    #fcf6f5;
  --ymk-toi:    #1b1b3a;
  --ymk-chu:    #2b2b45;   /* Flatsome mặc định #777 — quá nhạt, thay hẳn */
  --ymk-mo:     #6b6b8a;
  --ymk-vien:   rgba(27, 27, 58, .10);
}

/* ===== FONT TỰ HOST — 8 kiểu chữ lấy lại từ CDN gốc =====
   NaNJaune và Cerebri Sans là font THƯƠNG MẠI: bản phục thừa hưởng nguyên rủi
   ro giấy phép của bản gốc (ghi ở ho-so.md). */
@font-face {
  font-family: 'BeVietnam';
  src: url('fonts/BeVietnam-Regular.woff2') format('woff2'),
       url('fonts/BeVietnam-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NaNJaune';
  src: url('fonts/NaNJaune-MidiRegular.woff2') format('woff2'),
       url('fonts/NaNJaune-MidiRegular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NaNJaune';
  src: url('fonts/NaNJauneMidiBold.woff2') format('woff2'),
       url('fonts/NaNJauneMidiBold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ═══ NỀN CHỮ ══════════════════════════════════════════════════════════════ */
body {
  background: var(--ymk-kem);
  font-family: 'BeVietnam', system-ui, -apple-system, sans-serif;
  color: var(--ymk-chu);
  font-size: 17px;
  line-height: 1.65;
}
/* Flatsome đặt màu xám nhạt ở nhiều nơi — kéo về bảng màu chiến dịch */
body, p, li, td, .entry-content { color: var(--ymk-chu); }
h1, h2, h3, h4, .ymk-nhom {
  font-family: 'NaNJaune', 'BeVietnam', system-ui, sans-serif;
  color: var(--ymk-toi);
  line-height: 1.15;
  letter-spacing: -.01em;
}
a { color: var(--ymk-chinh); }
a:hover { color: var(--ymk-phu); }

/* ═══ HEADER ═══════════════════════════════════════════════════════════════ */
#logo a, #logo img + span { font-family: 'NaNJaune', sans-serif; }
/* Bản gốc KHÔNG có logo: `div.top-header` rỗng, không ảnh, không chữ hiệu.
   Chữ hiệu dưới đây là bổ sung của bản phục — đặt nowrap để khỏi gãy 2 dòng
   như lượt đầu ("K=K | YÊU MỚI / KHÓ"). */
#logo a {
  font-size: 20px; font-weight: 700; white-space: nowrap;
  color: var(--ymk-chinh) !important; letter-spacing: -.02em;
}
.header-main { box-shadow: 0 1px 0 var(--ymk-vien); }
.header-nav a { font-weight: 600; letter-spacing: .01em; }
/* Rác mặc định của Flatsome: mục Newsletter, gạch phân cách, nav-icon rỗng */
.header-newsletter-item, li.header-newsletter-item,
.off-canvas .header-newsletter-item,
.header-main li.header-divider,
.header-main li.nav-icon:empty { display: none !important; }

/* ═══ NHỊP KHỐI — one-pager 6 neo, giữ đúng id gốc để link /#sFilm còn chạy ══ */
.ymk-khoi { padding: 5rem 0; scroll-margin-top: 80px; }
#sIndex     { background: linear-gradient(180deg, #fff 0%, var(--ymk-kem) 100%); }
#sPrep      { background: var(--ymk-chinh); color: #fff; }
#sFilm      { background: #fff; }
#sMuseum    { background: var(--ymk-toi); color: #fff; }
#sResources { background: var(--ymk-kem); }
#sFaqs      { background: #fff; }

#sPrep h2, #sPrep h3, #sMuseum h2, #sMuseum h3 { color: #fff; }
#sPrep p, #sMuseum p { color: rgba(255, 255, 255, .92); }
#sMuseum a { color: var(--ymk-luc); }
#sPrep a { color: #fff; text-decoration: underline; }

/* ═══ HERO — 5 ảnh-chữ khẩu hiệu + dải ảnh chiến dịch ══════════════════════
   Ảnh-chữ là canvas 1440×1072 mà chữ chỉ nằm một góc, phần còn lại trong
   suốt; xếp thẳng hàng thì khối cao 5662px và rỗng hoác. Chồng âm để nuốt
   viền trong suốt. */
.ymk-khoi-anh {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: center;
}
.ymk-khoi-anh-item { max-width: 100%; height: auto; }

#sIndex .ymk-khoi-anh { gap: 0; }
#sIndex .ymk-khoi-anh-item[src*="introtext"] {
  flex: 0 0 100%; max-width: 420px; margin: -8.5% auto;
  filter: drop-shadow(0 6px 18px rgba(255, 76, 0, .18));
}
#sIndex .ymk-khoi-anh-item[src*="typo-scale"] {
  flex: 0 0 100%; max-width: 460px; margin: 3rem auto 1.5rem; opacity: .9;
}
#sIndex .ymk-khoi-anh-item[src*="/index-"] {
  flex: 1 1 22%; max-width: 24%; margin: 0;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(27, 27, 58, .14);
}

/* Chữ tiêu đề dạng ảnh (sMuseum, sResources): bản gốc dùng ảnh chữ thay cho
   chữ thật. Giữ <h2> cho máy đọc màn hình và SEO, nhưng ẩn khỏi mắt để không
   lặp lại đúng dòng chữ đã nằm trong ảnh. */
.ymk-chu-an {
  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;
}
#sMuseum .ymk-khoi-anh-item, #sResources .ymk-khoi-anh-item {
  max-width: min(100%, 540px); margin: 0 auto 1.5rem;
}
#sMuseum .ymk-khoi-anh, #sResources .ymk-khoi-anh { margin-bottom: .5rem; }

/* Khối Phim KHÔNG có dải ảnh: 4 tệp `f-gallery-*` là ảnh MẪU chờ dữ liệu của
   băng chuyền (thư mục `images/demo/`, <h2>/<h6> trong slide rỗng vì JS đổ dữ
   liệu API vào), không phải nội dung — user bỏ 2026-08-31. Tệp vẫn nằm trong
   Media Library, muốn dùng lại thì thêm [ymk_anh_khoi id="sFilm"]. */

/* ═══ KHỐI PrEP — khẩu hiệu nguyên văn, cho nó ra dáng tuyên ngôn ══════════ */
.ymk-hero {
  font-size: 1.35rem; line-height: 1.75; max-width: 48rem;
  margin: 0 auto; text-align: center; font-weight: 500;
}
.ymk-hero p { margin-bottom: 1rem; }

/* ═══ TIÊU ĐỀ KHỐI ═════════════════════════════════════════════════════════ */
.ymk-khoi > h2,
.ymk-khoi .col-inner > h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 .5rem;
  text-align: center;
}
.ymk-khoi > h2::after,
.ymk-khoi .col-inner > h2::after {
  content: ''; display: block; width: 64px; height: 5px;
  margin: 1rem auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--ymk-cam), var(--ymk-phu));
}
#sMuseum h2::after { background: linear-gradient(90deg, var(--ymk-luc), var(--ymk-phu)); }
.ymk-khoi > p { max-width: 46rem; margin: 1.25rem auto 2.5rem; text-align: center; }

.ymk-nhom {
  margin: 3rem 0 1.25rem; font-size: 1.25rem;
  color: var(--ymk-chinh); text-transform: uppercase; letter-spacing: .04em;
}
.ymk-nhom::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  margin-right: .6rem; border-radius: 50%; background: var(--ymk-cam);
}

/* ═══ LƯỚI THẺ ═════════════════════════════════════════════════════════════ */
.ymk-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ymk-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ymk-vien);
  border-radius: 14px; overflow: hidden;
  color: var(--ymk-chu); text-decoration: none;
  box-shadow: 0 1px 3px rgba(27, 27, 58, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ymk-card:hover {
  transform: translateY(-4px);
  border-color: var(--ymk-chinh);
  box-shadow: 0 12px 28px rgba(91, 91, 221, .18);
  color: var(--ymk-chu);
}
.ymk-card-anh { display: block; background: #ededf7; }
.ymk-card-anh img {
  width: 100%; aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; display: block;
  transition: transform .3s ease;
}
.ymk-card:hover .ymk-card-anh img { transform: scale(1.04); }
.ymk-khong-anh {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; background: #ededf7;
  color: var(--ymk-mo); font-size: .875rem;
}
.ymk-card-ten {
  padding: 1rem 1.1rem .35rem; font-weight: 700; font-size: 1.02rem;
  line-height: 1.35; color: var(--ymk-toi);
}
.ymk-card-phu {
  padding: 0 1.1rem 1.1rem; font-size: .875rem; color: var(--ymk-mo);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ymk-card-ten:last-child { padding-bottom: 1.1rem; }

/* Thẻ liên kết ngoài (mục type 4) — vốn không có ảnh, không phải thiếu ảnh */
.ymk-card-lienket {
  background: linear-gradient(150deg, #fff 0%, #f4f4ff 100%);
  border-left: 5px solid var(--ymk-chinh); min-height: 190px;
  justify-content: space-between;
}
.ymk-card-lienket .ymk-card-ten { padding-top: 1.25rem; font-size: 1.1rem; }
.ymk-card-ds {
  padding: 0 1.1rem; font-size: .9rem; color: var(--ymk-mo); line-height: 1.7;
}
.ymk-cham { margin: 0 .45rem; color: var(--ymk-cam); font-weight: 700; }
.ymk-card-so {
  margin: 1rem 1.1rem 1.1rem; align-self: flex-start;
  padding: .3rem .75rem; border-radius: 999px;
  background: var(--ymk-chinh); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}

/* ═══ HỎI ĐÁP ══════════════════════════════════════════════════════════════ */
.ymk-faq { max-width: 52rem; margin: 0 auto; }
.ymk-faq-muc {
  background: #fff; border: 1px solid var(--ymk-vien); border-radius: 12px;
  margin-bottom: .75rem; padding: 1.1rem 1.35rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ymk-faq-muc[open] {
  border-color: var(--ymk-chinh);
  box-shadow: 0 6px 20px rgba(91, 91, 221, .12);
}
.ymk-faq-muc > summary {
  cursor: pointer; font-weight: 700; color: var(--ymk-toi);
  list-style: none; display: flex; align-items: flex-start; gap: .75rem;
}
.ymk-faq-muc > summary::-webkit-details-marker { display: none; }
.ymk-faq-muc > summary::before {
  content: '+'; flex: 0 0 auto; width: 1.4em; height: 1.4em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ymk-cam); color: #fff; font-size: .9em; line-height: 1;
}
.ymk-faq-muc[open] > summary::before { content: '−'; background: var(--ymk-chinh); }
.ymk-faq-tra-loi {
  padding: .85rem 0 .15rem 2.15rem; line-height: 1.75; color: var(--ymk-chu);
}
.ymk-faq-tra-loi a { word-break: break-word; }

/* ═══ TRANG CHI TIẾT ═══════════════════════════════════════════════════════ */
.ymk-single { max-width: 52rem; margin: 0 auto; padding: 1rem 0 3rem; }
.ymk-single h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: .5rem; }
.ymk-phu-de {
  font-size: 1.1rem; color: var(--ymk-mo); font-style: italic;
  margin-bottom: .75rem;
}
.ymk-ngay { font-size: .875rem; color: var(--ymk-mo); margin-bottom: 1.5rem; }
.ymk-single h2 {
  font-size: 1.5rem; margin: 2.5rem 0 1rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--ymk-vien);
}
.ymk-noi-dung { font-size: 1.06rem; line-height: 1.8; }
.ymk-video {
  position: relative; padding-top: 56.25%; margin: 1.75rem 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(27, 27, 58, .16);
}
.ymk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ymk-thu-vien {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.ymk-thu-vien img {
  width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(27, 27, 58, .10);
}
.ymk-lien-ket-ngoai { list-style: none; padding: 0; margin: 0; }
.ymk-lien-ket-ngoai li { margin: 0; border-bottom: 1px solid var(--ymk-vien); }
.ymk-lien-ket-ngoai li:last-child { border-bottom: 0; }
.ymk-lien-ket-ngoai a {
  display: block; padding: .85rem .25rem; font-weight: 600;
}
.ymk-lien-ket-ngoai a::after { content: ' ↗'; color: var(--ymk-cam); }
.ymk-chan-trang {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem;
  background: var(--ymk-kem); border-radius: 12px;
  font-family: 'NaNJaune', sans-serif; font-size: 1.15rem;
  color: var(--ymk-toi); white-space: pre-line;
}
.ymk-quay-lai { margin-top: 2.5rem; font-weight: 600; }

/* Trích nguyên văn từ bản chụp — phân biệt rõ lời của bản gốc với lời của
   người phục dựng, để người đọc không lẫn hai giọng. */
.ymk-nguyen-van {
  margin: 1.5rem 0; padding: 1.25rem 1.5rem;
  border-left: 5px solid var(--ymk-cam);
  background: #fff; border-radius: 0 12px 12px 0;
  font-size: 1.08rem; line-height: 1.8; color: var(--ymk-chu);
}
.ymk-nguyen-van p:last-child { margin-bottom: 0; }
.ymk-nguyen-van-en {
  border-left-color: var(--ymk-mo);
  font-size: .92rem; line-height: 1.7; color: var(--ymk-mo);
}

/* ═══ TUYÊN BỐ LƯU TRỮ CẤP SITE (quyết định G6) ════════════════════════════ */
.ymk-tuyen-bo {
  background: rgba(91, 91, 221, .08); border-left: 4px solid var(--ymk-chinh);
  padding: 1rem 1.2rem; border-radius: 0 10px 10px 0;
  font-size: .95rem; line-height: 1.7;
}
/* Footer — trả giá hai lượt 2026-08-31:
   (1) `opacity: .7` trên nền chàm đậm làm chữ mờ; đổi sang màu tường minh.
   (2) Vẫn không đọc nổi, vì luật nền `body, p, li, td { color: var(--ymk-chu) }`
       ở trên đè màu lên chính thẻ <p> mà `wpautop()` sinh ra bên trong khối —
       chàm đậm #2b2b45 nằm trên nền #1b1b3a, gần như vô hình. Đặt màu cho thẻ
       CHA là vô ích. Bẫy kiểm tra: lượt đo trước tôi đọc màu của <div> bao
       ngoài chứ không phải <p> thật sự chứa chữ, nên báo "đạt" nhầm.
   Luật này phải nằm SAU mọi luật nền. */
.ymk-footer p,
.ymk-footer li,
.ymk-footer td,
.ymk-footer span { color: inherit; }

.ymk-footer a { color: var(--ymk-luc); text-decoration: underline; }
.ymk-footer a:hover { color: #fff; }
.ymk-footer-tuyen-bo {
  font-size: .95rem; line-height: 1.75; color: rgba(255, 255, 255, .94);
  max-width: 58rem;
}
.ymk-footer-tuyen-bo strong { color: #fff; }
.ymk-footer-phap-ly {
  font-size: .85rem; line-height: 1.7; color: rgba(255, 255, 255, .78);
  max-width: 58rem;
}

/* Hàng logo nhà tài trợ — bản gốc để trong `div.logo-res` ngay trên khối
   tuyên bố tài trợ; bản phục đầu bỏ sót. Nền trắng vì logo là bản cho nền sáng. */
.ymk-footer-logo {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem 2.25rem; margin-bottom: 2rem;
  padding: 1.25rem 1.5rem; border-radius: 12px;
  background: #fff;
}
.ymk-footer-logo-item {
  max-height: 54px; width: auto; height: auto; max-width: 190px;
  object-fit: contain;
}

/* ═══ 404 ══════════════════════════════════════════════════════════════════ */
.page-404 h1 { color: var(--ymk-chinh); }

/* ═══ MÀN HÌNH NHỎ ═════════════════════════════════════════════════════════
   Đo 2026-08-31 ở 375px: trang dài 18.624px — sResources 7.614 (25 thẻ một
   cột), sMuseum 3.345, sFilm 3.214, hero 1.838. Một cột trên di động là thủ
   phạm chính, nên xuống 2 cột và siết nhịp thay vì phóng to mọi thứ. */
@media (max-width: 849px) {
  .ymk-khoi { padding: 3rem 0; }
  #sIndex .ymk-khoi-anh-item[src*="introtext"] { max-width: 280px; margin: -9% auto; }
  #sIndex .ymk-khoi-anh-item[src*="typo-scale"] { max-width: 320px; margin: 2rem auto 1rem; }
  #sIndex .ymk-khoi-anh-item[src*="/index-"] { flex: 1 1 46%; max-width: 48%; }
  .ymk-hero { font-size: 1.05rem; }
  .ymk-grid { gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .ymk-khoi > h2, .ymk-khoi .col-inner > h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .ymk-khoi > h2::after, .ymk-khoi .col-inner > h2::after { margin-top: .75rem; height: 4px; }
  .ymk-khoi > p { margin: 1rem auto 1.75rem; }
}

@media (max-width: 549px) {
  body { font-size: 16px; }
  .ymk-khoi { padding: 2.5rem 0; }

  /* 2 cột — nửa số hàng, nửa chiều cao */
  .ymk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .ymk-card { border-radius: 11px; }
  .ymk-card-anh img, .ymk-khong-anh { aspect-ratio: 4 / 3; }
  /* Tiêu đề hiện ĐỦ, không cắt dòng (user yêu cầu 2026-08-31). Trước đó clamp
     3 dòng làm 8/44 thẻ mất đuôi tiêu đề — toàn tiêu đề bài báo dài. Lưới grid
     tự kéo các thẻ cùng hàng bằng nhau nên bỏ clamp không làm so le. */
  .ymk-card-ten {
    padding: .65rem .7rem .3rem; font-size: .88rem; line-height: 1.35;
    overflow-wrap: break-word;
  }
  .ymk-card-ten:last-child { padding-bottom: .75rem; }
  .ymk-card-phu {
    padding: 0 .7rem .75rem; font-size: .78rem; -webkit-line-clamp: 2;
  }
  /* Thẻ liên kết ngoài: bỏ danh sách tên, giữ tiêu đề + số liên kết */
  .ymk-card-lienket { min-height: 0; border-left-width: 4px; }
  .ymk-card-ds { display: none; }
  .ymk-card-so { margin: .5rem .7rem .75rem; font-size: .72rem; padding: .25rem .6rem; }

  /* Hero: khẩu hiệu nhỏ lại, ảnh chiến dịch giữ 2 cột cho khỏi cao */
  #sIndex .ymk-khoi-anh-item[src*="introtext"] { max-width: 225px; margin: -9.5% auto; }
  #sIndex .ymk-khoi-anh-item[src*="typo-scale"] { max-width: 250px; margin: 1.5rem auto .75rem; }
  #sIndex .ymk-khoi-anh-item[src*="/index-"] { flex: 1 1 47%; max-width: 48%; border-radius: 9px; }
  #sMuseum .ymk-khoi-anh-item, #sResources .ymk-khoi-anh-item { margin-bottom: 1rem; }

  .ymk-nhom { margin: 2rem 0 .9rem; font-size: 1.05rem; }
  .ymk-faq-muc { padding: .85rem 1rem; margin-bottom: .55rem; }
  .ymk-faq-tra-loi { padding: .7rem 0 .1rem; }
  .ymk-thu-vien { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ymk-single h2 { font-size: 1.25rem; margin: 1.75rem 0 .75rem; }
  .ymk-chan-trang { padding: 1rem 1.1rem; font-size: 1rem; }
}

/* Breadcrumb hien thi (luot bo sung breadcrumb 2026-09-17 — mot nguon voi BreadcrumbList) */
.ymk-duong-dan { font-size: .9em; margin: 14px 0; }
.ymk-duong-dan-cach { margin: 0 8px; color: #999; }