/* themes/drngocimplant/core/css/style.css
   COMPONENT SYSTEM — Dr Ngọc Implant (Nerio Medical Health)
   Buttons, badges, header/footer, cards, editorial, helpers. Tông xanh y tế. */

/* ===== BUTTONS ===== */
.btn-premium {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--stch-primary); color: #fff !important;
  border: none; border-radius: var(--stch-radius-full);
  padding: 13px 30px; font-weight: 600; font-size: 0.98rem;
  text-decoration: none; cursor: pointer;
  transition: var(--stch-transition-kinetic);
  box-shadow: 0 8px 20px rgba(15, 163, 173, 0.25);
}
.btn-premium:hover { background: var(--nerio-teal-dark); color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,163,173,0.32); }
.btn-premium.btn-sm { padding: 9px 20px; font-size: 0.85rem; }
.btn-premium.btn-outline { background: transparent; color: var(--stch-primary) !important; border: 2px solid var(--stch-primary); box-shadow: none; }
.btn-premium.btn-outline:hover { background: var(--stch-primary); color: #fff !important; }
.btn-accent { background: var(--nerio-accent); box-shadow: 0 8px 20px rgba(255,122,89,0.28); }
.btn-accent:hover { background: #f2694a; }

/* ===== BADGE / LABEL ===== */
.badge-stch {
  display: inline-block; background: var(--nerio-mint); color: var(--nerio-teal-dark);
  border-radius: var(--stch-radius-full); padding: 6px 16px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ===== HEADER (fallback + slot) ===== */
.dmdc-site-header, .lumina-glass-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--stch-outline-ghost);
  z-index: var(--stch-z-header);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.dmdc-site-header.scrolled, .lumina-glass-header.scrolled { box-shadow: var(--stch-shadow-soft); background: #fff; }
.lumina-glass-header .container { padding-top: 14px; padding-bottom: 14px; }
.dmdc-site-header .nav-link, .lumina-glass-header .nav-link { color: var(--nerio-navy); font-weight: 600; transition: color .2s; }
.dmdc-site-header .nav-link:hover, .lumina-glass-header .nav-link:hover { color: var(--stch-primary); }

/* ===== FOOTER ===== */
.dmdc-site-footer { background: var(--nerio-navy); color: #cddbe4; }
.dmdc-site-footer a { color: #cddbe4; text-decoration: none; transition: color .2s; }
.dmdc-site-footer a:hover { color: #fff; }
.dmdc-site-footer h2, .dmdc-site-footer h3, .dmdc-site-footer h4, .dmdc-site-footer h5, .dmdc-site-footer h6 { color: #fff; }

/* ===== CARDS (archive/blog) ===== */
.stch-archive-card { border: 1px solid var(--stch-outline-ghost); background: var(--stch-surface-lowest); border-radius: var(--stch-radius-lg); transition: var(--stch-transition-kinetic); }
.stch-archive-card:hover { box-shadow: var(--stch-shadow-ambient); transform: translateY(-5px); border-color: rgba(15,163,173,0.35); }
.stch-zoom-on-hover { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.stch-archive-card:hover .stch-zoom-on-hover { transform: scale(1.05); }

/* Grid card (Nerio-style featured/news) */
.nerio-card { background:#fff; border:1px solid var(--stch-outline-ghost); border-radius: var(--stch-radius-lg); overflow:hidden; transition: var(--stch-transition-kinetic); height:100%; }
.nerio-card:hover { transform: translateY(-6px); box-shadow: var(--stch-shadow-ambient); }
.nerio-card .thumb { display:block; aspect-ratio:16/10; overflow:hidden; }
.nerio-card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(0.16,1,0.3,1); }
.nerio-card:hover .thumb img { transform: scale(1.06); }
.nerio-card .body { padding: 18px 20px 22px; }
.nerio-card .cat { color: var(--stch-primary); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.nerio-card h3 { font-size:1.15rem; margin:.5rem 0 .6rem; }
.nerio-card h3 a { color: var(--nerio-navy); text-decoration:none; }
.nerio-card h3 a:hover { color: var(--stch-primary); }

/* ===== EDITORIAL (post content) ===== */
.editorial-text { font-size: 1.1rem; line-height: 1.85; color: var(--stch-on-surface); }
.editorial-text p { margin-bottom: 1.4rem; }
.editorial-text img { max-width: 100%; height: auto; border-radius: var(--stch-radius-md); margin: 1.2rem 0; }
.editorial-text h2 { font-size: 1.9rem; margin: 2.6rem 0 1.2rem; font-weight: 800; }
.editorial-text h3 { font-size: 1.45rem; margin: 2rem 0 .9rem; font-weight: 700; }
.editorial-text ul, .editorial-text ol { margin: 0 0 1.4rem 1.2rem; }
.editorial-text li { margin-bottom: .5rem; }
.editorial-text a { color: var(--stch-primary); text-decoration: underline; text-underline-offset: 3px; }
.editorial-text blockquote { border-left: 4px solid var(--stch-primary); background: var(--nerio-mint); padding: 16px 22px; border-radius: 0 var(--stch-radius-md) var(--stch-radius-md) 0; margin: 1.6rem 0; }
.editorial-text table { width:100%; border-collapse: collapse; margin: 1.4rem 0; }
.editorial-text th, .editorial-text td { border:1px solid var(--stch-outline-ghost); padding:10px 12px; }
.editorial-text th { background: var(--nerio-mint); color: var(--nerio-navy); }

/* ===== HELPERS ===== */
.stch-hover-red { transition: var(--stch-transition-kinetic); display: inline-block; }
.stch-hover-red:hover { color: var(--stch-primary) !important; }
.letter-spacing-wide { letter-spacing: 0.1em; }
.fw-extrabold { font-weight: 800; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.text-primary, .text-teal { color: var(--stch-primary) !important; }
.bg-mint { background: var(--nerio-mint) !important; }
.section-pad { padding: 64px 0; }

/* Bootstrap primary override → teal */
.btn-primary { background-color: var(--stch-primary); border-color: var(--stch-primary); }
.btn-primary:hover { background-color: var(--nerio-teal-dark); border-color: var(--nerio-teal-dark); }

/* Pagination */
.nerio-pagination { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top: 40px; }
.nerio-pagination a, .nerio-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border-radius: var(--stch-radius-sm); border:1px solid var(--stch-outline-ghost); color: var(--nerio-navy); text-decoration:none; font-weight:600; }
.nerio-pagination a:hover { background: var(--nerio-mint); border-color: var(--stch-primary); }
.nerio-pagination .active { background: var(--stch-primary); color:#fff; border-color: var(--stch-primary); }

/* ===== HEADER TEMPLATE SLOT — kiểu Nerio: topbar + hàng chính (container-only, bố cục qua settings) ===== */
/* Topbar */
#site-header .dni-topbar { font-size:.84rem; color:#cddbe4; }
#site-header .dni-topbar p { margin:0; color:#cddbe4; }
#site-header .dni-topbar ul.dmdc-icon-list { list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap; }
#site-header .dni-topbar .dmdc-icon-list-item { display:flex; gap:7px; align-items:center; }
#site-header .dni-topbar .dmdc-icon-list-icon i { color:var(--stch-primary); font-size:.8rem; }
#site-header .dni-topbar .dmdc-icon-list-text { color:#cddbe4; }
#site-header .dni-topbar a { text-decoration:none; }
#site-header .dni-topbar .dmdc-button { padding:5px 16px; font-size:.8rem; box-shadow:none; }
@media (max-width: 991.98px) { #site-header .dni-tb-info, #site-header .dni-tb-cta { display:none; } #site-header .dni-tb-tag { width:100% !important; flex:0 0 100%; text-align:center; } }
/* Hàng chính */
#site-header .dmdc-site-logo img { width:auto; max-height:52px; }
#site-header .dmdc-search-form .search-btn, #site-header .dmdc-search-toggle button { background:transparent; border:none; cursor:pointer; }
#site-header .dmdc-nav-menu-wrapper .navbar { background:transparent; }
#site-header .dmdc-button { box-shadow:0 6px 16px rgba(15,163,173,.25); font-weight:600; white-space:nowrap; }
/* FIX menu con bị cắt: style-engine ép overflow:hidden cho container có width% → cắt dropdown/megamenu.
   Ép overflow visible cho mọi khối trong header để menu con hiện đầy đủ. */
#site-header .dmdc-el--container, #site-header .dmdc-el--nav_menu, #site-header .dmdc-nav-menu-wrapper,
#site-header .navbar, #site-header .navbar-collapse, #site-header .nav-item, #site-header .dmdc-menu,
#site-header .dmdc-menu-item, #site-header .dmdc-has-submenu, #site-header .dmdc-has-megamenu { overflow: visible !important; }
/* Megamenu full-bleed: cho panel leo lên #site-header (sticky, full width) thay vì cột nav (position relative do style-engine).
   Container header về static; #site-header đóng vai offset-parent. */
#site-header .dmdc-el--container,
#site-header .dmdc-el--nav_menu, #site-header .dmdc-nav-menu-wrapper,
#site-header .navbar, #site-header .dmdc-nav-menu, #site-header .navbar-collapse,
#site-header .dmdc-has-megamenu { position: static !important; }
/* Giữ li dropdown THƯỜNG (submenu) relative để dropdown con định vị đúng */
#site-header .dmdc-menu-item.dropdown:not(.dmdc-has-megamenu) { position: relative !important; }
/* QUAN TRỌNG: container BÊN TRONG panel megamenu phải relative — nếu static thì .dmdc-bg-layer (absolute)
   của cột có bg leo lên #site-header, phủ mint che nội dung. Trả relative cho content panel. */
#site-header .dmdc-megamenu-panel .dmdc-el--container { position: relative !important; }
/* Định vị dropdown menu con: ngay dưới link cha */
#site-header .dmdc-menu .dropdown-menu { position:absolute; top:100%; left:0; margin-top:6px; transform:none; z-index:1200; }
/* ===== MEGAMENU (kiểu Nerio) — panel full-bleed nhiều cột ===== */
#site-header .dmdc-megamenu-panel { top:100%; margin-top:0; border:0 !important; border-top:3px solid var(--stch-primary) !important; border-radius:0 0 14px 14px !important; box-shadow:0 24px 48px rgba(16,52,74,.14) !important; padding:0 !important; z-index:1200; }
#site-header .dmdc-megamenu-content { max-width:1240px; margin:0 auto; }
#site-header .dmdc-megamenu-panel .dmdc-heading-title { color:var(--nerio-navy); }
#site-header .dmdc-megamenu-panel .dmdc-icon-list ul { list-style:none; padding:0; margin:0; }
#site-header .dmdc-megamenu-panel .dmdc-icon-list-item { display:flex; gap:9px; align-items:flex-start; margin-bottom:9px; }
#site-header .dmdc-megamenu-panel .dmdc-icon-list-icon i { color:var(--stch-primary); font-size:.8rem; margin-top:3px; }
#site-header .dmdc-megamenu-panel .dmdc-icon-list a { color:var(--nerio-navy); text-decoration:none; }
#site-header .dmdc-megamenu-panel .dmdc-icon-list a:hover .dmdc-icon-list-text { color:var(--stch-primary); }
#site-header .dmdc-megamenu-panel .dmdc-divider-wrapper { margin:4px 0 14px; }
#site-header .dmdc-megamenu-panel .dmdc-divider { justify-content:flex-start !important; }
#site-header .dmdc-megamenu-panel .pl-grid-title a, #site-header .dmdc-megamenu-panel .post-title a { color:var(--nerio-navy); }
#site-header .dmdc-megamenu-panel .pl-grid-title a:hover { color:var(--stch-primary); }
#site-header .dmdc-megamenu-panel .dmdc-button { box-shadow:none; }
/* menu link cosmetic (màu chính đã đặt qua settings text_color/hover_text_color của nav_menu) */
#site-header .dmdc-menu { align-items:center; margin:0; padding:0; }
#site-header .dmdc-menu .dmdc-menu-link { border-radius:8px; text-decoration:none; white-space:nowrap; transition:color .2s, background .2s; }
#site-header .dmdc-menu .dmdc-menu-link:hover, #site-header .dmdc-menu .dmdc-menu-item.active > .dmdc-menu-link { background:var(--nerio-mint); }
#site-header .dmdc-menu .dropdown-menu { border:1px solid var(--stch-outline-ghost); border-radius:12px; box-shadow:var(--stch-shadow-soft); padding:8px; min-width:240px; }
#site-header .dmdc-menu .dropdown-menu .dmdc-menu-link { display:block; padding:9px 14px; border-radius:8px; font-weight:500; }
@media (max-width: 991.98px) {
  #site-header .dni-hd-col { width:auto !important; flex:0 0 auto; }
  #site-header .dni-hd-col-nav { order:3; width:100% !important; flex:0 0 100%; justify-content:flex-start; }
}

/* ===== FOOTER TEMPLATE SLOT — kiểu Nerio: 4 cột [brand | Chuyên mục | Bài viết mới | Liên hệ] + bottom bar =====
   Nền navy + padding qua SETTINGS container; CSS này chỉ cosmetic cho widget bên trong. */
#site-footer { background:transparent; }
#site-footer .dmdc-heading-title { margin-bottom:10px; }
#site-footer .dmdc-divider-wrapper { margin:0 0 16px; }
#site-footer .dmdc-divider { justify-content:flex-start !important; }
#site-footer .dmdc-text-editor-content { color:#cddbe4; line-height:1.7; margin:12px 0 16px; }
/* Logo footer: chip trắng để logo tối nổi trên nền navy */
#site-footer .dni-ft-brand .dmdc-site-logo a { background:#fff; border-radius:10px; padding:8px 14px; }
/* Menu chuyên mục dọc */
#site-footer .dmdc-nav-menu-wrapper .navbar { background:transparent; }
#site-footer .dmdc-menu { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
#site-footer .dmdc-menu .dmdc-menu-link { color:#cddbe4; text-decoration:none; padding:0; transition:color .2s, padding-left .2s; }
#site-footer .dmdc-menu .dmdc-menu-link:hover { color:#fff; padding-left:4px; }
/* Danh sách bài viết mới (post_list) — nén gọn kiểu Nerio: thumb nhỏ + tiêu đề + ngày */
#site-footer .dmdc-post-list-container { padding:0 !important; }
#site-footer .dni-ft-posts .dmdc-post-list-container > .d-flex { gap:14px !important; }
#site-footer .dni-ft-posts .post-list-card { background:transparent !important; margin-bottom:0 !important; gap:12px; align-items:center; flex-direction:row !important; }
#site-footer .dni-ft-posts .post-list-thumb { flex:0 0 76px !important; }
#site-footer .dni-ft-posts .post-list-thumb img { min-height:0 !important; width:76px; height:64px; object-fit:cover; border-radius:8px; }
#site-footer .dni-ft-posts .post-list-body { padding:0 !important; }
#site-footer .dni-ft-posts .post-meta-top { margin-bottom:2px !important; color:#8fa6b3 !important; }
#site-footer .dni-ft-posts .post-meta-top .meta-item { color:#8fa6b3; }
#site-footer .dni-ft-posts .post-title { margin-bottom:0 !important; font-size:.92rem; }
#site-footer .dni-ft-posts .post-title a { color:#e8f1f5 !important; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#site-footer .dni-ft-posts .post-title a:hover { color:var(--stch-primary) !important; }
#site-footer .dni-ft-posts .post-footer { display:none !important; }
#site-footer .dni-ft-posts .category-badge-list { display:none !important; }
/* Icon list liên hệ */
#site-footer .dmdc-icon-list ul { list-style:none; padding:0; margin:0; }
#site-footer .dmdc-icon-list-item { display:flex; gap:10px; align-items:flex-start; margin-bottom:11px; }
#site-footer .dmdc-icon-list-icon i { color:var(--stch-primary); font-size:.82rem; }
#site-footer .dmdc-icon-list-text { color:#cddbe4; }
#site-footer .dmdc-icon-list a { text-decoration:none; }
#site-footer .dmdc-icon-list a:hover .dmdc-icon-list-text { color:#fff; }
#site-footer .dmdc-social-icons { margin-top:6px; }
/* Bottom bar */
#site-footer .dni-footbar { font-size:.85rem; border-top:1px solid rgba(255,255,255,.08); }
#site-footer .dni-footbar p { margin:0; color:#8fa6b3; }
#site-footer .dni-footbar .dmdc-button.btn-link { color:#cddbe4; text-decoration:none; font-size:.85rem; }
#site-footer .dni-footbar .dmdc-button.btn-link:hover { color:#fff; }
@media (max-width: 991.98px) { #site-footer .dni-ft-col { width:47% !important; flex:0 0 47%; } #site-footer .dni-fb-col { width:100% !important; flex:0 0 100%; justify-content:center; text-align:center; } }
@media (max-width: 575px) { #site-footer .dni-ft-col { width:100% !important; flex:0 0 100%; } }

/* ===== HOMEPAGE (Nerio magazine) — ép màu teal cho module dùng fallback xanh Bootstrap ===== */
.dmdc-services-card .dmdc-card-icon { color: var(--stch-primary) !important; }
.dmdc-services-card .dmdc-card-btn { background: var(--stch-primary) !important; border-color: var(--stch-primary) !important; color: #fff !important; border-radius: 8px; }
.dmdc-services-card .dmdc-card-btn:hover { background: var(--nerio-teal-dark) !important; }
.dmdc-services-card .dmdc-card-title { color: var(--nerio-navy); }
main .read-more-link, main .read-more-link i { color: var(--stch-primary) !important; }
main .read-more-link:hover { color: var(--nerio-teal-dark) !important; }
main .post-title a:hover, main .pl-grid-title a:hover { color: var(--stch-primary) !important; }
.dmdc-pl-featured .pl-feat-side .post-title a:hover { color: var(--stch-primary) !important; }
/* nút outline-light trên nền navy (CTA) */
.dni-hp-cta-in .btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.dni-hp-cta-in .btn-outline-light:hover { background: #fff; color: var(--nerio-navy); }
.dni-hp-cta-in .btn-outline-primary { border-color: var(--stch-primary); color: var(--stch-primary); }
.dni-hp-cta-in p { color: #cddbe4; }

/* ===== HOMEPAGE: cân khối đồng đều (yêu cầu 22/07) ===== */
/* S3 Chuyên mục nổi bật: 4 ô cao bằng nhau — title luôn chiếm đúng 2 dòng (clamp + min-height),
   nút ghim đáy để mép dưới thẳng hàng dù mô tả dài ngắn khác nhau */
.uid-dni-hp-cats-row .dmdc-el--services_card,
.uid-dni-hp-cats-row .dmdc-services-card-wrapper,
.uid-dni-hp-cats-row .dmdc-services-card { height: 100%; }
.uid-dni-hp-cats-row .dmdc-card-content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.uid-dni-hp-cats-row .dmdc-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; min-height: calc(2 * 1.35em);
}
.uid-dni-hp-cats-row .dmdc-card-btn { margin-top: auto; align-self: flex-start; }
/* S7 Niềng răng / Răng sứ: card đều khung — title luôn đúng 2 dòng, dài thì cắt "…" */
.uid-dni-hp-two .post-list-card .post-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.45; min-height: calc(2 * 1.45em);
}
.uid-dni-hp-two .post-list-card .post-title a { display: inline; }
/* Mobile: cột builder giữ nguyên width % desktop (23%/47%) → chữ vỡ vụn, ô rớt hàng.
   Style-engine không sinh width_mobile nên stack lại bằng theme (selector > để không đụng widget con) */
@media (max-width: 767.98px) {
  .uid-dni-hp-cats-row { flex-wrap: wrap; row-gap: 14px; }
  .uid-dni-hp-cats-row > .dmdc-el--container { width: 48% !important; flex: 1 1 48% !important; max-width: 100%; }
  .uid-dni-hp-two { flex-wrap: wrap; }
  .uid-dni-hp-two > .dmdc-el--container { width: 100% !important; flex: 1 1 100% !important; }
}
@media (max-width: 479.98px) {
  .uid-dni-hp-cats-row > .dmdc-el--container { width: 100% !important; flex: 1 1 100% !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  h1.display-3, h1.display-4 { font-size: 2rem; }
  .section-pad { padding: 44px 0; }
}
@media (max-width: 575px) {
  .btn-premium { padding: 11px 22px; font-size: 0.9rem; }
  .editorial-text { font-size: 1.02rem; }
}

/* ===== MOBILE OVERFLOW FIXES (audit GĐ7: 360px) ===== */
/* Popup search toggle định vị tràn phải màn hình hẹp */
#site-header .dmdc-search-pop { right: 0 !important; left: auto !important; max-width: min(92vw, 340px); }
/* .row.g-5 (post layout): gutter 3rem > padding container ở mobile → thu gutter */
@media (max-width: 575.98px) {
  .stch-post-layout .row.g-5 { --bs-gutter-x: 1.25rem; }
}
/* flex items co giãn an toàn (footer post_list, hero featured) */
.post-list-card, .post-list-body, .pl-feat-side, .pl-feat-main { min-width: 0; }
/* post_grid .row margin âm (colGap/2 inline) > padding container ở mobile → tràn 2px;
   dưới 576px lưới chỉ còn 1 cột nên bỏ gutter âm không ảnh hưởng căn cột */
@media (max-width: 575.98px) {
  .dmdc-post-grid-container .row { margin-left: 0 !important; margin-right: 0 !important; }
  .dmdc-post-grid-container .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
}