/* themes/drngocimplant/core/css/style.css
   COMPONENT SYSTEM — HOME DENTAL (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: nền GOLD (settings container), chữ TRẮNG, cỡ nhỏ (yêu cầu 23/07) */
#site-header .dni-topbar { font-size:.72rem; color:#fff; }
#site-header .dni-topbar p { margin:0; color:#fff; }
#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:#fff; font-size:.7rem; }
#site-header .dni-topbar .dmdc-icon-list-text { color:#fff; }
#site-header .dni-topbar a { text-decoration:none; color:#fff; }
#site-header .dni-topbar .dmdc-button { padding:4px 14px; font-size:.72rem; box-shadow:none; background:#fff !important; color:var(--nerio-navy) !important; border-color:#fff !important; }
/* Nền GOLD đặt THẲNG trên topbar — style-engine render bg qua .dmdc-bg-layer (absolute), nhưng
   CSS megamenu ép header container position:static → bg-layer trốn ra #site-header, cao lệch (109px).
   Set background trực tiếp + ẩn bg-layer lạc chỗ. */
#site-header .dni-topbar { background:#f26932 !important; }
#site-header .dni-header { background:#fff !important; }
/* Ẩn bg-layer escaped của CẢ topbar (gold) lẫn header-row (trắng cao 109px trốn lên phủ topbar) */
#site-header .dni-topbar > .dmdc-bg-layer,
#site-header .dni-header > .dmdc-bg-layer { display:none !important; }
/* Ẩn topbar khi cuộn xuống (JS thêm .dni-scrolled vào #site-header) — đè inline padding của style-engine */
#site-header .dni-topbar { transition:max-height .28s ease, opacity .2s ease, padding .2s ease; max-height:120px; }
#site-header.dni-scrolled .dni-topbar { max-height:0 !important; opacity:0; padding-top:0 !important; padding-bottom:0 !important; }
/* Tablet/mobile: chỉ giữ tagline (giữa), ẩn giờ/hotline/CTA. !important vì style-engine emit inline display:flex */
@media (max-width: 991.98px) {
  #site-header .dni-tb-info, #site-header .dni-tb-cta { display:none !important; }
  #site-header .dni-tb-tag { width:100% !important; flex:0 0 100% !important; text-align:center; }
  #site-header .dni-tb-tag p { 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-inner, #site-header .uid-dni-hd-inner { flex-wrap:wrap !important; }
  #site-header .dni-hd-col { width:auto !important; flex:0 1 auto !important; }
  #site-header .dni-hd-col-nav { order:3; width:auto !important; flex:0 1 auto !important; justify-content:flex-end; }
  /* Search + "Đặt lịch ngay" chuyển VÀO drawer (mobile_modules) → ẩn khỏi hàng chính, chỉ còn logo + burger */
  #site-header .dni-hd-col-act { display:none !important; }
}
/* Drawer mobile: logo trên đầu → search → menu → "Đặt lịch ngay" dưới cùng */
.dm-drawer .dm-top { padding:14px 16px 4px; }
.dm-drawer .dm-block-logo { text-align:center; margin-bottom:12px; }
.dm-drawer .dm-block-logo img { max-height:44px; width:auto; }
.dm-drawer .dm-search { display:flex; gap:8px; border:1.5px solid #e6e9ef; border-radius:10px; padding:4px 6px 4px 12px; }
.dm-drawer .dm-search input { border:0; outline:0; flex:1; font-size:.92rem; min-width:0; background:transparent; }
.dm-drawer .dm-search input::placeholder { color:#9aa7b5; }
.dm-drawer .dm-search button { border:0 !important; background:var(--stch-primary) !important; color:#fff !important; border-radius:8px; padding:7px 13px; cursor:pointer; }
.dm-drawer .dm-foot { margin-top:auto; padding:14px 16px 18px; }
.dm-drawer .dm-block--datlich .dmdc-el--button, .dm-drawer .dm-block--datlich .dmdc-button { width:100% !important; display:flex; justify-content:center; }
.dm-drawer .dm-block--datlich .dmdc-button { padding:12px 18px; font-size:1rem; }

/* ===== MEGAMENU trong DRAWER (mobile/tablet) — accordion dọc gọn, KHÔNG bê layout 3 cột desktop =====
   Desktop panel là position:absolute full-bleed nhiều cột → trong drawer 330px bị co dí.
   Biến thành: danh sách chuyên mục dọc, đóng/mở bằng chevron (theme JS thêm .dm-sub-btn → core toggle .open). */
.dm-drawer li.dmdc-has-megamenu { display:flex; flex-wrap:wrap; align-items:center; }
.dm-drawer li.dmdc-has-megamenu > a, .dm-drawer li.dmdc-has-megamenu > .dmdc-menu-link { flex:1 1 auto; min-width:0; }
/* Panel: ẩn mặc định, static full-width, bỏ mọi trang trí desktop */
.dm-drawer .dmdc-megamenu-panel {
  display:none !important; position:static !important; inset:auto !important; transform:none !important;
  width:100% !important; max-width:100% !important; flex-basis:100% !important; margin:0 !important;
  padding:0 0 6px 12px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
}
.dm-drawer li.dmdc-has-megamenu.open > .dmdc-megamenu-panel,
.dm-drawer li.dmdc-has-megamenu.open .dmdc-megamenu-panel { display:block !important; }
/* Nội dung: mọi container/hàng cột về khối dọc full-width */
.dm-drawer .dmdc-megamenu-panel .dmdc-megamenu-content,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--container {
  display:block !important; width:100% !important; max-width:100% !important; flex:none !important;
  padding:0 !important; margin:0 !important; position:static !important; overflow:visible !important; gap:0 !important;
}
.dm-drawer .dmdc-megamenu-panel .dmdc-bg-layer { display:none !important; }
/* CHỈ GIỮ danh sách link chuyên mục — ẩn heading/divider/bài viết/CTA/mô tả/lý do (trang trí desktop).
   Cột trang trí là .dmdc-el--container → phải thêm .dmdc-el--container.uid-* (0,4,0) để THẮNG
   rule stack `.dmdc-el--container{display:block!important}` (0,3,0). */
.dm-drawer .dmdc-megamenu-panel .dmdc-el--heading,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--divider,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--post_grid,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--text_editor,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--button,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--container.uid-mm-sv-c2,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--container.uid-mm-sv-cta,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--container.uid-mm-kn-c2,
.dm-drawer .dmdc-megamenu-panel .dmdc-el--container.uid-mm-kn-cta { display:none !important; }
/* Danh sách link: mỗi mục 1 hàng, gọn, có icon. `.dmdc-icon-list` CHÍNH LÀ <ul> lồng sâu →
   bị core `.dm-menu ul ul{display:none}` ẩn → phải ép block. */
.dm-drawer .dmdc-megamenu-panel .dmdc-icon-list { display:block !important; }
.dm-drawer .dmdc-megamenu-panel .dmdc-icon-list-item { display:flex !important; align-items:center; gap:9px; margin:0 !important; padding:11px 2px; border-bottom:1px solid #eef1f4; }
.dm-drawer .dmdc-megamenu-panel .dmdc-icon-list-item:last-child { border-bottom:0; }
.dm-drawer .dmdc-megamenu-panel .dmdc-icon-list-icon i { color:var(--stch-primary); font-size:.72rem; margin-top:0; }
.dm-drawer .dmdc-megamenu-panel .dmdc-icon-list a { display:flex; align-items:center; gap:9px; color:#334155 !important; text-decoration:none; font-size:15px; width:100%; }
.dm-drawer .dmdc-megamenu-panel .dmdc-icon-list a:hover .dmdc-icon-list-text { color:var(--stch-primary); }

/* ===== 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. */
/* Footer: CĂN GIỮA toàn bộ + toàn bộ icon/text/line TRẮNG (yêu cầu 23/07, nền navy giữ nguyên) */
#site-footer { background:transparent; text-align:center; }
#site-footer .dni-ft-col { align-items:center !important; text-align:center; }
#site-footer .dmdc-heading-title { margin-bottom:10px; color:#fff; }
#site-footer .dmdc-divider-wrapper { margin:0 0 16px; width:100%; }
#site-footer .dmdc-divider { justify-content:center !important; }
#site-footer .dmdc-divider-separator { border-color:#fff !important; }
#site-footer .dmdc-text-editor-content { color:#fff; 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 { display:flex; justify-content:center; }
#site-footer .dni-ft-brand .dmdc-site-logo a { background:#fff; border-radius:10px; padding:8px 14px; display:inline-block; }
/* Menu chuyên mục dọc — căn giữa, chữ trắng */
#site-footer .dmdc-nav-menu-wrapper .navbar { background:transparent; justify-content:center; }
#site-footer .dmdc-menu { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; align-items:center; }
#site-footer .dmdc-menu .dmdc-menu-link { color:#fff; text-decoration:none; padding:0; transition:opacity .2s; }
#site-footer .dmdc-menu .dmdc-menu-link:hover { color:#fff; opacity:.75; }
/* Tin footer (post_list): ẢNH TRÊN — TIÊU ĐỀ + NGÀY DƯỚI, căn giữa */
#site-footer .dmdc-post-list-container { padding:0 !important; }
/* PC: kiểu cũ — thumb 76px BÊN TRÁI, tiêu đề + ngày BÊN PHẢI (compact ngang) */
#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; text-align:left; }
#site-footer .dni-ft-posts .post-list-thumb { flex:0 0 76px !important; width:auto; max-width:none; }
#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; display:block; align-items:initial; }
#site-footer .dni-ft-posts .post-title { order:0; margin-bottom:0 !important; font-size:.92rem; }
#site-footer .dni-ft-posts .post-title a { color:#fff !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 { opacity:.75; }
#site-footer .dni-ft-posts .post-meta-top { order:0; margin-bottom:2px !important; color:#fff !important; opacity:.75; }
#site-footer .dni-ft-posts .post-meta-top .meta-item { color:#fff; }
#site-footer .dni-ft-posts .post-footer { display:none !important; }
#site-footer .dni-ft-posts .category-badge-list { display:none !important; }
/* MOBILE/TABLET DỌC (≤991): ẢNH lên TRÊN, tiêu đề + ngày DƯỚI, căn giữa */
@media (max-width: 991.98px) {
  #site-footer .dni-ft-posts .dmdc-post-list-container > .d-flex { gap:18px !important; }
  #site-footer .dni-ft-posts .post-list-card { gap:8px; align-items:center; flex-direction:column !important; text-align:center; }
  #site-footer .dni-ft-posts .post-list-thumb { flex:0 0 auto !important; width:100%; max-width:220px; }
  #site-footer .dni-ft-posts .post-list-thumb img { width:100%; height:110px; }
  #site-footer .dni-ft-posts .post-list-body { display:flex; flex-direction:column; align-items:center; }
  #site-footer .dni-ft-posts .post-title { order:1; margin-bottom:2px !important; }
  #site-footer .dni-ft-posts .post-meta-top { order:2; margin-bottom:0 !important; }
}
/* Icon list liên hệ — trắng, căn giữa */
#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; justify-content:center; margin-bottom:11px; }
#site-footer .dmdc-icon-list-icon i { color:#fff !important; font-size:.82rem; }
#site-footer .dmdc-icon-list-text { color:#fff; }
#site-footer .dmdc-icon-list a { text-decoration:none; }
#site-footer .dmdc-icon-list a:hover .dmdc-icon-list-text { opacity:.75; }
#site-footer .dmdc-social-icons { margin-top:6px; display:flex; justify-content:center; }
#site-footer .dmdc-social-icons i { color:#fff; }
/* Bottom bar */
#site-footer .dni-footbar { font-size:.85rem; border-top:1px solid rgba(255,255,255,.18); }
#site-footer .dni-footbar p { margin:0; color:#fff; opacity:.8; }
#site-footer .dni-footbar .dmdc-button.btn-link { color:#fff; text-decoration:none; font-size:.85rem; }
#site-footer .dni-footbar .dmdc-button.btn-link:hover { opacity:.75; }
/* Stack cột footer: PHẢI override flex-basis (không chỉ width) với !important — inline flex:0 1 27% của
   style-engine quyết định kích thước flex-item, width bị bỏ qua. */
@media (max-width: 991.98px) {
  #site-footer .dni-ft-inner, #site-footer .uid-dni-ft-inner { flex-wrap: wrap !important; }
  #site-footer .dni-ft-col { width:47% !important; flex:0 0 47% !important; max-width:47% !important; }
  #site-footer .dni-fb-col { width:100% !important; flex:0 0 100% !important; max-width:100% !important; justify-content:center; text-align:center; }
}
@media (max-width: 575.98px) {
  #site-footer .dni-ft-col { width:100% !important; flex:0 0 100% !important; max-width:100% !important; }
}

/* ===== 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; }
  /* Mobile: 1 cột, thẻ kiểu DANH SÁCH — icon TRÁI + tiêu đề PHẢI, mô tả DƯỚI, line gold ngăn cách, nút ĐÁY */
  .uid-dni-hp-cats-row > .dmdc-el--container { width: 100% !important; flex: 1 1 100% !important; max-width: 100%; }
  .uid-dni-hp-cats-row .dmdc-services-card {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "desc desc" "btn btn";
    align-items: center; text-align: left !important;
    column-gap: 14px; row-gap: 6px;
  }
  .uid-dni-hp-cats-row .dmdc-card-content { display: contents !important; }
  .uid-dni-hp-cats-row .dmdc-card-icon-wrap { grid-area: icon; margin: 0 !important; align-self: center; }
  .uid-dni-hp-cats-row .dmdc-card-title { grid-area: title; margin: 0 !important; min-height: 0 !important; align-self: center; -webkit-line-clamp: 2; }
  .uid-dni-hp-cats-row .dmdc-card-desc { grid-area: desc; margin: 6px 0 0 !important; }
  .uid-dni-hp-cats-row .dmdc-card-btn { grid-area: btn; justify-self: start; margin-top: 6px !important; }
  /* line gold nhỏ (như line tiêu đề) ngăn cách mô tả ↔ nút */
  .uid-dni-hp-cats-row .dmdc-card-desc::after {
    content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
    background: var(--stch-primary); margin: 12px 0 2px;
  }
  .uid-dni-hp-two { flex-wrap: wrap; }
  .uid-dni-hp-two > .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; }
}

/* ===================================================================
   CHUẨN HOÁ RESPONSIVE TABLET/MOBILE (23/07) — mọi override phải !important
   vì style-engine emit INLINE style (display/width) trên container builder.
   =================================================================== */

/* --- S1 Hero bài nổi bật: tablet dọc + mobile → stack main trên, side dưới --- */
@media (max-width: 991.98px) {
  .uid-dni-hp-hero .pl-feat-wrap { flex-direction: column !important; }
  .uid-dni-hp-hero .pl-feat-main,
  .uid-dni-hp-hero .pl-feat-side { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  /* side thành lưới 2 cột trên tablet dọc cho gọn */
  .uid-dni-hp-hero .pl-feat-side { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 20px; }
  .uid-dni-hp-hero .pl-feat-item { margin: 0 !important; }
}
@media (max-width: 575.98px) {
  .uid-dni-hp-hero .pl-feat-side { grid-template-columns: 1fr; }
}
/* Tiêu đề side-list luôn gọn 2 dòng (tránh vỡ 3-4 dòng) */
.uid-dni-hp-hero .pl-feat-item-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- S2 Banner bác sĩ: tablet dọc + mobile → stack, ảnh full-width căn giữa --- */
@media (max-width: 991.98px) {
  .uid-dni-hp-doc-in { flex-wrap: wrap !important; }
  .uid-dni-hp-doc-in > .dmdc-el--container { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .uid-dni-hp-doc-img { margin-top: 22px; }
  .uid-dni-hp-doc-img img { width: 100% !important; max-width: 480px; height: auto; margin: 0 auto; display: block; }
}

/* --- Header hàng chính: tablet dọc gọn (logo | actions | burger) --- */
@media (max-width: 991.98px) {
  #site-header .dni-hd-inner { flex-wrap: wrap !important; align-items: center; }
  #site-header .dmdc-site-logo img { max-height: 46px; }
}

/* --- CTA đặt lịch: mobile nút xuống hàng, full-width dễ bấm --- */
@media (max-width: 575.98px) {
  .uid-dni-hp-cta-btns { flex-direction: column !important; gap: 10px !important; }
  .uid-dni-hp-cta-btns .dmdc-el--button, .uid-dni-hp-cta-btns .dmdc-button { width: 100%; }
  .uid-dni-hp-doc-btns { flex-wrap: wrap !important; gap: 10px !important; }
}

/* --- Trang Liên hệ: mobile/tablet dọc bị co trái (cột giữ width% desktop) → stack full-width --- */
@media (max-width: 991.98px) {
  .uid-dni-ct-main { flex-wrap: wrap !important; }
  .uid-dni-ct-main > .dmdc-el--container { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .uid-dni-ct-col-form { margin-top: 18px; }
}

/* --- Chống tràn ngang do phần tử off-canvas (search popup, drawer) --- */
body { overflow-x: hidden; }
#site-header .dmdc-search-pop { max-width: min(92vw, 340px); }

/* HD-SERVICE-CARDS */
.uid-dni-hp-cats .dmdc-services-card{align-items:center !important;text-align:center;padding:34px 22px;}
.uid-dni-hp-cats .dmdc-card-icon-wrap{width:74px !important;height:74px !important;margin:0 auto 6px;}
.uid-dni-hp-cats .dmdc-card-img{width:100%;height:100%;object-fit:contain;}
.uid-dni-hp-cats .dmdc-card-content{flex-grow:0;}
.uid-dni-hp-cats .dmdc-card-title{font-size:18px;font-weight:700;text-transform:uppercase;}
.uid-dni-hp-cats .dmdc-card-desc{margin-bottom:0 !important;font-size:14px;}

/* HD-HEADER-NAV — dàn nav 1 hàng */
.dni-header .uid-dni-hd-inner{max-width:1320px !important;}
.dni-header .dmdc-menu{flex-wrap:nowrap !important;}
.dni-header .dni-hd-col-nav{flex:1 1 auto;}
.dni-header .dni-hd-col-nav .dmdc-menu-link{font-size:15px !important;padding:8px 11px !important;white-space:nowrap;}
@media(min-width:992px){.dni-header .dni-hd-col-nav .dmdc-menu{justify-content:center;}}

/* HD-HOME-FORM — form đặt lịch gọn, căn giữa */
.uid-dni-hp-cta .uid-dni-hp-form-w{max-width:760px;margin:22px auto 0 !important;}
.uid-dni-hp-cta{padding-bottom:56px !important;}
.uid-dni-hp-form-w .dmdc-form-title{text-align:center;}
.uid-dni-hp-form-w .form-control{padding:12px 14px;border-radius:8px;}

/* HD-MEGAMENU — thẻ bài gọn giống Nerio */
.dmdc-megamenu-panel .post-card-thumb,.dmdc-megamenu-panel .post-card-thumb img{height:120px !important;object-fit:cover;}
.dmdc-megamenu-panel .post-card-body{padding:14px 16px !important;}
.dmdc-megamenu-panel .read-more-link{display:none !important;}
.dmdc-megamenu-panel .post-card-title,.dmdc-megamenu-panel .post-card-body h3,.dmdc-megamenu-panel .post-card-body h4{font-size:15px !important;line-height:1.35;margin-bottom:0 !important;}
.dmdc-megamenu-panel .post-card-body hr{display:none;}

/* HD-VIDEO — video YouTube trong bài (thay Elementor video-playlist crawl hỏng + iframe trần) */
.hd-video-playlist { margin: 24px 0; }
.hd-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hd-video { margin: 0; }
.hd-video--single { max-width: 720px; margin: 24px auto; }
.hd-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.hd-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hd-video__cap { margin-top: 8px; font-size: .88rem; line-height: 1.45; color: #5a6a76; }
@media (max-width: 700px) { .hd-video-grid { grid-template-columns: 1fr; gap: 16px; } }

/* HD-PRICE — bảng giá dịch vụ (trang Bảng giá & Đặt lịch) */
.hd-price-table { width: 100%; border-collapse: collapse; margin: 10px 0 30px; font-size: 15px; }
.hd-price-table th { text-align: left; background: #fdf3ec; color: #10344a; font-weight: 700; padding: 11px 16px; }
.hd-price-table td { padding: 11px 16px; border-bottom: 1px solid #f3e8db; color: #223444; }
.hd-price-table tr:nth-child(even) td { background: #fbfaf8; }
.hd-price-table .hd-price { text-align: right; font-weight: 700; color: #f26932; white-space: nowrap; width: 1%; }
@media (max-width: 700px) { .hd-price-table { font-size: 14px; } .hd-price-table th, .hd-price-table td { padding: 9px 10px; } }