/* =========================================================
   SKS — bổ sung cho bản dựng WordPress
   Nạp sau theme.css. Xử lý: số lượng thẻ linh động, thẻ ngữ
   nghĩa (button/figure/nav), trang phụ và trợ năng.
   ========================================================= */

/* ---------- Trợ năng ---------- */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold-500); color:var(--purple-900);
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:700;
}
.skip-link:focus{ left:0; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--gold-500); outline-offset:2px; border-radius:4px;
}

/* ---------- Reset nút để dùng thay div ---------- */
.tab, .faq-q, .drawer-group-toggle, .hamburger, .drawer-close{
  font-family:var(--font-body); font-size:inherit; color:inherit;
  background:none; border:none; cursor:pointer;
}
.hamburger{ padding:0; align-items:center; }
.tab{
  padding:9px 18px; border-radius:999px; background:#fff; font-size:.85rem;
  font-weight:700; color:var(--ink-soft); border:1.5px solid transparent;
}
.tab.active{ background:var(--purple-700); color:#fff; }
.pkg-card[hidden]{ display:none; }

/* ---------- Lưới co giãn theo số lượng mục ----------
   auto-fit để không chừa ô trống, kèm giới hạn bề rộng thẻ
   để một mục đơn lẻ không bị kéo giãn hết hàng. */
.petal-grid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); justify-items:start; }
.usp-grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); justify-items:start; }
.doc-grid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); justify-items:start; }
.pkg-grid{ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); justify-items:start; }
.quicknav-grid{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); justify-items:start; }
.gallery-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); height:auto; justify-items:start; }
.test-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); justify-items:start; }
.blog-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); justify-items:start; }
.archive-grid{ justify-items:start; }

.petal-grid > *, .usp-grid > *, .doc-grid > *, .pkg-grid > *,
.quicknav-grid > *, .gallery-grid > *, .test-grid > *,
.blog-grid > *, .archive-grid > *{ width:100%; height:100%; }
.petal-grid > *{ max-width:340px; }
.usp-grid > *{ max-width:300px; }
.doc-grid > *{ max-width:320px; }
.pkg-grid > *{ max-width:380px; }
.quicknav-grid > *{ max-width:340px; }
.gallery-grid > *{ max-width:520px; }
.test-grid > *, .blog-grid > *, .archive-grid > *{ max-width:420px; }
.gallery-item{ min-height:320px; }

@media(max-width:1023px){
  .usp-grid{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
  .doc-grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
  .quicknav-grid{ grid-template-columns:repeat(2, 1fr); }
  .news-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .petal-grid{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:8px; -webkit-overflow-scrolling:touch;
  }
  .petal{ min-width:78%; scroll-snap-align:start; min-height:360px; }
  .usp-grid{ grid-template-columns:repeat(2, 1fr); }
  .doc-grid{ grid-template-columns:repeat(2, 1fr); }
  .pkg-grid{ grid-template-columns:1fr; }
  .gallery-item{ min-height:220px; }
}
@media(max-width:480px){
  .quicknav-card{ padding:18px 10px; }
  .quicknav-card .qicon{ width:44px; height:44px; margin-bottom:8px; }
  .quicknav-card h3{ font-size:.9rem; }
  .quicknav-card p{ font-size:.76rem; }
}
/* Chỉ đổ về một cột trên màn hình rất hẹp (dưới 360px). */
@media(max-width:359px){
  .usp-grid, .doc-grid, .quicknav-grid{ grid-template-columns:1fr; }
}

/* Thanh nút dưới đáy: chia đều theo số nút thực tế. */
.mobile-bar .container{ grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); }

/* ---------- Thẻ figure cho ảnh cơ sở vật chất ---------- */
.gallery-item{ margin:0; }
.gallery-item figcaption{
  position:relative; z-index:1; color:#fff; font-weight:700; font-size:.9rem;
}

/* ---------- Cảm nhận: dùng figure/blockquote ---------- */
.test-card{ margin:0; }
.test-card blockquote{ margin:0; border:none; padding:0; }
.test-card .avatar{ background-color:var(--gold-500); flex-shrink:0; }

/* ---------- Hỏi đáp ---------- */
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  width:100%; padding:20px 4px; font-weight:700; color:var(--ink);
  text-align:left; font-size:1rem;
}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease-out; }
.faq-a p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 10px; }
.faq-item.open .faq-a{ max-height:600px; padding-bottom:18px; }

/* ---------- Tin tức / cẩm nang: ảnh là liên kết ---------- */
.news-feature .thumb,
.news-item .thumb,
.blog-thumb{
  display:block; background-color:var(--paper-alt);
  background-size:cover; background-position:center;
}
.news-feature h3 a:hover,
.news-item h4 a:hover,
.blog-info h3 a:hover{ color:var(--purple-700); }
.news-list .sks-more{ align-self:flex-start; margin-top:4px; }
.news-feature .date, .news-item .date{ display:block; }

/* ---------- Giới thiệu ---------- */
.hero-quote{
  font-weight:600; font-size:1.1rem; color:var(--gold-500);
  margin:-14px 0 26px; max-width:520px;
}

/* ---------- Thanh trên cùng: hỗ trợ cả span ---------- */
.topbar .left span{ opacity:.9; }
.topbar .socials a{ color:inherit; }

/* ---------- Đối tác: hỗ trợ logo ảnh ---------- */
.partner-row a, .partner-row div{
  width:140px; height:56px; background:var(--paper-alt); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:var(--ink-soft);
  padding:8px; text-align:center; transition:.2s;
}
.partner-row a:hover{ background:#fff; box-shadow:var(--shadow-sm); }
.partner-row img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ---------- Chân trang ---------- */
.foot-slogan{ font-size:.95rem; font-weight:600; color:var(--gold-500); margin-bottom:12px; }
.foot-about{ font-size:.85rem; max-width:280px; margin-bottom:16px; }
.foot-socials{ display:flex; gap:10px; }
.foot-socials a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:.2s;
}
.foot-socials a:hover{ background:var(--gold-500); color:var(--purple-900); }
footer.site ul{ list-style:none; padding:0; margin:0; }
footer.site .foot-contact li{ line-height:1.5; }
.foot-legal{ display:inline-flex; gap:14px; flex-wrap:wrap; }
.foot-legal a:hover{ color:var(--gold-500); }

/* ---------- Đường dẫn (breadcrumb) ---------- */
.sks-breadcrumb{ background:var(--paper-alt); padding:14px 0; font-size:.84rem; }
.sks-breadcrumb ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:8px; align-items:center; color:var(--ink-soft);
}
.sks-breadcrumb li + li::before{ content:"›"; margin-right:8px; color:var(--gold-600); }
.sks-breadcrumb a{ color:var(--purple-700); font-weight:600; }
.sks-breadcrumb a:hover{ text-decoration:underline; }

/* ---------- Trang phụ: nội dung + cột bên ---------- */
.page-hero{
  background:linear-gradient(135deg,var(--purple-900),var(--purple-700) 70%);
  color:#fff; padding:52px 0;
}
.page-hero h1{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.6rem); }
.page-hero p{ color:#E6DAF6; margin-top:10px; max-width:640px; }
.page-hero .eyebrow{ color:var(--gold-500); }

.content-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:start; }
@media(max-width:1023px){ .content-layout{ grid-template-columns:1fr; gap:36px; } }

.entry{ background:#fff; border-radius:18px; padding:36px; box-shadow:var(--shadow-sm); }
@media(max-width:640px){ .entry{ padding:22px 18px; } }
.entry-meta{ font-size:.82rem; color:var(--ink-soft); margin-bottom:20px; display:flex; gap:14px; flex-wrap:wrap; }
.entry-content{ font-size:1rem; line-height:1.8; }
.entry-content > * + *{ margin-top:18px; }
.entry-content h2{ font-size:1.5rem; margin-top:32px; }
.entry-content h3{ font-size:1.2rem; margin-top:26px; }
.entry-content ul, .entry-content ol{ padding-left:22px; }
.entry-content li + li{ margin-top:8px; }
.entry-content img{ border-radius:14px; height:auto; }
.entry-content blockquote{
  border-left:4px solid var(--gold-500); padding:6px 0 6px 20px;
  color:var(--ink-soft); font-style:italic;
}
.entry-content a{ color:var(--purple-700); text-decoration:underline; }
.entry-content table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.entry-content th, .entry-content td{ border:1px solid #E5DFF0; padding:10px 12px; text-align:left; }
.entry-thumb{ border-radius:18px; overflow:hidden; margin-bottom:26px; }
.entry-thumb img{ width:100%; height:auto; display:block; }
.card-excerpt{ font-size:.88rem; color:var(--ink-soft); }
.entry-thumb-portrait{ max-width:300px; }
@media(min-width:768px){
  .entry-thumb-portrait{ float:left; margin:0 26px 18px 0; }
  .entry-content::after{ content:""; display:block; clear:both; }
}
.entry-features{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; }
.entry-features li{ padding-left:26px; position:relative; color:var(--ink-soft); }
.entry-features li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--purple-700); font-weight:700;
}
.entry-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid #F0EBF7; }
.related-block{ margin-top:44px; }
.related-block .section-head{ margin-bottom:20px; }
.related-block .section-head h2{ font-size:1.4rem; }

.sidebar .widget{
  background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); margin-bottom:20px;
}
.sidebar .widget-title{ font-size:1rem; margin-bottom:14px; }
.sidebar ul{ list-style:none; padding:0; margin:0; font-size:.9rem; }
.sidebar li + li{ margin-top:10px; padding-top:10px; border-top:1px solid #F0EBF7; }
.sidebar a:hover{ color:var(--purple-700); }

/* ---------- Danh sách bài / lưu trữ ---------- */
.archive-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; }
.sks-pagination{ margin-top:40px; display:flex; justify-content:center; }
.sks-pagination ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.sks-pagination li{ list-style:none; }
.sks-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; margin:0 4px;
  border-radius:999px; background:#fff; font-weight:700; font-size:.88rem;
  color:var(--purple-700); box-shadow:var(--shadow-sm);
}
.sks-pagination .page-numbers.current,
.sks-pagination .page-numbers:hover{ background:var(--purple-700); color:#fff; }

/* ---------- Thẻ chuyên khoa / bác sĩ / gói khám ở trang lưu trữ ---------- */
.entry-hero-badge{
  display:inline-block; font-size:.72rem; font-weight:700; padding:4px 12px;
  border-radius:999px; color:#fff; margin-bottom:12px;
}

/* ---------- Tìm kiếm & 404 ---------- */
.sks-notice{ text-align:center; padding:60px 20px; }
.sks-notice h1{ font-size:2rem; margin-bottom:12px; }
.sks-notice p{ color:var(--ink-soft); margin-bottom:24px; }
.search-form{ display:flex; gap:10px; max-width:460px; margin:0 auto; }
.search-form input[type="search"]{
  flex:1; padding:13px 18px; border-radius:999px; border:1.5px solid #E5DFF0;
  font-family:var(--font-body); font-size:.95rem; min-width:0;
}
.search-form button{
  padding:13px 24px; border-radius:999px; border:none; cursor:pointer;
  background:var(--purple-700); color:#fff; font-weight:700; font-family:var(--font-body);
}

/* ---------- Chống vỡ khung trên màn hình hẹp ---------- */
img, video, iframe{ max-width:100%; }
.container{ width:100%; }
.promo-content h3{ overflow-wrap:anywhere; }
.petal h3, .doc-info h3, .pkg-card h3{ overflow-wrap:anywhere; }
@media(max-width:360px){
  .logo-text{ font-size:1rem; }
  .header-cta .btn{ padding:8px 12px; font-size:.74rem; }
  .promo-content{ padding:24px 16px 28px; }
  .promo-off{ width:64px; height:64px; top:10px; right:10px; }
  .promo-off .pct{ font-size:1.05rem; }
}