/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

:root{
  --brand-black:#000000;
  --brand-gold:#f7c728;
}

/* Link: đen → hover vàng (nhẹ) */
a{
  color:var(--brand-black);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
a:hover{ color:var(--brand-gold); }
a:focus-visible{
  outline:2px solid var(--brand-gold);
  outline-offset:2px;
}

/* Nút theo brand: nền đen, hover vàng */
.wp-element-button,
.wp-block-button__link{
  background:var(--brand-black);
  color:#fff;
  border-radius:10px;
  padding:.6em 1.1em;
}
.wp-element-button:hover,
.wp-block-button__link:hover{
  background:var(--brand-gold);
  color:var(--brand-black);
}

/* Quote / mark gọn nhẹ */
mark{ background:color-mix(in srgb, var(--brand-gold) 35%, transparent); }
blockquote{ border-left:3px solid var(--brand-gold); padding-left:1rem; }

/* H4–H6 (nếu tồn tại trong bài cũ) hiển thị như H3 để đồng nhất */
h4, h5, h6{
  font-family:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1.35;
  margin-top:1.2em;
  margin-bottom:.6em;
}

/* Body: 16px cho mobile/tablet; 18px cho desktop */
:root { --mcd-body: 16px; }
body, .wp-site-blocks {
  font-size: var(--mcd-body);
  line-height: 1.65;
}
@media (min-width: 1024px) {
  :root { --mcd-body: 18px; }
}

/* Site Logo kích thước cố định để tránh CLS */
.site-logo img { width: 80px; height: auto; }
@media (max-width: 782px) {
  .site-logo img { width: 60px; }
}
/* Khung landing rộng full, nhưng nội dung thường vẫn giữ content width */
.is-landing .wp-block-post-content > *:not(.alignfull):not(.alignwide) {
  max-width: 1120px;
  margin-left:auto; margin-right:auto;
}

/* Template “naked” không khoảng trắng thừa */
.is-landing-naked { padding: 0; }
/* TOC tối giản */
.mcd-toc{ border:1px solid #eee; padding:12px 14px; border-radius:10px; background:#fafafa; }
.mcd-toc__title{ font-weight:700; margin-bottom:.4rem; }
.mcd-toc__list{ list-style:none; margin:.2rem 0; padding-left:1rem; }
.mcd-toc__list a{ text-decoration:none; }
.mcd-toc__list a:hover{ text-decoration:underline; }

/* Cuộn mượt + tránh bị che bởi header sticky (nếu có) */
html { scroll-behavior:smooth; }
:where(h2[id]){ scroll-margin-top: 80px; }
/* TOC: 1 cột (mobile/tablet) → 2 cột (desktop) */
.mcd-toc__list{
  display: grid;
  grid-template-columns: 1fr;   /* mobile/tablet = 1 cột */
  gap: .35rem 1rem;
  list-style: none;
  margin: .2rem 0;
  padding-left: 0;              /* bỏ thụt đầu dòng */
}
@media (min-width:1024px){
  .mcd-toc__list{ grid-template-columns: 1fr 1fr; } /* desktop = 2 cột */
}
.mcd-toc__list li{ margin: 0; }
.mcd-toc__list a{ text-decoration: none; display: inline-block; }
.mcd-toc__list a:hover{ text-decoration: underline; }
/* Bo góc ảnh trong nội dung bài viết & trang */
body.single .wp-block-post-content img,
body.page   .wp-block-post-content img,
body.single .wp-block-post-featured-image img,
body.page   .wp-block-post-featured-image img {
  border-radius: 5px;
}

/* Gallery Gutenberg: bo cả khung figure để tránh ảnh lẹm góc */
.wp-block-post-content .wp-block-gallery figure,
.wp-block-post-content .wp-block-gallery img {
  border-radius: 5px;
  overflow: hidden; /* đảm bảo caption/ảnh không tràn ra góc */
}

/* Dự phòng cho nội dung cũ (Classic) nếu có */
.entry-content img {
  border-radius: 5px;
}
/* Logo đứng trên nền tối trong footer → chuyển sang trắng */
.mcd-footer .mcd-logo-on-dark img {
  filter: invert(1) brightness(1.6);
}

/* Giữ icon hàng với chữ trong footer (nếu cần) */
.mcd-footer .inline-svg-icon { vertical-align: middle; }
.mcd-footer .inline-svg-icon svg { transform: translateY(0.5px); }
/* AdSense wrappers (chống CLS + canh giữa) */
.mcd-adsense{ display:block; text-align:center; margin:1rem 0; }
.mcd-adsense > ins{ display:block; margin-left:auto; margin-right:auto; }

/* Preset min-height (responsive hint) */
.mcd-adsense--banner > ins{ min-height:90px; }
@media (max-width: 782px){
  .mcd-adsense--banner > ins{ min-height:60px; }
}
.mcd-adsense--rect > ins{ min-height:250px; }
.mcd-adsense--square > ins{ min-height:250px; }
.mcd-adsense--skyscraper > ins{ min-height:600px; }

/* In-article & fluid không set min-height cố định để browser tự tính */
.mcd-adsense--in-article > ins,
.mcd-adsense--fluid > ins{ min-height:0; }
/* Fallback min-height cho preset mặc định (display) */
.mcd-adsense--display > ins{ min-height:280px; }
@media (min-width:768px){ .mcd-adsense--display > ins{ min-height:300px; } }
@media (min-width:1024px){ .mcd-adsense--display > ins{ min-height:336px; } }
/* Hai banner dọc: mobile/tablet = 1 cột, desktop = 2 cột */
.mcd-ads-2x{
  display:grid;
  gap:16px;
  justify-content:center; /* căn giữa rail nếu nằm trong cột hẹp */
}
@media (min-width:1024px){
  .mcd-ads-2x{ grid-template-columns: repeat(2, min-content); align-items:start; }
}

/* Preset chuẩn cho skyscraper 300x600 */
.mcd-adsense--skyscraper > ins{
  display:inline-block;
  width:300px;
  min-height:600px;
}

/* Tuỳ chọn: banner dọc 160x600 nếu bạn dùng class="narrow" */
.mcd-adsense--skyscraper.narrow > ins{
  width:160px;
  min-height:600px;
}

/* Bảo đảm ins không co hẹp khi theme siết width */
.mcd-ads-2x .mcd-adsense{ overflow:visible; }
@media (max-width:1023px){
  .mcd-ads-2x .mcd-adsense:nth-child(2){ display:none; }
}
/* ===== Mobile fixed CTA – 3 nút gọn, không tràn ===== */
@media (max-width: 782px){
  .mcd-mobile-cta{
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #000;
    border-top: 1px solid var(--brand-gold);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    overflow: hidden;            /* chống tràn ngang */
    box-shadow: 0 -6px 20px rgba(0,0,0,.25);
  }

  /* Lưới 3 cột đều nhau */
  .mcd-mobile-cta .wp-block-buttons{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  .mcd-mobile-cta .wp-block-button,
  .mcd-mobile-cta .wp-block-button__link{ min-width: 0; } /* cho phép co */

  /* Nút: icon trên – chữ dưới, padding mỏng */
  .mcd-mobile-cta .wp-block-button__link{
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 8px 6px !important;  /* thu padding để không tràn */
    border-radius: 9999px;
    line-height: 1.1;
    white-space: normal; word-break: keep-all;
    box-sizing: border-box;
  }

  /* Icon to – chữ nhỏ (tự co theo màn) */
  .mcd-mobile-cta .inline-svg-icon{ font-size: clamp(20px, 6.5vw, 26px); line-height: 1; }
  .mcd-mobile-cta .wp-block-button__link{ font-size: clamp(11px, 3.1vw, 13px); }

  /* Hai nút trái: không viền, màu chữ trắng */
  .mcd-mobile-cta .wp-block-button.is-style-outline .wp-block-button__link{
    background: transparent; color: #fff; border: none !important;
  }
  /* Nút phải: nổi bật */
  .mcd-mobile-cta .wp-block-button.is-style-fill .wp-block-button__link{
    background: var(--brand-gold); color: var(--brand-black);
  }

  /* Chừa chỗ cho thanh cố định */
  body{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* Ẩn trên tablet/desktop */
@media (min-width: 783px){ .mcd-mobile-cta{ display:none; } }
/* an toàn box model */
.mcd-mobile-cta, .mcd-mobile-cta *{ box-sizing: border-box; }

/* rất hẹp (≤340px) – nén thêm chút */
@media (max-width:340px){
  .mcd-mobile-cta .wp-block-buttons{ gap: 4px; }
  .mcd-mobile-cta .wp-block-button__link{ padding: 7px 5px !important; }
  .mcd-mobile-cta .inline-svg-icon{ font-size: 20px; }
  .mcd-mobile-cta .wp-block-button__link{ font-size: 11px; }
}
.mcd-adsense{contain:layout style;}