/*
 * MAIN.CSS – CHILD THEME
 * Brand Updated: TAM GIA QUÁN (tgq)
 * - Primary (Cũ là Blue -> Nay là Tím): #7E22CE
 * - Secondary (Cũ là Red -> Nay là Xanh Lá É): #16A34A
 */

:root {
  /* Đổi mã màu ở đây */
  --brand-blue: #7E22CE; /* Tím Tam Gia Quán */
  --brand-red:  #16A34A; /* Xanh Lá É (Dùng cho giá tiền, nút bấm) */
  
  --gray-border: #e5e7eb;
  --gray-text:  #0f172a;
}


/* Nếu theme đang ép container tràn – cắt tràn nhẹ */
.entry-content,
.post-content,
.site-main {
  overflow-x: hidden;
}
/* =====================================================
 * 3. ICON SVG INLINE
 * ===================================================*/

.inline-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  margin-right: 0.2em;
}

.inline-svg-icon svg {
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
}

/* =====================================================
 * 4. TOC – [toc] DẠNG TAB NGANG, BRAND
 * ===================================================*/

/* Cuộn mượt khi nhảy anchor */
html {
  scroll-behavior: smooth;
}

/* TOC ở trạng thái bình thường (nằm đúng block) */
.my-toc-inline {
  position: relative;
  background: #ffffff;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Khi JS thêm .is-fixed -> bám mép trên */
.my-toc-inline.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Ẩn scrollbar cho gọn */
.my-toc-inline::-webkit-scrollbar {
  height: 0;
}

.my-toc-inline ul {
  display: flex;
  margin: 0;
  padding: 0 12px;
  list-style: none;
  white-space: nowrap;
}

.my-toc-inline .my-toc-item {
  margin: 0;
}

.my-toc-inline .my-toc-item a {
  display: inline-block;
  padding: 10px 14px;
  font-size: 16px;
  text-decoration: none;
  color: var(--brand-blue);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Tab đang chọn + hover – dùng đỏ brand */
.my-toc-inline .my-toc-item a.is-active,
.my-toc-inline .my-toc-item a:hover {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
  font-weight: 600;
}

/* Mobile / tablet: vẫn bám mép trên */
@media (max-width: 1300px) {
  .my-toc-inline.is-fixed {
    top: 0;
  }
}

/* Khi nhảy tới H2 bằng anchor, chừa khoảng cho thanh TOC fixed */
h2[id] {
  scroll-margin-top: 80px; /* nếu còn bị che, tăng lên 90–100 */
}

/* =====================================================
 * 5. BỐ CỤC 2 CỘT – CỘT STICKY (CTA, FORM...)
 * ===================================================*/

.page-content {
  display: flex;
  gap: 24px;
}

/* Cột trái sticky (CTA, hotline, form) */
.sticky-cta {
  width: 300px; /* chỉnh theo thiết kế */
}

/* Cột phải chiếm phần còn lại */
.right-column {
  flex: 1;
}

/* Desktop: cho sticky */
@media (min-width: 992px) {
  .sticky-cta {
    position: sticky;
    top: 50px; /* chỉnh theo chiều cao Header/Menu */
    align-self: flex-start;
  }
}

/* Mobile: trở lại bình thường */
@media (max-width: 991px) {
  .sticky-cta {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
}
/* =====================================================
 * 8. MENU CHÍNH & MENU CON – TỐI GIẢN, NỀN TRẮNG
 * ===================================================*/

/* Link menu (top-level + submenu) – áp dụng cho cả block & classic */
.main-navigation a,
.primary-menu a,
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Hover: chỉ gạch chân, giữ nền trắng */
.main-navigation a:hover,
.primary-menu a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

/* Mục đang active: cho nổi hơn một chút (màu đỏ brand) */
.main-navigation ul li.current-menu-item > a,
.primary-menu ul li.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--brand-red) !important;
  text-decoration: underline;
}

/* ======================
   SUBMENU – PANEL TRẮNG
   ====================== */

/* Khung submenu – block navigation (TT25) */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: #ffffff !important;       /* nền trắng */
  border: 1px solid var(--gray-border);
  border-radius: 3px;
  padding: 6px 0;
  min-width: 220px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

/* Bỏ margin thừa giữa các item trong submenu */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: 0 !important;
}

/* Link trong submenu – chiếm full dòng, dễ click */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 8px 18px;
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: none;
}

/* Hover trong submenu: chỉ gạch chân, không đổi nền */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: underline;
}

/* Khi menu cha đang mở (has child, expanded), giữ chữ xanh dễ đọc */
.wp-block-navigation .wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation-item__content {
  color: var(--brand-blue) !important;
}

/* ======================
   SUBMENU – CLASSIC MENU
   ====================== */

.main-navigation ul ul,
.primary-menu ul ul {
  background-color: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 3px;
  padding: 6px 0;
  min-width: 220px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.main-navigation ul ul li,
.primary-menu ul ul li {
  margin: 0;
}

.main-navigation ul ul li a,
.primary-menu ul ul li a {
  display: block;
  padding: 8px 18px;
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: none;
}

/* Hover submenu (classic): cũng chỉ gạch chân */
.main-navigation ul ul li a:hover,
.primary-menu ul ul li a:hover {
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: underline;
}
/* =====================================================
 * FIX ẢNH CÓ CHÚ THÍCH (CAPTION) BỊ TRÀN
 * ===================================================*/

/* Khung caption do WordPress sinh ra */
.wp-caption,
figure.wp-caption {
  width: 100% !important;       /* bỏ width: XXXpx inline */
  max-width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
}

/* Trường hợp có inline style width trong caption */
.wp-caption[style*="width"],
figure.wp-caption[style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ảnh bên trong caption */
.wp-caption img,
figure.wp-caption img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Chú thích dưới ảnh */
.wp-caption-text,
figure.wp-caption .wp-caption-text,
.wp-block-image figcaption {
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  margin-top: 4px;
  max-width: 100%;
}