/*
Theme Name: Mona Theme Child
Template: monatheme
Theme URI: #
Description: Hơn 10+ năm mang đến giải pháp cho các doanh nghiệp, để khách hàng có thể có những phương án Kinh Doanh, Marketing, Quản lý phù hợp nhất cho doanh nghiệp của mình
Author: MONA.Media / Website
Author URI: https://mona.media/
Version: 4.4.0
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
Text Domain: monatheme-child
*/

/* VP-92: Thẻ dịch vụ mặc định glass/trong suốt, hover → ombre màu */
.svc { background: rgba(255,255,255,0.45); }
.svc h4,
.svc .svc-btn { color: #14172E; }
.svc .svc-btn .ic { background: #137EE8 !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(19,126,232,.7) !important; }
.svc:hover { background: var(--bg); }
.svc:hover h4,
.svc:hover .svc-btn { color: var(--fg); }
.svc:hover .svc-btn .ic { background: #14172E !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(20,23,46,.6) !important; }

/* VP-94: Mobile — thẻ dịch vụ hiển thị màu ombre mặc định (không cần hover) */
@media (max-width: 767px) {
  .svc { background: var(--bg); }
  .svc h4,
  .svc .svc-btn { color: var(--fg); }
  .svc .svc-btn .ic { background: #14172E !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(20,23,46,.6) !important; }
}

/* VP-95: Section Báo chí nói về chúng tôi */
.press-sub { font-size: 15px; color: var(--tx,#5a6273); line-height: 1.6; max-width: 560px; margin: 14px auto 0; text-align: center; }
.press-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.press-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--ri,16px); text-decoration: none; transition: transform .18s, box-shadow .18s; min-height: 260px; }
a.press-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -8px rgba(20,23,46,.12); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.pc-logo { max-height: 30px; max-width: 120px; object-fit: contain; }
.pc-logo-ph { display: inline-block; width: 80px; height: 24px; background: rgba(20,23,46,.08); border-radius: 4px; }
.pc-date { font-size: 12.5px; color: var(--tx-faint,#9ba5b7); white-space: nowrap; }
.pc-qm { font-size: 44px; line-height: .9; font-weight: 800; color: var(--teal-d,#35e9da); margin: 14px 0 6px; }
.pc-title { font-size: 16px; font-weight: 700; color: var(--ink,#14172E); line-height: 1.4; margin: 0; }
.pc-desc { font-size: 13.5px; color: var(--tx,#5a6273); line-height: 1.55; margin: 10px 0 auto; }
.pc-read { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--teal-d,#35e9da); }

.press-logos { display: flex; align-items: center; gap: 24px; margin-top: 52px; overflow: hidden; }
.pl-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--tx-faint,#9ba5b7); white-space: nowrap; text-transform: uppercase; flex-shrink: 0; }
.press-swiper { flex: 1; position: relative; padding: 0 44px; overflow: visible; }
.press-swiper .swiper-slide { width: auto; display: flex; align-items: center; padding: 4px 0; }
.press-swiper .swiper-slide img { max-height: 28px; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .5; transition: opacity .2s, filter .2s; }
.press-swiper .swiper-slide img:hover { opacity: 1; filter: none; }
.press-swiper .swiper-button-prev, .press-swiper .swiper-button-next { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(20,23,46,.1); top: 50%; margin-top: -16px; z-index: 10; display: flex !important; }
.press-swiper .swiper-button-prev::after, .press-swiper .swiper-button-next::after { font-size: 11px; color: var(--ink,#14172E); font-weight: 700; }
.press-swiper .swiper-button-prev { left: 0; }
.press-swiper .swiper-button-next { right: 0; }

.press-cta { text-align: center; margin-top: 44px; }
.press-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 40px; border-radius: 100px; border: 1.5px solid var(--ink,#14172E); background: transparent; color: var(--ink,#14172E); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .18s, color .18s; }
.press-btn:hover { background: var(--ink,#14172E); color: #fff; }

@media (max-width: 767px) {
  .press-grid { grid-template-columns: 1fr; gap: 14px; }
  .press-logos { flex-wrap: wrap; gap: 16px; }
  .pl-label { width: 100%; }
  .press-swiper { padding: 0 36px; }
}

/* ============================================================
   FEEDBACK 7 (mục 1) — hover đổi màu chữ cho CẢ NÚT, không chỉ menu
   ============================================================
   Menu đã có: .menu-link:hover{ color:var(--blue) } — nhưng nút thì chỉ nhấc lên
   và đổi nền, chữ giữ nguyên var(--ink). Khách nhận ra đúng chỗ lệch đó.

   Vì sao đặt ở đây: CSS của mỗi loại trang là file RIÊNG (home.css, single-service.css,
   page-about.css…) và mỗi file tự chứa một bản .btn/.ctab/.run-btn giống hệt nhau —
   sửa từng file là 13 chỗ, chắc chắn lệch nhau về sau. style.css của child theme nạp
   CUỐI CÙNG ở mọi trang (ThemeHook.php) nên một bản ở đây là đủ.

   Dùng đúng var(--blue) của menu để hover toàn site là một màu, không phải màu na ná. */

.btn-soft:hover,
.ctab:hover,
.fbtn:hover,
.run-btn:hover,
.run-btn:hover .bt,
.post:hover .run-btn,
.sol-post:hover .run-btn,
.press-swiper .swiper-button-prev:hover::after,
.press-swiper .swiper-button-next:hover::after {
  color: var(--blue, #137EE8);
}

/* Nút nền gradient đặc: chữ trắng trên nền tím-xanh, đổi sang xanh là mất tương phản.
   Nút trên nền tối (hero ảnh, footer) cũng giữ trắng. */
.btn-primary:hover,
.btn-ghost-light:hover,
.fnav-grid .fcta:hover,
footer .btn-soft:hover {
  color: #fff;
}

/* Icon tròn trong .btn-soft ăn theo màu chữ cho đồng bộ. */
.btn-soft:hover .ic { color: var(--blue, #137EE8); }

/* ============================================================
   FEEDBACK 7 (mục 1, bổ sung) — hover cả CHỮ, kể cả trên Header
   ============================================================
   Đợt trước tôi mới làm các NÚT. Khách nói tiếp: "hover vào các chữ thì xuất hiện màu
   tím xanh, ví dụ trên Header đang chưa có".

   Đúng vậy, và lý do là header có HAI trạng thái:
     .scrolled      -> thanh trắng, chữ tối, hover đã ra var(--blue)  [đã có]
     :not(.scrolled)-> thanh trong suốt trên hero, chữ TRẮNG, hover ra #fff  [KHÔNG có màu]
   Cùng quy luật đó ở breadcrumb trên hero tối: hover cũng chỉ ra #fff.
   Tức là cứ nền tối là thiết kế bỏ hẳn màu thương hiệu.

   (Ghi chú: nav-sync.css có sẵn luật hover xanh cho body.page-solidnav, nhưng KHÔNG trang
   nào mang class đó — luật ấy chưa từng chạy.)

   Nền tối không dùng được var(--blue) #137EE8: xanh đậm trên hero tối là chìm chữ. Nên
   dùng một sắc tím-xanh SÁNG riêng cho nền tối, vẫn cùng họ màu với menu.
   Muốn đổi tông thì sửa đúng 1 dòng --hover-on-dark bên dưới. */
:root { --hover-on-dark: #A9BCFF; }

header.nav:not(.scrolled) .menu-link:hover,
header.nav:not(.scrolled) .menu-item.open .menu-link,
.dhero .crumb a:hover {
  color: var(--hover-on-dark, #A9BCFF);
}