/* ===== Hội Đá Quý Việt Nam - CSS bổ sung ngoài Elementor ===== */

/* =================================================================
   ĐỔI BỘ BIỂU TƯỢNG
   Bản thiết kế gốc dùng Material Symbols Outlined (nét viền), còn
   Elementor chỉ có sẵn Font Awesome (nét đặc). Ở đây đổi phông của
   thẻ <i> sang Material Symbols rồi thay nội dung bằng tên chữ của
   từng biểu tượng — Material Symbols hiển thị theo dạng ligature.
   Biểu tượng thương hiệu (.fab) và chấm tròn giữ nguyên Font Awesome.
   ================================================================= */
/* Elementor 4 vẽ biểu tượng thành SVG nội tuyến nên không đổi được phông.
   Cách làm: ẩn SVG đó rồi vẽ lại chữ ligature của Material Symbols lên
   chính phần tử bọc. Giữ nguyên biểu tượng thương hiệu (e-fab-) và
   chấm tròn (e-fas-circle) vì Material Symbols không có tương đương. */
svg.e-font-icon-svg:not([class*="e-fab-"]):not(.e-fas-circle) { display: none !important; }

*:has(> svg.e-font-icon-svg:not([class*="e-fab-"]):not(.e-fas-circle))::before {
  font-family: 'Material Symbols Outlined';
  font-weight: 400; font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1em; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  word-wrap: normal; direction: ltr; display: inline-block;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}
*:has(> svg.e-fas-gem)::before            { content: 'diamond'; }
*:has(> svg.e-fas-certificate)::before    { content: 'verified'; }
*:has(> svg.e-fas-store)::before          { content: 'storefront'; }
*:has(> svg.e-fas-landmark)::before       { content: 'museum'; }
*:has(> svg.e-fas-graduation-cap)::before { content: 'school'; }
*:has(> svg.e-fas-globe)::before          { content: 'public'; }
*:has(> svg.e-fas-users)::before          { content: 'groups'; }
*:has(> svg.e-fas-book-open)::before      { content: 'menu_book'; }
*:has(> svg.e-fas-microscope)::before     { content: 'biotech'; }
*:has(> svg.e-fas-chart-line)::before     { content: 'query_stats'; }
*:has(> svg.e-fas-gavel)::before          { content: 'gavel'; }
*:has(> svg.e-fas-user-tag)::before       { content: 'person_search'; }
*:has(> svg.e-fas-building)::before       { content: 'domain'; }
*:has(> svg.e-fas-user-plus)::before      { content: 'how_to_reg'; }
*:has(> svg.e-fas-calendar-alt)::before   { content: 'calendar_today'; }
*:has(> svg.e-fas-id-badge)::before       { content: 'badge'; }
*:has(> svg.e-fas-city)::before           { content: 'apartment'; }
*:has(> svg.e-fas-sitemap)::before        { content: 'account_tree'; }
*:has(> svg.e-fas-handshake)::before      { content: 'handshake'; }
*:has(> svg.e-fas-flag)::before           { content: 'flag'; }
*:has(> svg.e-fas-quote-left)::before     { content: 'format_quote'; }
*:has(> svg.e-fas-phone-alt)::before      { content: 'phone_in_talk'; }
*:has(> svg.e-fas-envelope)::before       { content: 'mail'; }
*:has(> svg.e-fas-envelope-open-text)::before { content: 'mail'; }
*:has(> svg.e-fas-map-marker-alt)::before { content: 'location_on'; }
*:has(> svg.e-fas-map-marked-alt)::before { content: 'map'; }
*:has(> svg.e-fas-newspaper)::before      { content: 'feed'; }
*:has(> svg.e-fas-cube)::before           { content: 'view_in_ar'; }
*:has(> svg.e-fas-headset)::before        { content: 'contact_support'; }
*:has(> svg.e-fas-arrow-right)::before    { content: 'arrow_forward'; }
*:has(> svg.e-fas-long-arrow-alt-right)::before { content: 'arrow_right_alt'; }
*:has(> svg.e-fas-angle-right)::before    { content: 'chevron_right'; }
*:has(> svg.e-fas-caret-down)::before     { content: 'expand_more'; }
*:has(> svg.e-fas-file-pdf)::before       { content: 'picture_as_pdf'; }
*:has(> svg.e-fas-book)::before           { content: 'auto_stories'; }
*:has(> svg.e-fas-eye)::before            { content: 'visibility'; }
*:has(> svg.e-fas-pen-nib)::before        { content: 'edit_note'; }
*:has(> svg.e-fas-clock)::before          { content: 'schedule'; }
*:has(> svg.e-fas-times-circle)::before   { content: 'cancel'; }
*:has(> svg.e-fas-check)::before          { content: 'check'; }
*:has(> svg.e-fas-user)::before           { content: 'person'; }
*:has(> svg.e-fas-share-alt)::before      { content: 'share'; }
*:has(> svg.e-fas-play)::before           { content: 'play_arrow'; }

/* Header dính khi cuộn trang (chỉ trên màn hình lớn — ehf-header là class của body,
   thẻ header thật do plugin sinh ra là header#masthead) */
@media (min-width: 1025px) {
  body.ehf-header #masthead { position: sticky; top: 0; z-index: 999; }
  body.admin-bar.ehf-header #masthead { top: 32px; }
}

/* ---- Contact Form 7: kiểu dáng chung ---- */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
  width: 100%; padding: 11px 14px; border-radius: 4px; outline: none;
  font: 400 14px/1.5 'Roboto Flex', sans-serif; color: #181d1a;
  background: #fff; border: 1px solid #e0bfbf;
  transition: border-color .15s, box-shadow .15s;
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #78716C; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  border: 1.5px solid #9e1b32; box-shadow: 0 0 0 3px rgba(119,90,25,.25);
}
.wpcf7 input[type="submit"] {
  width: auto; padding: 13px 30px; border: 0; border-radius: 4px; cursor: pointer;
  background: #7b001f; color: #fff; letter-spacing: .06em; text-transform: uppercase;
  font: 600 13px/1 'Roboto Flex', sans-serif; transition: background .15s;
}
.wpcf7 input[type="submit"]:hover { background: #9e1b32; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 10px; }
.wpcf7 .wpcf7-not-valid-tip { color: #ba1a1a; font-size: 12px; margin-top: 4px; }
.wpcf7 .wpcf7-response-output {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 4px;
  border: 1px solid #e0bfbf; font-size: 13px; background: #fff;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #00442a; color: #00442a; }
/* Lỗi nhập liệu: báo đỏ */
.wpcf7 form.invalid .wpcf7-response-output { border-color: #ba1a1a; color: #ba1a1a; }
/* Gửi thư thất bại: dữ liệu vẫn được lưu lại nên báo màu vàng, không báo đỏ */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #C5A059; color: #775a19; background: #fffaf0; }

/* Trang Liên hệ: nhãn trường và lưới 2 cột */
.vag-form label {
  display: block; font: 600 13px/1.6 'Roboto Flex', sans-serif; color: #181d1a;
}
.vag-form label span { color: #7b001f; }
.vag-form p { margin: 0 0 14px; }
.vag-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 700px) { .vag-form-row { grid-template-columns: 1fr; } }

/* Khối đăng ký bản tin ở trang chủ: ô nhập và nút nằm cùng hàng */
/* Contact Form 7 bọc nội dung trong thẻ <p>, nên hàng ngang đặt trên chính thẻ đó */
.vag-newsletter { width: 100%; max-width: 560px; margin: 4px auto 0; }
.vag-newsletter p { display: flex; gap: 10px; align-items: center; margin: 0; width: 100%; }
.vag-newsletter .wpcf7-form-control-wrap { flex: 1; display: block; min-width: 0; }
.vag-newsletter input[type="email"] { height: 46px; padding: 0 14px; }
.vag-newsletter input[type="submit"] { height: 46px; padding: 0 26px; white-space: nowrap; }
.vag-newsletter .wpcf7-spinner { flex: 0 0 auto; }
@media (max-width: 600px) {
  .vag-newsletter p { flex-direction: column; align-items: stretch; }
  .vag-newsletter input[type="submit"] { width: 100%; }
}

/* Thanh điều hướng giữ một hàng trên màn hình rộng, chữ trong mỗi mục không ngắt dòng */
@media (min-width: 1025px) {
  .hfe-nav-menu__layout-horizontal .hfe-nav-menu { flex-wrap: nowrap; }
  /* "> li a" chứ không phải "> li > a": mục có menu con bị bọc thêm một thẻ div */
  .hfe-nav-menu > li a.hfe-menu-item { white-space: nowrap; }
}

/* Mục menu: bản gốc là ô cao 40px, canh giữa theo chiều dọc trong thanh 48px,
   lề trong 0 8px, bo góc 2px.
   Lưu ý bộ chọn: Header Footer Elementor bọc các mục CÓ menu con trong một
   thẻ div.hfe-has-submenu-container, nên KHÔNG được viết "> li > a" — làm vậy
   thì bảy mục có menu con bị bỏ sót và nằm lệch lên trên. Dùng "> li a".
   Mục của menu đổ xuống mang lớp .hfe-sub-menu-item nên không bị ảnh hưởng. */
@media (min-width: 1025px) {
  #masthead .hfe-nav-menu > li.menu-item { display: flex; align-items: center; }
  #masthead .hfe-nav-menu > li .hfe-has-submenu-container { display: flex; align-items: center; }
  #masthead .hfe-nav-menu > li a.hfe-menu-item {
    height: 40px; display: flex; align-items: center;
    padding-top: 0 !important; padding-bottom: 0 !important;
    border-radius: 2px !important;
  }
}
/* Mũi tên báo có menu con. Header Footer Elementor chỉ in ra thẻ <i class="fa">
   rỗng nên phải tự vẽ; bản gốc dùng ký hiệu expand_more 16px, cách chữ 2px. */
#masthead .hfe-nav-menu > li a.hfe-menu-item .sub-arrow {
  margin-left: 2px !important; display: inline-flex; align-items: center;
}
#masthead .hfe-nav-menu > li a.hfe-menu-item .sub-arrow i {
  font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400;
  font-size: 16px; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#masthead .hfe-nav-menu > li a.hfe-menu-item .sub-arrow i::before { content: 'expand_more'; }

/* Nút mở menu trên máy tính bảng và điện thoại. Biểu tượng của nó cũng là SVG
   Font Awesome nên bị khối "ĐỔI BỘ BIỂU TƯỢNG" ẩn đi; phải khai báo ký hiệu thay thế. */
*:has(> svg.e-fas-align-justify)::before { content: 'menu'; }
/* CHÚ Ý: tuyệt đối không đặt "display" cho nút này ở ngoài câu lệnh @media.
   Bộ chọn có #masthead nên độ ưu tiên cao hơn quy tắc "display: none" của HFE;
   đặt display ở đây là nút hiện luôn trên desktop, đẩy menu xuống hàng hai và
   thanh điều hướng cao 80px thay vì 48px. Chỉ tạo dáng trong khổ máy tính bảng
   trở xuống, còn việc ẩn/hiện để nguyên cho plugin quyết định. */
@media (max-width: 1024px) {
  #masthead .hfe-nav-menu__toggle {
    width: 40px; height: 40px; border-radius: 2px;
    background: #9e1b32; color: #ffffff;
    align-items: center; justify-content: center;
  }
  #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon { font-size: 22px; line-height: 1; }
}

/* Menu đổ xuống vẫn cho phép xuống dòng bình thường */
.hfe-nav-menu .sub-menu a.hfe-sub-menu-item { white-space: normal; }

/* ---- Khối thông tin góc trên phải của header ----
   Số đo lấy từ bản gốc: điện thoại 15px/22px đậm 600, ngôn ngữ 13px/18px,
   liên hệ khẩn cấp 13px màu #775a19 */
.vag-hdrinfo {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: 'Roboto Flex', sans-serif;
}
.vag-hdrinfo__row { display: flex; align-items: center; gap: 12px; }
.vag-hdrinfo__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; line-height: 22px; letter-spacing: .015em;
  color: #181d1a; text-decoration: none;
}
.vag-hdrinfo__item b { font-weight: 600; }
.vag-hdrinfo__item:hover { color: #7b001f; }
.vag-hdrinfo__dot, .vag-hdrinfo__bar { color: #e0bfbf; font-size: 13px; }
.vag-hdrinfo__urgent {
  font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .02em;
  color: #775a19; text-decoration: none;
}
.vag-hdrinfo__urgent:hover { color: #7b001f; }

/* Nút chuyển ngôn ngữ Polylang */
.vag-lang { display: inline-flex; align-items: center; gap: 8px;
  font: 400 13px/18px 'Roboto Flex', sans-serif; letter-spacing: .02em; }
.vag-lang__item { color: #594141; text-decoration: none; transition: color .15s; }
.vag-lang__item:hover { color: #7b001f; }
.vag-lang__item.is-current { color: #7b001f; font-weight: 700; }
.vag-lang__sep { color: #e0bfbf; }

/* Hai nút tròn 32x32 ở cuối header */
.vag-hdracts { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.vag-hdracts__btn {
  width: 32px; height: 32px; border-radius: 9999px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background-color .15s, color .15s;
}
/* Biểu tượng lấy màu theo nút, nếu không sẽ bị ruby trên nền ruby */
.vag-hdracts__btn .vag-ms { font-size: 17px; color: inherit; }
.vag-hdracts__btn--light { background: #fdf2f4; color: #7b001f; }
.vag-hdracts__btn--light:hover { background: #f3dfe3; }
.vag-hdracts__btn--solid { background: #7b001f; color: #fff; }
.vag-hdracts__btn--solid:hover { background: #9e1b32; }
.vag-ms--ruby { color: #7b001f; }

/* Ô logo phải vuông đúng 48x48, không bị chiều cao dòng đẩy cao thêm */
#masthead .elementor-icon { width: 48px; height: 48px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
#masthead .vag-hdracts .vag-ms { line-height: 1; }

/* Khối tên Hội cao đúng 59px như bản gốc: bỏ lề mặc định của thẻ p và widget */
#masthead .elementor-widget-text-editor p,
#masthead .elementor-widget-heading .elementor-heading-title { margin: 0; }
#masthead .elementor-widget { margin-bottom: 0 !important; }

/* Ảnh trong thẻ không để lại khoảng trắng thừa */
.e-con img, .elementor-widget-image img { display: block; }

/* Thẻ có ảnh tràn viền: nhãn phân loại đặt đè lên góc trên trái của ảnh */
.vag-media { position: relative; overflow: hidden; }
.vag-media > .elementor-widget-image { line-height: 0; }
.vag-media > .elementor-widget-image img { border-radius: 8px 8px 0 0; }
.vag-media > .elementor-widget-button.vag-ovl {
  position: absolute; top: 10px; left: 10px; z-index: 2; width: auto;
}
.vag-media > .elementor-widget-button.vag-ovl .elementor-button {
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* Nhãn đè lên ảnh không phản ứng khi rê chuột vì nó chỉ là nhãn */
.vag-media > .vag-ovl .elementor-button { cursor: default; }

/* Ép tỉ lệ khung ảnh đúng như bản thiết kế, không phụ thuộc kích thước file gốc */
.vag-16x9 > .elementor-widget-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.vag-4x3  > .elementor-widget-image img { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; }

/* =================================================================
   LỚP HIỆU CHỈNH: ép các thẻ Elementor về đúng số đo của bản gốc.
   Số liệu lấy bằng cách đo trực tiếp trang /giao-dien-goc/.
   ================================================================= */
:root {
  --vag-sh-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --vag-sh-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --vag-ruby: #7b001f;
  --vag-garnet: #9e1b32;
  --vag-gold: #775a19;
  --vag-line: #ebefea;
}

/* Bóng đổ: bản gốc dùng thang shadow của Tailwind */
.vag-quad, .vag-stat, .vag-firm, .vag-member,
.vag-newscard, .vag-newscol, .vag-newsbox, .vag-media:not(.vag-specimen) {
  box-shadow: var(--vag-sh-sm) !important;
}
.vag-president, .vag-specimen { box-shadow: var(--vag-sh-md) !important; }

/* Lề trong và bo góc từng loại thẻ */
.vag-quad, .vag-member, .vag-president { padding: 24px !important; }
.vag-stat, .vag-firm, .vag-newscard, .vag-newscol { padding: 16px !important; }
.vag-newscard, .vag-newscol { --gap: 16px; row-gap: 16px !important; }
.vag-newsbox { padding: 48px !important; border-radius: 16px !important; }
.vag-quad, .vag-stat, .vag-firm, .vag-member, .vag-newscard,
.vag-newscol, .vag-president, .vag-media { border-radius: 8px !important; }

/* Ô icon vuông 48x48, nền surface-container, bo 4px */
.vag-quad > .elementor-widget-icon .elementor-icon,
.vag-member > .elementor-widget-icon .elementor-icon {
  width: 48px; height: 48px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s, color .15s;
}

/* Hiệu ứng rê chuột giống bản gốc */
.vag-quad, .vag-firm, .vag-newscard, .vag-media { transition: box-shadow .2s, background-color .2s; }
.vag-quad:hover, .vag-member:hover { box-shadow: var(--vag-sh-md) !important; }
.vag-firm:hover, .vag-newscard:hover { box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1) !important; }
.vag-specimen:hover { background-color: rgba(215,219,214,.2) !important; }
.vag-quad:hover > .elementor-widget-icon .elementor-icon {
  background-color: var(--vag-ruby) !important;
}
.vag-quad:hover > .elementor-widget-icon .elementor-icon svg,
.vag-quad:hover > .elementor-widget-icon .elementor-icon i { color: #fff !important; fill: #fff !important; }

/* Ảnh trong thẻ tin nhỏ cố định 112x80 như bản gốc, không co theo tỉ lệ file.
   Cột chữ ăn hết phần còn lại để tóm tắt không bị ép xuống dòng thừa. */
.vag-newscard__thumb { flex: 0 0 112px !important; width: 112px !important; }
.vag-newscard__thumb img { width: 112px; height: 80px; object-fit: cover; border-radius: 2px; }
.vag-newscard__thumb + .e-con { flex: 1 1 auto !important; width: auto !important; }

/* Ảnh chân dung Chủ tịch: 64x64, bo 12px, khối chữ bên cạnh giãn hết chỗ trống */
.vag-pres-photo { flex: 0 0 64px !important; width: 64px !important; }
.vag-pres-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.vag-pres-photo + .e-con { flex: 1 1 auto !important; width: auto !important; }

/* Thẻ có ảnh: viền dưới chuyển sang vàng khi rê chuột, theo DESIGN.md */
.vag-media { border-bottom: 2px solid transparent; }
.vag-media:hover { border-bottom-color: #C5A059; }

/* Nhãn đè trên ảnh: bỏ hiệu ứng nút của Elementor */
.vag-ovl .elementor-button { box-shadow: 0 1px 4px rgba(0,0,0,.25) !important; }

/* Bảng thông số tiêu bản bám sát mép thẻ */
.vag-specimen .elementor-widget-html { margin-top: 2px; }

/* Liên kết vàng trong ảnh hero */
.vag-hero-cta { margin-top: 4px; }
.vag-hero-cta .elementor-icon-list-text { color: #fed488 !important; font-weight: 600; }
.vag-hero-cta .elementor-icon-list-item:hover .elementor-icon-list-text { color: #fff !important; }

/* Hero: hai nút nằm sát nhau, mỗi nút chỉ rộng bằng nội dung */
.vag-hero-btns > .e-con { width: auto !important; flex: 0 0 auto !important; }
.vag-hero-btns .elementor-button { white-space: nowrap; border: 0 !important; }
/* Số đo lấy từ bản gốc: nút chính có bóng md, nút phụ có bóng nhẹ */
.vag-hero-btns > .e-con:first-child .elementor-button {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.vag-hero-btns > .e-con:nth-child(2) .elementor-button {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
/* Biểu tượng trong nút to hơn cỡ chữ: 18px cho mũi tên, 20px cho người dùng */
.vag-hero-btns > .e-con:first-child .elementor-button-icon { font-size: 18px; }
.vag-hero-btns > .e-con:nth-child(2) .elementor-button-icon { font-size: 20px; }
/* Bản gốc dùng person_add cho nút Đăng ký hội viên */
.vag-hero-btns *:has(> svg.e-fas-user-plus)::before { content: 'person_add'; }
/* Màn hình hẹp thì cho phép nút xuống dòng, tránh tràn ngang */
@media (max-width: 767px) {
  .vag-hero-btns { flex-wrap: wrap !important; }
  .vag-hero-btns > .e-con { width: 100% !important; }
  .vag-hero-btns .elementor-button { width: 100%; justify-content: center; }
}

/* Dòng Lối tắt — số đo lấy từ bản gốc: chữ 13px/18px, biểu tượng 16px,
   khoảng cách 16px, dấu chấm màu #e0bfbf */
.vag-shortcuts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  padding-top: 16px;
  font: 400 13px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-shortcuts__label {
  font-weight: 600; color: #775a19; letter-spacing: .05em; text-transform: uppercase;
}
.vag-shortcuts a {
  display: inline-flex; align-items: center; gap: 4px;
  color: #594141; text-decoration: none; transition: color .15s;
}
.vag-shortcuts a:hover { color: #7b001f; }
.vag-shortcuts__sep { color: #e0bfbf; }
/* Biểu tượng Material Symbols dùng trực tiếp trong HTML */
.vag-ms {
  font-family: 'Material Symbols Outlined'; font-size: 16px; line-height: 1;
  font-weight: 400; font-style: normal; color: #7b001f;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}

/* Khung ảnh hero bo góc 12px như bản gốc */
.vag-hero-media { border-radius: 12px !important; }

/* Bản gốc ẩn khối liên hệ dưới 768px và ô tìm kiếm dưới 1280px */
@media (max-width: 767px)  { .vag-hdr-contact { display: none !important; } }
@media (max-width: 1279px) { .vag-hdr-search  { display: none !important; } }

/* Ô tìm kiếm trên header */
.vag-search { position: relative; width: 100%; margin: 0; }
/* Bản gốc dùng biểu tượng search 18px màu on-surface-variant, đặt cách trái 10px */
.vag-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #594141; font-size: 18px !important; line-height: 1; pointer-events: none; }
.vag-search input[type="search"] {
  width: 100%; max-width: 224px; height: 36px; border: 0; border-radius: 4px;
  background: #f0f5f0; color: #181d1a; padding: 0 12px 0 32px;
  font: 400 12px/1.4 'Roboto Flex', sans-serif;
  -webkit-appearance: none;
}
.vag-search input[type="search"]::placeholder { color: #594141; }
.vag-search input[type="search"]:focus { background: #ebefea; outline: none; }

/* Dải truy cập nhanh — bản gốc: cả 7 ô đều cao 92px kể cả khi nhãn xuống
   2 dòng, đệm 12px, bo 2px, biểu tượng 28px, cách chữ 4px.
   .vag-quick chính là cột, nên cho cột giãn bằng nhau rồi ô lấp đầy cột. */
.vag-quick { align-self: stretch; }
.vag-quick .elementor-widget-icon-box {
  height: 100%; padding: 12px; border-radius: 2px;
  transition: background-color .15s;
}
.vag-quick .elementor-icon-box-icon { margin-bottom: 4px !important; line-height: 1; }
/* Khung biểu tượng cao đúng 28px, nếu không chiều cao dòng sẽ đội ô lên */
.vag-quick .elementor-icon-box-icon .elementor-icon {
  font-size: 28px !important; line-height: 1; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Elementor thêm lề trên 8px và dưới 16px cho tiêu đề trong icon-box,
   khiến ô cao thêm 24px so với bản gốc */
.vag-quick .elementor-icon-box-title { margin: 0 !important; }
.vag-quick .elementor-icon-box-wrapper { gap: 0 !important; }
.vag-quick .elementor-widget-icon-box:hover { background: #ebefea; }

/* Bảng thông số tiêu bản trong khối bảo tàng */
.elementor-widget-html table { margin: 0; }

/* =================================================================
   TRANG GIỚI THIỆU
   Bố cục do container Elementor lo; phần dưới chỉ tinh chỉnh những
   thứ Elementor không có sẵn: đường kẻ mốc thời gian, ảnh cắt khung,
   thanh tab dính và biểu mẫu tra cứu.
   ================================================================= */

/* Bổ sung bảng đổi biểu tượng cho các hình dùng riêng ở trang này */
*:has(> svg.e-fas-home)::before           { content: 'home'; }
*:has(> svg.e-fas-university)::before     { content: 'account_balance'; }
*:has(> svg.e-fas-bookmark)::before       { content: 'bookmark'; }
*:has(> svg.e-fas-user-shield)::before    { content: 'verified_user'; }
*:has(> svg.e-fas-star)::before           { content: 'stars'; }
*:has(> svg.e-fas-atom)::before           { content: 'science'; }
*:has(> svg.e-fas-balance-scale)::before  { content: 'policy'; }
*:has(> svg.e-fas-thumbtack)::before      { content: 'pin_drop'; }
*:has(> svg.e-fas-phone)::before          { content: 'phone'; }
*:has(> svg.e-fas-language)::before       { content: 'language'; }
*:has(> svg.e-fas-download)::before       { content: 'download'; }
*:has(> svg.e-fas-file-alt)::before       { content: 'description'; }
*:has(> svg.e-fas-clipboard-list)::before { content: 'app_registration'; }
*:has(> svg.e-fas-search)::before         { content: 'search'; }

/* Container chỉ rộng bằng nội dung (nhãn, hàng biểu tượng + chữ) */
.vag-fit { width: fit-content !important; max-width: 100%; }

/* Đoạn văn trong widget văn bản: bỏ lề dưới mặc định của trình soạn thảo */
.vag-p0 p:last-child { margin-bottom: 0; }

/* Dải hero: bản gốc dùng dải màu 3 chặng ruby → garnet → xám đậm */
.vag-gt-hero { background-image: linear-gradient(90deg,#7b001f 0%,#9e1b32 50%,#2c322e 100%) !important; }
.vag-gt-hero .vag-herostats { backdrop-filter: blur(4px); }

/* Đường dẫn: bỏ gạch chân liên kết, đổi màu khi rê chuột */
.vag-crumb a { color: inherit; text-decoration: none; }
.vag-crumb a:hover { color: #7b001f; }
/* Biểu tượng trong thanh đường dẫn không được cao hơn dòng chữ */
.vag-crumb .elementor-icon, .vag-crumbmeta .elementor-icon { line-height: 1; display: block; }

/* --- Thanh tab dính --- */
.vag-tabbar { position: sticky; z-index: 40; top: 0; overflow-x: auto; }
.vag-tabbar::-webkit-scrollbar { display: none; }
@media (min-width: 1025px) {
  .vag-tabbar { top: 128px; }
  body.admin-bar .vag-tabbar { top: 160px; }
}
.vag-tabrow { flex-wrap: nowrap !important; min-width: max-content; }
.vag-tabrow .elementor-icon-list-items { flex-wrap: nowrap; gap: 0; }
.vag-tabrow .elementor-icon-list-item > a {
  padding: 6px 12px; border-radius: 2px; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.vag-tabrow .elementor-icon-list-item:first-child > a {
  background: #ebefea; color: #7b001f; font-weight: 600;
}
.vag-tabrow .elementor-icon-list-item > a:hover { background: #ebefea; color: #7b001f; }
.vag-tabrow .elementor-icon-list-item:first-child > a:hover { background: #9e1b32; color: #fff; }
.vag-tabrow .elementor-widget-button { margin-left: auto; }

/* Chừa chỗ cho header + thanh tab khi nhảy tới neo trong trang */
.vag-gt-card { scroll-margin-top: 190px; }

/* --- Mốc thời gian: đường kẻ dọc và chấm tròn --- */
.vag-timeline { position: relative; }
.vag-timeline::before {
  content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px;
  width: 2px; background: #dfe4df;
}
.vag-tl-item { position: relative; }
.vag-tl-dot {
  flex: 0 0 20px; margin-top: 6px;
  box-shadow: 0 0 0 4px #fff;
}
.vag-tl-dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

/* --- Ảnh tư liệu phòng giám định --- */
.vag-labshot { overflow: hidden; }
.vag-labshot .elementor-widget-image,
.vag-labshot .elementor-widget-image .elementor-widget-container { line-height: 0; }
.vag-labshot img { display: block; width: 100%; height: 320px; object-fit: cover; }

/* --- Chân dung Chủ tịch --- */
.vag-presside img { width: 176px; height: 224px; object-fit: cover; display: block; }
.vag-presbody > .elementor-widget-icon { opacity: .6; }
@media (max-width: 767px) {
  .vag-presside { align-items: center; }
  .vag-presside img { margin: 0 auto; }
}

/* --- Danh sách liên hệ trụ sở: xếp 2 cột --- */
.vag-hqlines .elementor-icon-list-items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
@media (max-width: 767px) { .vag-hqlines .elementor-icon-list-items { grid-template-columns: 1fr; } }

/* --- Chữ cái đại diện trong Ban Chấp hành --- */
.vag-ava { flex: 0 0 44px; }
.vag-ava .elementor-widget { width: auto; }

/* --- Ô tra cứu chứng thư --- */
.vag-lookup__form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.vag-lookup__form input {
  width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 2px;
  font: 400 12px/18px 'Roboto Flex', sans-serif; color: #181d1a; background: #fff;
}
.vag-lookup__form input:focus { outline: 2px solid #775a19; outline-offset: 1px; }
.vag-lookup__form button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 12px; border: 0; border-radius: 2px; cursor: pointer;
  font: 700 13px/18px 'Roboto Flex', sans-serif; color: #fff; background: #775a19;
  transition: background-color .15s, color .15s;
}
.vag-lookup__form button:hover { background: #fed488; color: #785a1a; }
.vag-lookup__form .vag-ms {
  font-family: 'Material Symbols Outlined'; font-size: 18px; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Cột phụ bám theo khi cuộn --- */
@media (min-width: 1025px) {
  .vag-aside { position: sticky; top: 190px; }
}

/* --- Nút ở dải kêu gọi --- */
@media (max-width: 767px) {
  .vag-ctabtns { width: 100% !important; }
  .vag-ctabtns .elementor-widget-button,
  .vag-ctabtns .elementor-button { width: 100%; }
}

/* =================================================================
   TRANG BAN CHẤP HÀNH – BAN THƯỜNG VỤ
   Bố cục do container Elementor lo. Phần dưới chỉ lo những thứ
   Elementor không có: ô tìm kiếm, hộp chi tiết, và vài chi tiết nhỏ.
   ================================================================= */

/* Bổ sung ký hiệu dùng riêng ở trang này */
*:has(> svg.e-fas-close)::before  { content: 'close'; }
*:has(> svg.e-fas-domain)::before { content: 'domain'; }

/* Ảnh nền của thẻ chủ tịch và thẻ thành viên phủ kín khung */
.vag-presphoto, .vag-mphoto { background-repeat: no-repeat; }
.vag-mphoto { flex: 0 0 auto; }

/* Thẻ thành viên: phần chữ luôn đẩy nút xuống đáy để các thẻ bằng nhau */
.vag-mcard { align-self: stretch; }
.vag-mbody { flex-grow: 1; }
/* Biểu tượng ở dòng chuyên môn không được cao hơn dòng chữ 16px */
.vag-mbody .elementor-widget-icon .elementor-icon { line-height: 1; display: block; }

/* Ô tìm kiếm thành viên */
.vag-msearch { position: relative; width: 320px; max-width: 100%; }
.vag-msearch input {
  width: 100%; height: 40px; padding: 0 16px 0 40px;
  border: 0; border-radius: 2px; background: #f0f5f0;
  font: 400 14px/22px 'Roboto Flex', sans-serif; color: #181d1a;
}
.vag-msearch input::placeholder { color: #594141; }
.vag-msearch input:focus { outline: none; background: #ebefea; }
.vag-msearch .vag-ms {
  position: absolute; left: 12px; top: 10px; font-size: 20px; color: #594141;
  font-family: 'Material Symbols Outlined'; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  pointer-events: none;
}
@media (max-width: 767px) { .vag-msearch { width: 100%; } }

/* Nút lọc theo chức danh: trạng thái đang chọn do đoạn mã gắn lớp is-active */
.vag-rolebtn.is-active .elementor-button {
  background-color: #7b001f !important; color: #ffffff !important;
}
.vag-rolebtn:not(.is-active) .elementor-button {
  background-color: #f0f5f0 !important; color: #181d1a !important;
}
.vag-rolebtn:not(.is-active) .elementor-button:hover {
  background-color: #ebefea !important;
}

/* Hộp chi tiết thành viên */
.vag-mmodal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  padding: 16px;
}
.vag-mmodal[hidden] { display: none; }
.vag-mmodal__box {
  position: relative; width: 100%; max-width: 512px;
  background: #fff; border: 1px solid rgba(223,228,223,0.6);
  border-radius: 8px; padding: 32px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 16px;
  font-family: 'Roboto Flex', sans-serif;
  max-height: 90vh; overflow-y: auto;
}
.vag-mmodal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: #ebefea; color: #181d1a;
  display: flex; align-items: center; justify-content: center;
}
.vag-mmodal__close:hover { background: #7b001f; color: #fff; }
.vag-mmodal__head { display: flex; align-items: center; gap: 16px; }
.vag-mmodal__ava {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px;
  background: rgba(123,0,31,0.10); color: #7b001f;
  display: flex; align-items: center; justify-content: center;
  font: 700 22px/30px 'Merriweather', serif;
}
.vag-mmodal__role {
  display: block; font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase; color: #775a19;
}
.vag-mmodal__name { margin: 2px 0 0; font: 700 22px/30px 'Merriweather', serif; color: #181d1a; }
.vag-mmodal__rows {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px; border-top: 1px solid rgba(223,228,223,0.4);
}
.vag-mmodal__rows > div { display: flex; align-items: flex-start; gap: 8px; }
.vag-mmodal__lbl { display: block; font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141; }
.vag-mmodal__val { display: block; font: 600 15px/22px 'Roboto Flex', sans-serif; color: #181d1a; }
.vag-mmodal__bio { background: #f0f5f0; border-radius: 4px; padding: 16px; }
.vag-mmodal__bio .vag-mmodal__lbl {
  font-weight: 700; font-size: 11px; line-height: 16px;
  letter-spacing: .055em; text-transform: uppercase; margin-bottom: 4px;
}
.vag-mmodal__bio p { margin: 0; font: 400 14px/23px 'Roboto Flex', sans-serif; color: #181d1a; }
.vag-mmodal__foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.vag-mmodal__ok {
  border: 0; border-radius: 2px; cursor: pointer; padding: 8px 16px;
  background: #7b001f; color: #fff;
  font: 500 13px/18px 'Roboto Flex', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
}
.vag-mmodal__ok:hover { background: #9e1b32; }
.vag-mmodal .vag-ms {
  font-family: 'Material Symbols Outlined'; font-size: 18px; line-height: 1; color: #7b001f;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-mmodal__close .vag-ms { color: inherit; }
/* =================================================================
   TRANG TIN TỨC – SỰ KIỆN
   Hai khối bài viết là widget Post Grid của Essential Addons. Widget này
   tự đặt các thẻ bài ở position:absolute rồi tính toạ độ bằng JavaScript.
   Ở đây trả chúng về luồng thường rồi xếp bằng CSS Grid, nhờ vậy bố cục
   khớp bản thiết kế mà vẫn giữ nguyên phần truy vấn của widget.
   ================================================================= */

/* --- Trả các thẻ bài về luồng bình thường --- */
.vag-newshero .eael-post-grid,
.vag-newsgrid .eael-post-grid {
  height: auto !important; position: static !important; margin: 0; padding: 0; list-style: none;
}
.vag-newshero .eael-grid-post,
.vag-newsgrid .eael-grid-post {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.vag-newshero .eael-post-grid::after,
.vag-newsgrid .eael-post-grid::after { content: none; }

/* --- Lưới 3 cột --- */
.vag-newsgrid .eael-post-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
@media (max-width: 1024px) { .vag-newsgrid .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .vag-newsgrid .eael-post-grid { grid-template-columns: 1fr; } }

/* --- Thẻ tin --- */
.vag-newsgrid .eael-grid-post-holder {
  height: 100%; background: #ffffff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow .2s;
}
.vag-newsgrid .eael-grid-post-holder:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.10); }
.vag-newsgrid .eael-grid-post-holder-inner { display: flex; flex-direction: column; height: 100%; }

/* Ảnh tỉ lệ 16:10 */
.vag-newsgrid .eael-entry-media { position: relative; }
.vag-newsgrid .eael-entry-thumbnail { aspect-ratio: 16 / 10; overflow: hidden; }
.vag-newsgrid .eael-entry-thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s;
}
.vag-newsgrid .eael-grid-post-holder:hover .eael-entry-thumbnail img { transform: scale(1.05); }

/* Nhãn chuyên mục nổi trên ảnh.
   Widget mặc định để visibility:hidden và chỉ hiện khi rê chuột; bản thiết kế
   hiện thường trực nên phải ghi đè. */
.vag-newshero .post-carousel-categories,
.vag-newsgrid .post-carousel-categories {
  position: absolute; z-index: 2; margin: 0; padding: 0; list-style: none;
  display: flex; gap: 6px;
  visibility: visible !important; opacity: 1 !important; transform: none !important;
}
.vag-newsgrid .post-carousel-categories { top: 12px; left: 12px; }
.vag-newshero .post-carousel-categories { top: 16px; left: 16px; }
.vag-newshero .post-carousel-categories li,
.vag-newsgrid .post-carousel-categories li { margin: 0; }
.vag-newsgrid .post-carousel-categories a {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  background: #ffffff; color: #7b001f;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.vag-newshero .post-carousel-categories a {
  display: inline-block; padding: 4px 12px; border-radius: 2px;
  background: #9e1b32; color: #ffffff;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Không dùng lớp phủ mũi tên mặc định của widget */
.vag-newshero .eael-entry-overlay,
.vag-newsgrid .eael-entry-overlay { display: none !important; }

/* Khối chữ: ngày tháng nằm trên tiêu đề như bản thiết kế */
.vag-newsgrid .eael-entry-wrapper {
  display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px;
}
.vag-newsgrid .eael-entry-header-after { order: 1; margin-bottom: 8px; }
.vag-newsgrid .eael-entry-header       { order: 2; margin-bottom: 8px; }
.vag-newsgrid .eael-entry-content      { order: 3; }
.vag-newsgrid .eael-entry-meta,
.vag-newshero .eael-entry-meta { display: flex; align-items: center; gap: 8px; margin: 0; }
.vag-newsgrid .eael-entry-meta time,
.vag-newsgrid .eael-entry-meta .eael-posted-on {
  font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-newsgrid .eael-posted-on::before,
.vag-newshero .eael-posted-on::before {
  content: 'schedule'; font-family: 'Material Symbols Outlined'; font-size: 14px;
  line-height: 1; color: #7b001f; margin-right: 4px; vertical-align: -2px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-newsgrid .eael-entry-title {
  margin: 0; font: 700 18px/26px 'Merriweather', serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-newsgrid .eael-entry-title a { color: #7b001f; text-decoration: none; }
.vag-newsgrid .eael-entry-title a:hover { color: #9e1b32; }
.vag-newsgrid .eael-grid-post-excerpt p {
  margin: 0; font: 400 14px/23px 'Roboto Flex', sans-serif; color: #594141;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Liên kết "Xem chi tiết" luôn nằm sát đáy thẻ */
.vag-newsgrid .eael-entry-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-newsgrid .eael-grid-post-excerpt { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-newshero .eael-post-elements-readmore-btn,
.vag-newsgrid .eael-post-elements-readmore-btn {
  align-self: flex-start; text-decoration: none;
  font: 700 13px/18px 'Roboto Flex', sans-serif; letter-spacing: .02em;
}
.vag-newsgrid a.eael-post-elements-readmore-btn {
  margin-top: 24px; color: #7b001f !important; background: none; padding: 0;
}
.vag-newsgrid .eael-post-elements-readmore-btn::after {
  content: 'chevron_right'; font-family: 'Material Symbols Outlined'; font-size: 16px;
  line-height: 1; margin-left: 4px; vertical-align: -3px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-newsgrid .eael-post-elements-readmore-btn:hover { text-decoration: underline; }

/* --- Tin nổi bật: ảnh 7 phần, chữ 5 phần --- */
.vag-newshero .eael-grid-post-holder {
  background: #2c322e; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
.vag-newshero .eael-grid-post-holder-inner {
  display: grid; grid-template-columns: 7fr 5fr; min-height: 480px;
}
.vag-newshero .eael-entry-media { position: relative; overflow: hidden; }
.vag-newshero .eael-entry-thumbnail { position: absolute; inset: 0; }
.vag-newshero .eael-entry-thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s;
}
.vag-newshero .eael-grid-post-holder:hover .eael-entry-thumbnail img { transform: scale(1.05); }
.vag-newshero .eael-entry-wrapper {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 12px; padding: 32px; background: #ffffff;
}
.vag-newshero .eael-entry-header-after { order: 1; }
.vag-newshero .eael-entry-header       { order: 2; }
.vag-newshero .eael-entry-content      { order: 3; margin-top: auto; }
.vag-newshero .eael-entry-meta time,
.vag-newshero .eael-entry-meta .eael-posted-on {
  font: 700 12px/18px 'Roboto Flex', sans-serif; color: #7b001f;
}
.vag-newshero .eael-entry-title {
  margin: 12px 0 0; font: 700 26px/34px 'Merriweather', serif;
}
.vag-newshero .eael-entry-title a { color: #7b001f; text-decoration: none; }
.vag-newshero .eael-entry-title a:hover { color: #9e1b32; }
.vag-newshero .eael-grid-post-excerpt {
  display: flex; flex-direction: column; align-items: flex-start;
}
.vag-newshero .eael-grid-post-excerpt p {
  margin: 12px 0 0; font: 400 14px/23px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-newshero a.eael-post-elements-readmore-btn {
  width: fit-content; margin-top: 24px; padding: 8px 16px; border-radius: 2px;
  background: #7b001f; color: #ffffff !important; text-transform: uppercase; letter-spacing: .065em;
  font-weight: 500; transition: background-color .15s;
}
.vag-newshero .eael-post-elements-readmore-btn::after {
  content: 'arrow_forward'; font-family: 'Material Symbols Outlined'; font-size: 16px;
  line-height: 1; margin-left: 6px; vertical-align: -3px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-newshero .eael-post-elements-readmore-btn:hover { background: #9e1b32; }
@media (max-width: 1024px) {
  .vag-newshero .eael-grid-post-holder-inner { grid-template-columns: 1fr; min-height: 0; }
  .vag-newshero .eael-entry-media { min-height: 300px; }
}

/* --- Nút "Xem thêm tin" --- */
.vag-newsgrid .eael-load-more-button {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 32px auto 0; padding: 10px 24px; border: 1px solid #7b001f; border-radius: 2px;
  background: #ffffff; color: #7b001f; cursor: pointer;
  font: 500 13px/18px 'Roboto Flex', sans-serif;
  letter-spacing: .065em; text-transform: uppercase;
}
.vag-newsgrid .eael-load-more-button:hover { background: #7b001f; color: #ffffff; }

/* --- Thanh lọc: ô chọn năm và ô tìm kiếm --- */
.vag-newsfilter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vag-newsyear { position: relative; }
.vag-newsyear select {
  height: 40px; padding: 0 32px 0 12px; border: 1px solid #dfe4df; border-radius: 4px;
  background: #ffffff; color: #181d1a; cursor: pointer;
  font: 500 13px/18px 'Roboto Flex', sans-serif;
  appearance: none; -webkit-appearance: none;
}
.vag-newsyear select:focus { outline: none; border-color: #7b001f; }
.vag-newsyear .vag-ms {
  position: absolute; right: 8px; top: 10px; font-size: 18px; color: #594141;
  pointer-events: none;
}
.vag-newssearch { position: relative; margin: 0; }
.vag-newssearch input[type="text"] {
  width: 256px; max-width: 100%; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid #dfe4df; border-radius: 4px; background: #ffffff; color: #181d1a;
  font: 400 12px/18px 'Roboto Flex', sans-serif;
}
.vag-newssearch input[type="text"]:focus { outline: none; border-color: #7b001f; }
.vag-newssearch .vag-ms {
  position: absolute; left: 10px; top: 11px; font-size: 18px; color: #594141;
  pointer-events: none;
}
.vag-newsfilter .vag-ms {
  font-family: 'Material Symbols Outlined'; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 767px) {
  .vag-newsfilter { width: 100%; }
  .vag-newssearch { flex: 1 1 auto; }
  .vag-newssearch input[type="text"] { width: 100%; }
}

/* --- Chuyên mục đang xem ở thanh lọc --- */
.vag-newstab.is-active .elementor-button { background-color: #7b001f !important; color: #fff !important; }
/* =================================================================
   TRANG CHUYÊN NGÀNH ĐÁ QUÝ
   Hai khối bài viết dùng Post Grid của Essential Addons; phần dưới đưa
   chúng về đúng dáng thẻ của bản thiết kế.
   ================================================================= */

/* Bổ sung ký hiệu dùng riêng ở trang này */
*:has(> svg.e-fas-th-large)::before     { content: 'grid_view'; }
*:has(> svg.e-fas-layer-group)::before  { content: 'layers'; }
*:has(> svg.e-fas-fire)::before         { content: 'local_fire_department'; }
*:has(> svg.e-fas-tag)::before          { content: 'label'; }
*:has(> svg.e-fas-plus)::before         { content: 'add_box'; }

/* Thanh chuyên mục bám khi cuộn, cuộn ngang được trên màn hẹp */
.vag-cnbar { position: sticky; z-index: 40; top: 0; overflow-x: auto; }
.vag-cnbar::-webkit-scrollbar { display: none; }
@media (min-width: 1025px) {
  .vag-cnbar { top: 128px; }
  body.admin-bar .vag-cnbar { top: 160px; }
}
.vag-cntabs { flex-wrap: nowrap !important; min-width: max-content; }

/* Số thứ tự lớn mờ ở khối "Nội dung nổi bật" */
.vag-cnnum .elementor-heading-title { opacity: .4; }

/* Thẻ chủ đề co theo nội dung */
.vag-cntags .elementor-widget-button { width: auto; }

/* Cột phụ bám theo khi cuộn */
@media (min-width: 1025px) { .vag-cnaside { position: sticky; top: 190px; } }

/* --- Đưa các thẻ bài của widget về luồng thường --- */
.vag-cnhero .eael-post-grid,
.vag-cnlist .eael-post-grid {
  height: auto !important; position: static !important; margin: 0; padding: 0; list-style: none;
}
.vag-cnhero .eael-grid-post,
.vag-cnlist .eael-grid-post {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.vag-cnhero .eael-entry-overlay,
.vag-cnlist .eael-entry-overlay { display: none !important; }
.vag-cnhero .post-carousel-categories,
.vag-cnlist .post-carousel-categories {
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  position: absolute; z-index: 2; margin: 0; padding: 0; list-style: none; display: flex; gap: 6px;
}

/* --- Bài nổi bật: ảnh cao 380px, ngày và tiêu đề đè lên đáy ảnh ---
   Widget xuất ra media, meta, tiêu đề, nội dung ở cùng một cấp. Dùng lưới với
   display:contents để media trải qua ba hàng đầu, còn meta và tiêu đề nằm đúng
   hai hàng cuối của vùng ảnh; phần thân trắng xuống hàng thứ tư. */
.vag-cnhero .eael-grid-post-holder {
  background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.vag-cnhero .eael-grid-post-holder-inner {
  display: grid; grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}
.vag-cnhero .eael-entry-wrapper { display: contents; }
.vag-cnhero .eael-entry-media {
  grid-row: 1 / 4; grid-column: 1; position: relative; min-height: 380px; overflow: hidden;
}
.vag-cnhero .eael-entry-thumbnail { position: absolute; inset: 0; }
.vag-cnhero .eael-entry-thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s;
}
.vag-cnhero .eael-grid-post-holder:hover .eael-entry-thumbnail img { transform: scale(1.04); }
.vag-cnhero .eael-entry-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(44,50,46,.85) 0%, rgba(44,50,46,.15) 55%, transparent 100%);
}
.vag-cnhero .post-carousel-categories { top: 16px; left: 16px; z-index: 3; }
.vag-cnhero .post-carousel-categories a {
  display: inline-block; padding: 4px 8px; border-radius: 2px;
  background: #7b001f; color: #ffffff; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
}
.vag-cnhero .eael-entry-header-after {
  grid-row: 2; grid-column: 1; z-index: 3; padding: 0 16px;
}
.vag-cnhero .eael-entry-header {
  grid-row: 3; grid-column: 1; z-index: 3; padding: 4px 16px 16px;
}
.vag-cnhero .eael-entry-content {
  grid-row: 4; grid-column: 1; padding: 24px; background: #ffffff;
}
.vag-cnhero .eael-entry-meta { display: flex; align-items: center; gap: 8px; margin: 0; }
.vag-cnhero .eael-entry-meta time,
.vag-cnhero .eael-entry-meta .eael-posted-on {
  font: 400 12px/18px 'Roboto Flex', sans-serif; color: #d7dbd6;
}
.vag-cnhero .eael-posted-on::before {
  content: 'calendar_today'; font-family: 'Material Symbols Outlined'; font-size: 14px;
  line-height: 1; color: #d7dbd6; margin-right: 4px; vertical-align: -2px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-cnhero .eael-entry-title { margin: 0; font: 700 26px/34px 'Merriweather', serif; }
.vag-cnhero .eael-entry-title a { color: #edf2ed !important; text-decoration: none; }
.vag-cnhero .eael-entry-title a:hover { color: #ffdea5 !important; }
/* Tren dien thoai tieu de dai toi 5 dong 26px, tran khoi vung toi cua lop phu
   nen khong doc duoc. Thu nho chu, gioi han 3 dong va lam dam lop phu. */
@media (max-width: 767px) {
  .vag-cnhero .eael-entry-title {
    font-size: 18px !important; line-height: 26px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vag-cnhero .eael-entry-media::after {
    background: linear-gradient(to top, rgba(24,29,26,.94) 0%, rgba(24,29,26,.72) 45%, rgba(24,29,26,.30) 100%);
  }
  .vag-cnhero .eael-entry-media { min-height: 300px !important; }
}
.vag-cnhero .eael-grid-post-excerpt { display: flex; flex-direction: column; align-items: flex-start; }
.vag-cnhero .eael-grid-post-excerpt p {
  margin: 0; font: 400 16px/26px 'Roboto Flex', sans-serif; color: #181d1a;
}
.vag-cnhero a.eael-post-elements-readmore-btn {
  width: fit-content; margin-top: 16px; padding: 10px 16px; border-radius: 2px;
  background: #7b001f; color: #ffffff !important; text-decoration: none;
  font: 500 13px/18px 'Roboto Flex', sans-serif; letter-spacing: .02em;
}
.vag-cnhero a.eael-post-elements-readmore-btn::after {
  content: 'arrow_forward'; font-family: 'Material Symbols Outlined'; font-size: 16px;
  line-height: 1; margin-left: 6px; vertical-align: -3px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-cnhero a.eael-post-elements-readmore-btn:hover { background: #9e1b32; }

/* Biểu tượng ở dòng ghi chú đường dẫn không cao hơn dòng chữ */
.vag-crumbnote .elementor-icon { line-height: 1; display: block; }

/* --- Lưới 2 cột bài chuyên ngành --- */
.vag-cnlist .eael-post-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 767px) { .vag-cnlist .eael-post-grid { grid-template-columns: 1fr; } }
.vag-cnlist .eael-grid-post-holder {
  height: 100%; background: #ffffff; border: 1px solid #dfe4df; border-radius: 4px;
}
.vag-cnlist .eael-grid-post-holder-inner {
  display: flex; flex-direction: column; height: 100%; padding: 16px;
}
.vag-cnlist .eael-entry-media { position: relative; order: 2; margin: 4px 0; }
.vag-cnlist .eael-entry-thumbnail { height: 160px; overflow: hidden; border-radius: 2px; }
.vag-cnlist .eael-entry-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vag-cnlist .post-carousel-categories { position: static; margin-bottom: 8px; }
.vag-cnlist .post-carousel-categories a {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  background: #ebefea; color: #7b001f; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
}
.vag-cnlist .eael-entry-wrapper { order: 3; display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-cnlist .eael-entry-header-after { order: 1; }
.vag-cnlist .eael-entry-header       { order: 2; margin-top: 4px; }
.vag-cnlist .eael-entry-content      { order: 3; display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-cnlist .eael-entry-meta { display: flex; margin: 0; }
.vag-cnlist .eael-entry-meta time,
.vag-cnlist .eael-entry-meta .eael-posted-on {
  font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-cnlist .eael-entry-title { margin: 0; font: 600 18px/26px 'Roboto Flex', sans-serif; }
.vag-cnlist .eael-entry-title a { color: #181d1a; text-decoration: none; }
.vag-cnlist .eael-entry-title a:hover { color: #7b001f; }
.vag-cnlist .eael-grid-post-excerpt { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-cnlist .eael-grid-post-excerpt p {
  margin: 8px 0 0; font: 400 14px/23px 'Roboto Flex', sans-serif; color: #594141;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-cnlist a.eael-post-elements-readmore-btn {
  align-self: flex-end; margin-top: 8px; padding: 8px 0 0; text-decoration: none;
  color: #7b001f !important; font: 500 12px/18px 'Roboto Flex', sans-serif;
  border-top: 1px solid #dfe4df; width: 100%; text-align: right;
}
.vag-cnlist a.eael-post-elements-readmore-btn::after { content: ' ›'; }
/* =================================================================
   TRANG DOANH NGHIỆP TIÊU BIỂU
   ================================================================= */

*:has(> svg.e-fas-user-shield)::before { content: 'verified_user'; }

/* Ô tìm kiếm doanh nghiệp */
.vag-dnfilter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vag-dnsearch { position: relative; margin: 0; }
.vag-dnsearch input[type="text"] {
  width: 256px; max-width: 100%; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid #dfe4df; border-radius: 4px; background: #ffffff; color: #181d1a;
  font: 400 12px/18px 'Roboto Flex', sans-serif;
}
.vag-dnsearch input[type="text"]:focus { outline: none; border-color: #7b001f; }
.vag-dnsearch .vag-ms {
  position: absolute; left: 10px; top: 11px; font-size: 18px; color: #594141;
  pointer-events: none; font-family: 'Material Symbols Outlined'; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 767px) {
  .vag-dnfilter { width: 100%; }
  .vag-dnsearch { width: 100%; }
  .vag-dnsearch input[type="text"] { width: 100%; }
}

.vag-dntab.is-active .elementor-button { background-color: #7b001f !important; color: #fff !important; }

/* --- Lưới doanh nghiệp hội viên (Post Grid) --- */
.vag-dngrid .eael-post-grid {
  height: auto !important; position: static !important; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.vag-dngrid .eael-grid-post {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
@media (max-width: 1024px) { .vag-dngrid .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Trên điện thoại vẫn giữ 2 thẻ mỗi hàng theo yêu cầu */
@media (max-width: 767px)  { .vag-dngrid .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.vag-dngrid .eael-grid-post-holder {
  height: 100%; background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: box-shadow .2s, border-color .2s;
}
.vag-dngrid .eael-grid-post-holder:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.10); border-color: #7b001f; }
.vag-dngrid .eael-grid-post-holder-inner { display: flex; flex-direction: column; height: 100%; padding: 16px; }
.vag-dngrid .eael-entry-media { display: none; }
.vag-dngrid .eael-entry-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-dngrid .post-carousel-categories {
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  position: static; margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.vag-dngrid .post-carousel-categories a {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  background: #ebefea; color: #7b001f; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
}
.vag-dngrid .eael-entry-title { margin: 0; font: 600 16px/24px 'Roboto Flex', sans-serif; }
.vag-dngrid .eael-entry-title a { color: #181d1a; text-decoration: none; }
.vag-dngrid .eael-entry-title a:hover { color: #7b001f; }
.vag-dngrid .eael-entry-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-dngrid .eael-grid-post-excerpt { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-dngrid .eael-grid-post-excerpt p {
  margin: 8px 0 0; font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-dngrid a.eael-post-elements-readmore-btn {
  margin-top: 12px; padding: 8px 0 0; width: 100%; text-align: right; text-decoration: none;
  border-top: 1px solid #dfe4df; color: #7b001f !important;
  font: 500 12px/18px 'Roboto Flex', sans-serif;
}
.vag-dngrid a.eael-post-elements-readmore-btn::after { content: ' ›'; }
.vag-dngrid .eael-load-more-button {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 24px auto 0; padding: 10px 24px; border: 1px solid #7b001f; border-radius: 2px;
  background: #ffffff; color: #7b001f; cursor: pointer;
  font: 500 13px/18px 'Roboto Flex', sans-serif; letter-spacing: .065em; text-transform: uppercase;
}
.vag-dngrid .eael-load-more-button:hover { background: #7b001f; color: #ffffff; }

/* Danh sách liên hệ trong thẻ đối tác chiến lược */
.vag-dntier1 .elementor-icon-list-item { align-items: flex-start; }
.vag-dntier1 .elementor-icon-list-icon { margin-top: 2px; }
/* =================================================================
   TRANG CHI TIẾT (bài viết, doanh nghiệp, hội viên, tư liệu, mẫu vật)
   Mẫu do vag-cpt.php sinh ra. Kiểu dáng lấy từ phần xem trước bài
   chi tiết trong các bản thiết kế.
   ================================================================= */

.vag-detail { background: #f6fbf5; }
.vag-detail__inner {
  max-width: 1152px; margin: 0 auto; padding-left: 20px; padding-right: 20px;
  font-family: 'Roboto Flex', sans-serif;
}

/* Thanh đường dẫn */
.vag-detail__crumbbar { background: #f0f5f0; border-bottom: 1px solid #dfe4df; }
.vag-detail__crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 12px; padding-bottom: 12px;
  font: 500 13px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-detail__crumb a { color: #594141; text-decoration: none; }
.vag-detail__crumb a:hover { color: #7b001f; }
.vag-detail__crumb span { color: #e0bfbf; }
.vag-detail__crumb .is-current { color: #7b001f; font-weight: 600; }

.vag-detail__body { padding-top: 32px; padding-bottom: 72px; }

/* Đầu trang chi tiết */
.vag-detail__terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vag-detail__terms a {
  display: inline-block; padding: 4px 10px; border-radius: 2px;
  background: #ebefea; color: #7b001f; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
}
.vag-detail__terms a:hover { background: #7b001f; color: #ffffff; }
.vag-detail__head h1 {
  margin: 0; font: 700 36px/46px 'Merriweather', serif; color: #7b001f;
  letter-spacing: -.01em;
}
.vag-detail__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px;
  font: 400 13px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-detail__meta .vag-ms { font-size: 16px; color: #7b001f; vertical-align: -3px; }
.vag-detail__lead {
  margin: 16px 0 0; max-width: 768px;
  font: 400 16px/26px 'Roboto Flex', sans-serif; color: #594141;
}

/* Ảnh đại diện */
.vag-detail__figure {
  margin: 32px 0 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.vag-detail__figure img { display: block; width: 100%; height: auto; }

/* Hai cột: nội dung và bảng thông tin */
.vag-detail__cols {
  display: grid; grid-template-columns: minmax(0, 757fr) minmax(0, 363fr);
  gap: 32px; align-items: start; margin-top: 32px;
}
@media (max-width: 1024px) { .vag-detail__cols { grid-template-columns: 1fr; } }

.vag-detail__content { font: 400 16px/26px 'Roboto Flex', sans-serif; color: #181d1a; }
.vag-detail__content > *:first-child { margin-top: 0; }
.vag-detail__content p { margin: 0 0 16px; }
.vag-detail__content h2 {
  margin: 32px 0 8px; font: 700 22px/30px 'Merriweather', serif; color: #7b001f;
}
.vag-detail__content h3 {
  margin: 24px 0 8px; font: 700 18px/26px 'Merriweather', serif; color: #7b001f;
}
.vag-detail__content ul, .vag-detail__content ol { margin: 0 0 16px; padding-left: 24px; }
.vag-detail__content li { margin-bottom: 8px; }
.vag-detail__content a { color: #7b001f; }
.vag-detail__content img { max-width: 100%; height: auto; border-radius: 4px; }
.vag-detail__content blockquote {
  margin: 24px 0; padding: 24px; background: #dfe4df;
  border-left: 4px solid #7b001f; border-radius: 0 8px 8px 0;
}
.vag-detail__content blockquote p {
  margin: 0 0 8px; font: 400 italic 18px/28px 'Merriweather', serif; color: #7b001f;
}
.vag-detail__content blockquote cite {
  font: 700 13px/18px 'Roboto Flex', sans-serif; color: #775a19;
  text-transform: uppercase; font-style: normal; letter-spacing: .04em;
}

/* Bảng thông tin bên phải */
.vag-detail__panel {
  background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px; padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.vag-detail__panel h2 {
  margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid #dfe4df;
  font: 700 18px/26px 'Merriweather', serif; color: #7b001f; text-transform: uppercase;
}
.vag-detail__panel dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.vag-detail__panel dt {
  display: flex; align-items: center; gap: 6px;
  font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-detail__panel dt .vag-ms { font-size: 16px; color: #7b001f; }
.vag-detail__panel dd {
  margin: 2px 0 0 22px;
  font: 600 15px/22px 'Roboto Flex', sans-serif; color: #181d1a;
}
.vag-detail__back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  padding: 10px 16px; border-radius: 2px; background: #ebefea; color: #7b001f;
  text-decoration: none; font: 500 13px/18px 'Roboto Flex', sans-serif;
}
.vag-detail__back:hover { background: #7b001f; color: #ffffff; }
.vag-detail__back .vag-ms { font-size: 16px; color: inherit; }

.vag-detail .vag-ms {
  font-family: 'Material Symbols Outlined'; line-height: 1; display: inline-block;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media (max-width: 767px) {
  .vag-detail__head h1 { font-size: 26px; line-height: 34px; }
  .vag-detail__body { padding-top: 24px; padding-bottom: 48px; }
  .vag-detail__inner { padding-left: 16px; padding-right: 16px; }
}
/* =================================================================
   TRANG HỘI VIÊN
   ================================================================= */

/* Ô tìm kiếm hội viên */
.vag-hvfilter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vag-hvsearch { position: relative; margin: 0; }
.vag-hvsearch input[type="text"] {
  width: 288px; max-width: 100%; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid #dfe4df; border-radius: 4px; background: #ffffff; color: #181d1a;
  font: 400 12px/18px 'Roboto Flex', sans-serif;
}
.vag-hvsearch input[type="text"]:focus { outline: none; border-color: #7b001f; }
.vag-hvsearch .vag-ms {
  position: absolute; left: 10px; top: 11px; font-size: 18px; color: #594141;
  pointer-events: none; font-family: 'Material Symbols Outlined'; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 767px) {
  .vag-hvfilter, .vag-hvsearch { width: 100%; }
  .vag-hvsearch input[type="text"] { width: 100%; }
}

.vag-anchor { scroll-margin-top: 150px; }

/* --- Ba lưới đều dùng chung dáng thẻ --- */
.vag-hvgrid .eael-post-grid,
.vag-hvbiz .eael-post-grid,
.vag-hvartisan .eael-post-grid {
  height: auto !important; position: static !important; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 16px;
}
.vag-hvgrid .eael-grid-post,
.vag-hvbiz .eael-grid-post,
.vag-hvartisan .eael-grid-post {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.vag-hvgrid .eael-post-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vag-hvbiz .eael-post-grid      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vag-hvartisan .eael-post-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .vag-hvgrid .eael-post-grid,
  .vag-hvbiz .eael-post-grid,
  .vag-hvartisan .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Điện thoại giữ 2 thẻ mỗi hàng */
@media (max-width: 767px) {
  .vag-hvgrid .eael-post-grid,
  .vag-hvbiz .eael-post-grid,
  .vag-hvartisan .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.vag-hvgrid .eael-grid-post-holder,
.vag-hvbiz .eael-grid-post-holder,
.vag-hvartisan .eael-grid-post-holder {
  height: 100%; background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .2s, border-color .2s;
}
.vag-hvgrid .eael-grid-post-holder:hover,
.vag-hvbiz .eael-grid-post-holder:hover,
.vag-hvartisan .eael-grid-post-holder:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.10); border-color: #7b001f;
}
.vag-hvgrid .eael-grid-post-holder-inner,
.vag-hvbiz .eael-grid-post-holder-inner,
.vag-hvartisan .eael-grid-post-holder-inner { display: flex; flex-direction: column; height: 100%; }

/* Ảnh chân dung */
.vag-hvgrid .eael-entry-media,
.vag-hvartisan .eael-entry-media { position: relative; }
.vag-hvgrid .eael-entry-thumbnail,
.vag-hvartisan .eael-entry-thumbnail { height: 220px; overflow: hidden; }
.vag-hvgrid .eael-entry-thumbnail img,
.vag-hvartisan .eael-entry-thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s;
}
.vag-hvgrid .eael-grid-post-holder:hover .eael-entry-thumbnail img,
.vag-hvartisan .eael-grid-post-holder:hover .eael-entry-thumbnail img { transform: scale(1.04); }
.vag-hvbiz .eael-entry-media { display: none; }

/* Nhãn nhóm hội viên */
.vag-hvgrid .post-carousel-categories,
.vag-hvartisan .post-carousel-categories,
.vag-hvbiz .post-carousel-categories {
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2;
}
.vag-hvgrid .post-carousel-categories,
.vag-hvartisan .post-carousel-categories { position: absolute; top: 10px; left: 10px; }
.vag-hvbiz .post-carousel-categories { position: static; margin-bottom: 8px; }
.vag-hvgrid .post-carousel-categories a,
.vag-hvartisan .post-carousel-categories a {
  display: inline-block; padding: 3px 8px; border-radius: 2px;
  background: rgba(255,255,255,.94); color: #7b001f; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.vag-hvbiz .post-carousel-categories a {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  background: #ebefea; color: #7b001f; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
}

/* Khối chữ */
.vag-hvgrid .eael-entry-wrapper,
.vag-hvbiz .eael-entry-wrapper,
.vag-hvartisan .eael-entry-wrapper {
  display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px;
}
.vag-hvgrid .eael-entry-title,
.vag-hvbiz .eael-entry-title,
.vag-hvartisan .eael-entry-title { margin: 0; font: 700 18px/26px 'Merriweather', serif; }
.vag-hvgrid .eael-entry-title a,
.vag-hvbiz .eael-entry-title a,
.vag-hvartisan .eael-entry-title a { color: #181d1a; text-decoration: none; }
.vag-hvgrid .eael-entry-title a:hover,
.vag-hvbiz .eael-entry-title a:hover,
.vag-hvartisan .eael-entry-title a:hover { color: #7b001f; }
.vag-hvgrid .eael-entry-content,
.vag-hvbiz .eael-entry-content,
.vag-hvartisan .eael-entry-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-hvgrid .eael-grid-post-excerpt,
.vag-hvbiz .eael-grid-post-excerpt,
.vag-hvartisan .eael-grid-post-excerpt { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-hvgrid .eael-grid-post-excerpt p,
.vag-hvbiz .eael-grid-post-excerpt p,
.vag-hvartisan .eael-grid-post-excerpt p {
  margin: 8px 0 0; font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-hvgrid a.eael-post-elements-readmore-btn,
.vag-hvbiz a.eael-post-elements-readmore-btn,
.vag-hvartisan a.eael-post-elements-readmore-btn {
  margin-top: 12px; padding: 8px 0 0; width: 100%; text-align: right; text-decoration: none;
  border-top: 1px solid #dfe4df; color: #7b001f !important;
  font: 500 12px/18px 'Roboto Flex', sans-serif;
}
.vag-hvgrid a.eael-post-elements-readmore-btn::after,
.vag-hvbiz a.eael-post-elements-readmore-btn::after,
.vag-hvartisan a.eael-post-elements-readmore-btn::after { content: ' ›'; }
.vag-hvgrid .eael-entry-overlay,
.vag-hvbiz .eael-entry-overlay,
.vag-hvartisan .eael-entry-overlay { display: none !important; }
/* =================================================================
   TRANG BẢO TÀNG ĐÁ QUÝ
   ================================================================= */

*:has(> svg.e-fas-search)::before { content: 'search'; }

/* Chữ trên nền tối luôn sáng */
.vag-bthero .elementor-heading-title,
.vag-btexpo .elementor-heading-title,
.vag-btcol .elementor-heading-title { color: inherit; }
.vag-bthero, .vag-btexpo, .vag-btcol { color: #edf2ed; }

/* Ô tìm kiếm mẫu vật */
.vag-btfilter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vag-btsearch { position: relative; margin: 0; }
.vag-btsearch input[type="text"] {
  width: 320px; max-width: 100%; height: 44px; padding: 0 12px 0 36px;
  border: 1px solid #dfe4df; border-radius: 4px; background: #ffffff; color: #181d1a;
  font: 400 13px/18px 'Roboto Flex', sans-serif;
}
.vag-btsearch input[type="text"]:focus { outline: none; border-color: #7b001f; }
.vag-btsearch .vag-ms {
  position: absolute; left: 10px; top: 13px; font-size: 18px; color: #594141;
  pointer-events: none; font-family: 'Material Symbols Outlined'; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 767px) {
  .vag-btfilter, .vag-btsearch { width: 100%; }
  .vag-btsearch input[type="text"] { width: 100%; }
}

/* --- Lưới mẫu vật --- */
.vag-btgrid .eael-post-grid {
  height: auto !important; position: static !important; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.vag-btgrid .eael-grid-post {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
@media (max-width: 1024px) { .vag-btgrid .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .vag-btgrid .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.vag-btgrid .eael-grid-post-holder {
  height: 100%; background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s;
}
.vag-btgrid .eael-grid-post-holder:hover { box-shadow: 0 4px 10px rgba(0,0,0,.10); }
.vag-btgrid .eael-grid-post-holder-inner { display: flex; flex-direction: column; height: 100%; }
.vag-btgrid .eael-entry-media { position: relative; }
.vag-btgrid .eael-entry-thumbnail { aspect-ratio: 4 / 3; overflow: hidden; background: #2c322e; }
.vag-btgrid .eael-entry-thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s;
}
.vag-btgrid .eael-grid-post-holder:hover .eael-entry-thumbnail img { transform: scale(1.05); }
.vag-btgrid .eael-entry-overlay { display: none !important; }
.vag-btgrid .post-carousel-categories {
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  position: absolute; top: 10px; left: 10px; z-index: 2;
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.vag-btgrid .post-carousel-categories a {
  display: inline-block; padding: 3px 8px; border-radius: 2px;
  background: rgba(123,0,31,.92); color: #ffffff; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase;
}
.vag-btgrid .eael-entry-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px; }
.vag-btgrid .eael-entry-title { margin: 0; font: 700 18px/26px 'Merriweather', serif; }
.vag-btgrid .eael-entry-title a { color: #7b001f; text-decoration: none; }
.vag-btgrid .eael-entry-title a:hover { color: #9e1b32; }
.vag-btgrid .eael-entry-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-btgrid .eael-grid-post-excerpt { display: flex; flex-direction: column; flex: 1 1 auto; }
.vag-btgrid .eael-grid-post-excerpt p {
  margin: 8px 0 0; font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-btgrid a.eael-post-elements-readmore-btn {
  margin-top: 12px; padding: 8px 0 0; width: 100%; text-align: right; text-decoration: none;
  border-top: 1px solid #dfe4df; color: #7b001f !important;
  font: 500 12px/18px 'Roboto Flex', sans-serif;
}
.vag-btgrid a.eael-post-elements-readmore-btn::after { content: ' ›'; }
/* =================================================================
   TRANG THƯ VIỆN
   ================================================================= */

*:has(> svg.e-fas-images)::before { content: 'photo_library'; }

/* Ô tìm kiếm tư liệu */
.vag-tvfilter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vag-tvsearch { position: relative; margin: 0; }
.vag-tvsearch input[type="text"] {
  width: 288px; max-width: 100%; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid #dfe4df; border-radius: 4px; background: #ffffff; color: #181d1a;
  font: 400 12px/18px 'Roboto Flex', sans-serif;
}
.vag-tvsearch input[type="text"]:focus { outline: none; border-color: #7b001f; }
.vag-tvsearch .vag-ms {
  position: absolute; left: 10px; top: 11px; font-size: 18px; color: #594141;
  pointer-events: none; font-family: 'Material Symbols Outlined'; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 767px) {
  .vag-tvfilter, .vag-tvsearch { width: 100%; }
  .vag-tvsearch input[type="text"] { width: 100%; }
}

/* --- Bốn lưới tư liệu dùng chung dáng thẻ --- */
.vag-tvalbum .eael-post-grid, .vag-tvvideo .eael-post-grid,
.vag-tvdoc .eael-post-grid,   .vag-tvmag .eael-post-grid {
  height: auto !important; position: static !important; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 16px;
}
.vag-tvalbum .eael-grid-post, .vag-tvvideo .eael-grid-post,
.vag-tvdoc .eael-grid-post,   .vag-tvmag .eael-grid-post {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.vag-tvalbum .eael-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vag-tvvideo .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vag-tvdoc .eael-post-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vag-tvmag .eael-post-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .vag-tvalbum .eael-post-grid, .vag-tvvideo .eael-post-grid,
  .vag-tvdoc .eael-post-grid,   .vag-tvmag .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vag-tvalbum .eael-post-grid, .vag-tvvideo .eael-post-grid,
  .vag-tvdoc .eael-post-grid,   .vag-tvmag .eael-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
}

.vag-tvalbum .eael-grid-post-holder, .vag-tvvideo .eael-grid-post-holder,
.vag-tvdoc .eael-grid-post-holder,   .vag-tvmag .eael-grid-post-holder {
  height: 100%; background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s;
}
.vag-tvalbum .eael-grid-post-holder:hover, .vag-tvvideo .eael-grid-post-holder:hover,
.vag-tvdoc .eael-grid-post-holder:hover,   .vag-tvmag .eael-grid-post-holder:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.vag-tvalbum .eael-grid-post-holder-inner, .vag-tvvideo .eael-grid-post-holder-inner,
.vag-tvdoc .eael-grid-post-holder-inner,   .vag-tvmag .eael-grid-post-holder-inner {
  display: flex; flex-direction: column; height: 100%;
}

.vag-tvalbum .eael-entry-media, .vag-tvvideo .eael-entry-media,
.vag-tvdoc .eael-entry-media,   .vag-tvmag .eael-entry-media { position: relative; }
.vag-tvalbum .eael-entry-thumbnail { aspect-ratio: 4 / 3; overflow: hidden; }
.vag-tvvideo .eael-entry-thumbnail { aspect-ratio: 16 / 9; overflow: hidden; }
.vag-tvdoc .eael-entry-thumbnail,
.vag-tvmag .eael-entry-thumbnail   { aspect-ratio: 3 / 2; overflow: hidden; }
.vag-tvalbum .eael-entry-thumbnail img, .vag-tvvideo .eael-entry-thumbnail img,
.vag-tvdoc .eael-entry-thumbnail img,   .vag-tvmag .eael-entry-thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s;
}
.vag-tvalbum .eael-grid-post-holder:hover .eael-entry-thumbnail img,
.vag-tvvideo .eael-grid-post-holder:hover .eael-entry-thumbnail img,
.vag-tvdoc .eael-grid-post-holder:hover .eael-entry-thumbnail img,
.vag-tvmag .eael-grid-post-holder:hover .eael-entry-thumbnail img { transform: scale(1.05); }
.vag-tvalbum .eael-entry-overlay, .vag-tvvideo .eael-entry-overlay,
.vag-tvdoc .eael-entry-overlay,   .vag-tvmag .eael-entry-overlay { display: none !important; }

/* Nhãn loại tư liệu trên ảnh */
.vag-tvalbum .post-carousel-categories, .vag-tvvideo .post-carousel-categories,
.vag-tvdoc .post-carousel-categories,   .vag-tvmag .post-carousel-categories {
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  position: absolute; top: 10px; left: 10px; z-index: 2;
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.vag-tvalbum .post-carousel-categories a, .vag-tvvideo .post-carousel-categories a,
.vag-tvdoc .post-carousel-categories a,   .vag-tvmag .post-carousel-categories a {
  display: inline-block; padding: 3px 8px; border-radius: 2px;
  background: rgba(255,255,255,.94); color: #7b001f; text-decoration: none;
  font: 700 11px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .055em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Dấu play trên thẻ video */
.vag-tvvideo .eael-entry-media::after {
  content: 'play_circle'; font-family: 'Material Symbols Outlined';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: rgba(255,255,255,.92); text-shadow: 0 2px 12px rgba(0,0,0,.45);
  pointer-events: none;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* Khối chữ */
.vag-tvalbum .eael-entry-wrapper, .vag-tvvideo .eael-entry-wrapper,
.vag-tvdoc .eael-entry-wrapper,   .vag-tvmag .eael-entry-wrapper {
  display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px;
}
.vag-tvalbum .eael-entry-header-after, .vag-tvvideo .eael-entry-header-after,
.vag-tvdoc .eael-entry-header-after,   .vag-tvmag .eael-entry-header-after { order: 1; margin-bottom: 6px; }
.vag-tvalbum .eael-entry-header, .vag-tvvideo .eael-entry-header,
.vag-tvdoc .eael-entry-header,   .vag-tvmag .eael-entry-header { order: 2; }
.vag-tvalbum .eael-entry-content, .vag-tvvideo .eael-entry-content,
.vag-tvdoc .eael-entry-content,   .vag-tvmag .eael-entry-content {
  order: 3; display: flex; flex-direction: column; flex: 1 1 auto;
}
.vag-tvalbum .eael-entry-meta, .vag-tvvideo .eael-entry-meta,
.vag-tvdoc .eael-entry-meta,   .vag-tvmag .eael-entry-meta { display: flex; margin: 0; }
.vag-tvalbum .eael-posted-on, .vag-tvvideo .eael-posted-on,
.vag-tvdoc .eael-posted-on,   .vag-tvmag .eael-posted-on {
  font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-tvalbum .eael-posted-on::before, .vag-tvvideo .eael-posted-on::before,
.vag-tvdoc .eael-posted-on::before,   .vag-tvmag .eael-posted-on::before {
  content: 'calendar_today'; font-family: 'Material Symbols Outlined'; font-size: 14px;
  line-height: 1; color: #7b001f; margin-right: 4px; vertical-align: -2px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vag-tvalbum .eael-entry-title, .vag-tvvideo .eael-entry-title,
.vag-tvdoc .eael-entry-title,   .vag-tvmag .eael-entry-title {
  margin: 0; font: 700 18px/26px 'Merriweather', serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-tvalbum .eael-entry-title a, .vag-tvvideo .eael-entry-title a,
.vag-tvdoc .eael-entry-title a,   .vag-tvmag .eael-entry-title a { color: #181d1a; text-decoration: none; }
.vag-tvalbum .eael-entry-title a:hover, .vag-tvvideo .eael-entry-title a:hover,
.vag-tvdoc .eael-entry-title a:hover,   .vag-tvmag .eael-entry-title a:hover { color: #7b001f; }
.vag-tvalbum .eael-grid-post-excerpt, .vag-tvvideo .eael-grid-post-excerpt,
.vag-tvdoc .eael-grid-post-excerpt,   .vag-tvmag .eael-grid-post-excerpt {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.vag-tvalbum .eael-grid-post-excerpt p, .vag-tvvideo .eael-grid-post-excerpt p,
.vag-tvdoc .eael-grid-post-excerpt p,   .vag-tvmag .eael-grid-post-excerpt p {
  margin: 8px 0 0; font: 400 12px/18px 'Roboto Flex', sans-serif; color: #594141;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vag-tvalbum a.eael-post-elements-readmore-btn, .vag-tvvideo a.eael-post-elements-readmore-btn,
.vag-tvdoc a.eael-post-elements-readmore-btn,   .vag-tvmag a.eael-post-elements-readmore-btn {
  margin-top: 12px; padding: 8px 0 0; width: 100%; text-align: right; text-decoration: none;
  border-top: 1px solid #dfe4df; color: #7b001f !important;
  font: 500 12px/18px 'Roboto Flex', sans-serif;
}
.vag-tvalbum a.eael-post-elements-readmore-btn::after, .vag-tvvideo a.eael-post-elements-readmore-btn::after,
.vag-tvdoc a.eael-post-elements-readmore-btn::after,   .vag-tvmag a.eael-post-elements-readmore-btn::after { content: ' ›'; }
/* =================================================================
   TRANG LIÊN HỆ (bản dựng theo thiết kế mới)
   ================================================================= */

*:has(> svg.e-fas-comments)::before { content: 'forum'; }
*:has(> svg.e-fas-map)::before      { content: 'map'; }

/* Chữ trên dải ruby luôn sáng */
.vag-lhhot { color: #ffffff; }

/* Khối giám định nền xanh đậm */
.vag-lhgiamdinh .elementor-heading-title { color: inherit; }

/* Khung bản đồ */
.vag-lhmapframe { line-height: 0; }
.vag-lhmapframe iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 767px) { .vag-lhmapframe iframe { height: 300px; } }

/* Biểu mẫu Contact Form 7 trong thẻ trắng */
.vag-lhform .wpcf7 { margin: 0; }
.vag-lhform .wpcf7 p { margin: 0 0 14px; }
.vag-lhform .wpcf7 label { display: block; font: 500 13px/18px 'Roboto Flex', sans-serif; color: #181d1a; }
.vag-lhform .wpcf7 input[type="submit"] { min-width: 200px; }
/* =================================================================
   TINH CHỈNH CHUNG CUỐI CÙNG
   1) Chữ trên nền tối luôn sáng
   2) Điện thoại: các lưới danh sách giữ 2 thẻ mỗi hàng
   ================================================================= */

/* ---- 1. Chữ trên nền tối ---- */
.vag-gt-hero .elementor-heading-title,
.vag-lookup .elementor-heading-title,
.vag-bthero .elementor-heading-title,
.vag-btexpo .elementor-heading-title,
.vag-btcol .elementor-heading-title,
.vag-lhhot .elementor-heading-title,
.vag-lhgiamdinh .elementor-heading-title,
.vag-presphoto .elementor-heading-title { color: inherit; }

.vag-gt-hero, .vag-lookup, .vag-bthero, .vag-btexpo,
.vag-btcol, .vag-lhhot, .vag-lhgiamdinh { color: #edf2ed; }

/* Đoạn văn trong các khối nền tối không được để màu chữ tối */
.vag-bthero .elementor-widget-text-editor,
.vag-btexpo .elementor-widget-text-editor,
.vag-btcol .elementor-widget-text-editor,
.vag-lhhot .elementor-widget-text-editor { color: #edf2ed; }

/* Liên kết trên nền tối */
.vag-bthero a, .vag-btexpo a, .vag-btcol a,
.vag-lhhot a, .vag-lhgiamdinh a { color: #ffdea5; }

/* ---- 2. Điện thoại: 2 thẻ mỗi hàng ---- */
@media (max-width: 767px) {
  /* Tin tức */
  .vag-newsgrid .eael-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  /* Chuyên ngành */
  .vag-cnlist .eael-post-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }

  /* Chữ trong thẻ nhỏ lại cho vừa hai cột */
  .vag-newsgrid .eael-entry-title,
  .vag-cnlist .eael-entry-title,
  .vag-dngrid .eael-entry-title,
  .vag-hvgrid .eael-entry-title,
  .vag-hvbiz .eael-entry-title,
  .vag-hvartisan .eael-entry-title,
  .vag-btgrid .eael-entry-title,
  .vag-tvalbum .eael-entry-title,
  .vag-tvvideo .eael-entry-title,
  .vag-tvdoc .eael-entry-title,
  .vag-tvmag .eael-entry-title { font-size: 14px; line-height: 21px; }

  .vag-newsgrid .eael-entry-wrapper,
  .vag-dngrid .eael-grid-post-holder-inner,
  .vag-hvgrid .eael-entry-wrapper,
  .vag-hvbiz .eael-entry-wrapper,
  .vag-hvartisan .eael-entry-wrapper,
  .vag-btgrid .eael-entry-wrapper,
  .vag-tvalbum .eael-entry-wrapper,
  .vag-tvvideo .eael-entry-wrapper,
  .vag-tvdoc .eael-entry-wrapper,
  .vag-tvmag .eael-entry-wrapper { padding: 12px; }

  .vag-newsgrid .eael-grid-post-excerpt p,
  .vag-cnlist .eael-grid-post-excerpt p { font-size: 12px; line-height: 18px; }

  /* Ban Chấp hành: thẻ thành viên cũng 2 cột */
  .vag-mgrid { gap: 12px !important; }
  .vag-mcard { width: 48.5% !important; }
  .vag-mcard .vag-mname { font-size: 15px !important; line-height: 22px !important; }
  .vag-mphoto { min-height: 180px !important; }

  /* Bộ sưu tập bảo tàng và ô số liệu giữ 2 cột */
  .vag-btcol { width: 48.5% !important; }
}
/* =================================================================
   HEADER VÀ MENU TRÊN ĐIỆN THOẠI / MÁY TÍNH BẢNG
   Màn hẹp thu gọn header: chỉ còn logo và hai nút tròn ở hàng trên;
   hàng dưới là nút mở menu bên trái và nút "Gia nhập Hội" bên phải.
   Bảng menu bung ra tràn ngang cả màn hình, không đè lệch nội dung.
   ================================================================= */
@media (max-width: 1024px) {
  body.ehf-header #masthead { position: relative; }
  body.ehf-header #masthead .vag-hdr-contact { display: none !important; }
  body.ehf-header #masthead .vag-hdr-search  { display: none !important; }
  body.ehf-header #masthead .vag-hdr-logo    { width: 74% !important; }
  body.ehf-header #masthead .vag-hdr-acts    { width: 24% !important; }
  body.ehf-header #masthead .vag-hdracts     { justify-content: flex-end; }

  /* Biểu tượng ba gạch: vẽ thẳng bằng ký hiệu Material, không dựa vào bộ chọn :has
     vì thẻ svg của plugin nằm sâu hơn một cấp nên quy tắc chung không bắt được. */
  body.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon svg { display: none !important; }
  body.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon::before {
    content: 'menu'; font-family: 'Material Symbols Outlined'; font-size: 22px;
    line-height: 1; color: #ffffff; display: block;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  body.ehf-header #masthead .hfe-nav-menu__toggle.hfe-menu-toggle-open .hfe-nav-menu-icon::before { content: 'close'; }

  /* Nút mở menu nằm sát lề trái, nút Gia nhập Hội sát lề phải */
  body.ehf-header #masthead .vag-navcol  { align-items: flex-start !important; }
  body.ehf-header #masthead .vag-joincol { align-items: flex-end !important; }

  /* Nút mở menu và nút "Gia nhập Hội" phải cao bằng nhau thì thanh mới cân:
     trước đó một bên 40px, một bên 30px nên nhìn lệch hẳn. */
  body.ehf-header #masthead .hfe-nav-menu__toggle {
    width: 36px !important; height: 36px !important;
  }
  body.ehf-header #masthead .vag-joincol .elementor-button {
    min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    padding-top: 0 !important; padding-bottom: 0 !important;
  }

  /* --- Bảng menu bung ra tràn ngang ---
     Header Footer Elementor đặt thẻ <nav> ở position:absolute, nhưng gốc định vị
     của nó lại là ô widget rộng 40px nên bảng menu bị bó lại. Ở đây bỏ định vị
     của cột menu, ô widget và hàng chứa nó, để <nav> lấy chính thanh điều hướng
     làm gốc — nhờ vậy bảng menu trải hết chiều ngang màn hình. */
  body.ehf-header #masthead .vag-navcol,
  body.ehf-header #masthead .vag-navcol .elementor-widget,
  body.ehf-header #masthead .e-con:has(> .vag-navcol) { position: static !important; }
  body.ehf-header #masthead nav.hfe-nav-menu__layout-horizontal {
    position: absolute !important; left: 0 !important; right: 0 !important;
    top: 100% !important; width: auto !important; z-index: 999;
  }
  body.ehf-header #masthead .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    position: static; z-index: 999;
    /* Widget đặt sẵn bề rộng 240px cho menu con; trên điện thoại phải ép tràn ngang */
    width: 100% !important; max-width: none !important; min-width: 0;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    background: #7b001f; padding: 4px 0 8px; margin: 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    max-height: calc(100vh - 132px); overflow-y: auto;
  }
  body.ehf-header #masthead .hfe-nav-menu > li.menu-item { display: block; width: 100%; }
  body.ehf-header #masthead .hfe-nav-menu > li .hfe-has-submenu-container { display: block; }
  body.ehf-header #masthead .hfe-nav-menu > li a.hfe-menu-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: auto; border-radius: 0 !important;
    padding: 13px 16px !important;
    font-size: 13px; line-height: 18px;
    /* Plugin gán nền trắng cho mục menu con; trên điện thoại phải gỡ đi,
       nếu không chữ vàng nhạt nằm trên nền trắng sẽ không đọc được. */
    background-color: transparent !important; color: #ffdea5 !important;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  body.ehf-header #masthead .hfe-nav-menu > li a.hfe-menu-item:hover,
  body.ehf-header #masthead .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
  body.ehf-header #masthead .hfe-nav-menu > li .hfe-has-submenu-container
    > a.hfe-menu-item.hfe-menu-item-current {
    background-color: #9e1b32 !important; color: #ffffff !important;
  }

  /* Menu con: nền sẫm hơn, thụt vào cho rõ cấp */
  body.ehf-header #masthead .hfe-nav-menu .sub-menu {
    position: static !important; width: 100% !important; min-width: 0 !important;
    background: #5f0018; box-shadow: none; border-radius: 0; padding: 0;
    transform: none !important;
  }
  body.ehf-header #masthead .hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
    padding: 11px 16px 11px 32px !important;
    font-size: 12px; line-height: 18px;
    background-color: transparent !important; color: #f3dcdc !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  body.ehf-header #masthead .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover {
    background-color: #7b001f !important; color: #ffffff !important;
  }
  /* Mũi tên mở menu con canh phải */
  body.ehf-header #masthead .hfe-nav-menu .sub-arrow { margin-left: auto !important; }
}

@media (max-width: 767px) {
  /* Dòng slogan ẩn đi, hai dòng tên rút cỡ chữ để không xuống nhiều dòng */
  body.ehf-header #masthead .vag-hdr-logo .elementor-widget-text-editor { display: none; }
  body.ehf-header #masthead .vag-hdr-logo .elementor-heading-title {
    font-size: 13px !important; line-height: 17px !important; letter-spacing: 0 !important;
  }
  body.ehf-header #masthead .vag-hdr-logo .elementor-widget-heading
    + .elementor-widget-heading .elementor-heading-title {
    font-size: 9px !important; line-height: 12px !important;
  }
  body.ehf-header #masthead .vag-hdr-logo { width: 76% !important; }
  body.ehf-header #masthead .vag-hdr-acts { width: 22% !important; }
  body.ehf-header #masthead .vag-hdr-logo .elementor-widget-image img { max-width: 40px; height: auto; }
  body.ehf-header #masthead .vag-hdracts__btn { width: 32px; height: 32px; }

  /* Logo và hai nút tròn giữ trên cùng một hàng */
  body.ehf-header #masthead .e-con:has(> .vag-hdr-logo) { flex-wrap: nowrap !important; }
}

/* =================================================================
   CHÂN TRANG TRÊN ĐIỆN THOẠI
   Khối nhận diện canh trái; hai cột liên kết xếp cạnh nhau; hàng nút
   mạng xã hội giữ trên một dòng; chừa chỗ cho nút nổi ở góc phải.
   ================================================================= */
@media (max-width: 767px) {
  /* Cột 1 (nhận diện) và cột 4 (trụ sở) tràn ngang;
     cột 2 và cột 3 (hai danh sách liên kết) đứng cạnh nhau */
  .vag-ftrow > .e-con:nth-child(2),
  .vag-ftrow > .e-con:nth-child(3) { width: 48% !important; }

  /* Khối nhận diện: ô biểu trưng giữ 46px, tên Hội chiếm phần còn lại và canh trái.
     Nếu để hai ô tự chia đôi thì tên Hội bị đẩy sang giữa và xuống dòng. */
  .vag-ftbrand > .e-con:first-child { width: 46px !important; flex: 0 0 46px !important; }
  .vag-ftbrand > .e-con:last-child  { width: auto !important; flex: 1 1 auto !important; }
  .vag-ftbrand .elementor-heading-title { text-align: left !important; }

  /* Khi bốn khối chân trang xếp chồng, khe 12px của hàng làm tiêu đề khối sau
     dính sát nội dung khối trước. Chỉ nới khe dọc ra 28px.
     Đừng đụng vào khe ngang: hai cột liên kết đặt 48% mỗi cột, cộng khe 12px là
     vừa khít bề ngang; nới lên 16px là chúng rớt xuống thành hai hàng. */
  .vag-ftrow { row-gap: 28px !important; }

  /* Hàng "Kênh truyền thông" giữ một dòng */
  .vag-ftrow .elementor-widget-social-icons .elementor-social-icons-wrapper {
    flex-wrap: nowrap; justify-content: flex-start;
  }

}

/* Từ 1024px trở xuống hai khối cuối chân trang xếp chồng, nên dòng liên kết
   phải canh trái cho thẳng với dòng bản quyền ở trên. */
@media (max-width: 1024px) {
  .ehf-footer .elementor-widget-text-editor span[style*="text-align:right"],
  footer .elementor-widget-text-editor span[style*="text-align:right"] {
    text-align: left !important; display: block;
  }
  .ehf-footer .vag-actcol, footer .vag-actcol {
    width: 100% !important; align-items: flex-start !important;
  }
}
/* =================================================================
   TẮT HIỆU ỨNG TRƯỢT CỦA WIDGET POST GRID
   Essential Addons đặt "transition: all" lên thẻ bài rồi dùng JavaScript
   ghi toạ độ left/top vào thuộc tính style. Khi script chạy xong, trình duyệt
   chạy hiệu ứng cho thay đổi đó nên các thẻ trông như trượt từ phải vào.
   Ở đây tắt hẳn transition trên thẻ và giữ hiệu ứng đổ bóng ở lớp bên trong.
   ================================================================= */
.eael-grid-post,
.eael-post-grid > * {
  transition: none !important; animation: none !important;
  transform: none !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
}
.eael-grid-post .eael-grid-post-holder { transition: box-shadow .2s, border-color .2s; }
/* Ảnh vẫn được phóng nhẹ khi rê chuột */
.eael-grid-post .eael-entry-thumbnail img { transition: transform .5s !important; }
/* =================================================================
   TINH CHỈNH BỐ CỤC TRÊN ĐIỆN THOẠI (đợt 2)
   Các khối "tiêu đề bên trái – liên kết bên phải" trên màn hẹp phải
   dồn hết về lề trái, không để liên kết treo lơ lửng giữa khoảng trống.
   ================================================================= */
@media (max-width: 767px) {

  /* --- Đầu khối: liên kết / nút "Xem tất cả" về sát lề trái --- */
  .vag-sechead { flex-direction: column; align-items: flex-start !important; gap: 12px; }
  .vag-sechead__more {
    width: 100% !important;
    align-items: flex-start !important; justify-content: flex-start !important;
  }
  .vag-sechead__more p,
  .vag-sechead__more .elementor-widget-text-editor { text-align: left !important; }
  .vag-sechead__more .elementor-widget-button,
  .vag-sechead__more .elementor-button-wrapper { text-align: left !important; }

  /* --- Cột chứa nút hành động (canh phải trên desktop) về lề trái --- */
  .vag-actcol {
    width: 100% !important;
    align-items: flex-start !important; justify-content: flex-start !important;
  }
  .vag-actcol .elementor-button-wrapper { text-align: left !important; }

  /* --- Khối Chủ tịch: ảnh và tên một hàng, nút xuống dòng dưới --- */
  .vag-pres-sign { flex-wrap: wrap !important; }
  .vag-pres-sign > .e-con:nth-child(2) { width: calc(100% - 76px) !important; }
  .vag-pres-sign > .e-con:nth-child(3) {
    width: 100% !important; align-items: flex-start !important; margin-top: 4px;
  }
  .vag-pres-sign > .e-con:nth-child(3) .elementor-button { width: 100%; text-align: center; }

  /* --- Chân trang: dòng liên kết cuối canh trái, chừa chỗ cho nút nổi --- */
  .ehf-footer .elementor-widget-text-editor span[style*="text-align:right"],
  footer .elementor-widget-text-editor span[style*="text-align:right"] {
    text-align: left !important; display: block;
  }
  .ehf-footer .elementor-widget-text-editor span[style*="text-align:right"] { padding-right: 56px; }
}
/* =================================================================
   Ô CÓ BỀ RỘNG CỐ ĐỊNH — LƯỚI AN TOÀN
   Elementor tự đặt --width: 100% cho container ở khổ máy tính bảng và
   điện thoại nếu không khai báo riêng, khiến chấm tròn, ô biểu tượng,
   ảnh chân dung bị kéo giãn. Các quy tắc dưới ghim lại đúng kích thước
   ở mọi khổ màn hình, phòng khi thiếu khai báo ở đâu đó.
   ================================================================= */

/* Mốc thời gian trang Giới thiệu */
.vag-tl-item { flex-wrap: nowrap !important; }
.vag-tl-dot {
  width: 20px !important; min-width: 20px !important; max-width: 20px !important;
  height: 20px; min-height: 20px; flex: 0 0 20px !important;
}
.vag-tl-item > .e-con:last-child { width: auto !important; flex: 1 1 auto !important; }

/* Ảnh chân dung Chủ tịch (Giới thiệu và Ban Chấp hành) */
.vag-presside { flex: 0 0 176px !important; max-width: 176px !important; }
@media (max-width: 767px) {
  .vag-presside { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Con dấu tròn cuối thông điệp Chủ tịch */
.vag-gt-card .e-con[class*="vag-"] { min-width: 0; }

/* Chữ cái đại diện trong Ban Chấp hành */
.vag-ava {
  width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  flex: 0 0 44px !important;
}

/* Vạch màu trước chữ dẫn ở trang Tin tức */
.vag-sechead .e-con[style], .vag-newsaccent { min-width: 0; }

/* =================================================================
   ĐẦU TRANG GIỚI THIỆU TRÊN ĐIỆN THOẠI
   ================================================================= */
@media (max-width: 767px) {

  /* Dòng phụ "VĂN KIỆN LƯU TRỮ CHÍNH THỨC • CẬP NHẬT..." chiếm ba dòng
     ngay dưới đường dẫn, đẩy tiêu đề xuống quá sâu. Khổ hẹp chỉ giữ
     đường dẫn, phần chú thích này ẩn đi. */
  .vag-crumbmeta { display: none !important; }

  /* Nhãn viên thuốc: biểu tượng phải đứng cùng dòng với chữ, không
     rớt xuống hàng riêng. Chữ tự xuống dòng bên phải biểu tượng. */
  .vag-pill { flex-wrap: nowrap !important; align-items: center !important; }
  .vag-pill > .elementor-widget-icon { flex: 0 0 auto !important; }
  .vag-pill > .elementor-widget-heading { min-width: 0 !important; }
  .vag-pill .elementor-heading-title { line-height: 1.35; }

  /* Ky hieu trong nhan cao 24px trong khi net ve chi 16px, khien no
     nam lech len tren so voi chu. Ep khoi ky hieu bam sat net ve. */
  .vag-pill .elementor-icon { line-height: 1; display: block; }
  .vag-pill > .elementor-widget-icon { display: flex; align-items: center; }

  /* Lưới năm ô số liệu ở đầu trang xếp hai ô mỗi hàng; ô thứ năm đứng
     lẻ nên cho tràn hết bề ngang thay vì bỏ trống nửa hàng. */
  .vag-herostats > .e-con:nth-child(5) { width: 100% !important; }
}
/* =================================================================
   THANH DIEU HUONG TRONG HEADER — CHIEU CAO TOI THIEU
   Chu site yeu cau ha thanh menu xuong 40px.
   Ma dinh danh 863b8fc do vid() sinh theo thu tu phan tu trong header
   (md5 cua so thu tu), nen no on dinh giua cac lan dung lai; nhung neu
   chen them widget vao truoc no trong vag-header.php thi ma se doi.
   ================================================================= */
.elementor-91 .elementor-element.elementor-element-863b8fc.e-con-boxed.e-flex.e-con.e-parent {
	--min-height: 40px !important;
}

/* =================================================================
   TRANG DANH SÁCH (chuyên mục, từ khoá, taxonomy, tìm kiếm)
   Lưới thẻ dùng lại nguyên bộ CSS .vag-newsgrid của trang Tin tức,
   nên ở đây chỉ cần định kiểu phần đầu trang, ô trống và phân trang.
   ================================================================= */

.vag-archive { background: #f6fbf5; }

.vag-archive__hero {
  background: linear-gradient(135deg, #7b001f 0%, #4a0013 100%);
  padding: 48px 0 44px;
}
.vag-archive__label {
  margin: 0 0 10px;
  font: 700 12px/16px 'Roboto Flex', sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: #ffdea5;
}
.vag-archive__title {
  margin: 0; color: #ffffff;
  font: 700 40px/50px 'Merriweather', serif;
}
.vag-archive__desc {
  margin: 14px 0 0; max-width: 760px;
  font: 400 16px/27px 'Roboto Flex', sans-serif; color: rgba(255,255,255,0.86);
}
.vag-archive__desc p { margin: 0; color: inherit; }
.vag-archive__count {
  margin: 18px 0 0;
  font: 500 13px/18px 'Roboto Flex', sans-serif;
  letter-spacing: .04em; color: #ffdea5;
}

.vag-archive__body { padding-top: 48px; padding-bottom: 72px; }

/* Bài chưa có ảnh đại diện: giữ đúng khung 16:10 để thẻ không cao thấp lệch nhau */
.vag-archive__nothumb {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, #e6ebe6 0%, #d3dbd3 100%);
}
.vag-archive__nothumb::after {
  content: 'diamond'; font-family: 'Material Symbols Outlined';
  font-size: 42px; color: #b9c2b9;
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* --- Phân trang --- */
.vag-archive__pager {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 48px;
}
.vag-archive__pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid #dfe4df; border-radius: 2px;
  background: #ffffff; color: #7b001f; text-decoration: none;
  font: 500 14px/1 'Roboto Flex', sans-serif;
}
.vag-archive__pager a.page-numbers:hover { background: #7b001f; color: #ffffff; border-color: #7b001f; }
.vag-archive__pager .page-numbers.current {
  background: #7b001f; color: #ffffff; border-color: #7b001f; font-weight: 700;
}
.vag-archive__pager .page-numbers.dots { border-color: transparent; background: none; }

/* --- Mục chưa có nội dung --- */
.vag-archive__empty {
  background: #ffffff; border: 1px solid #dfe4df; border-radius: 8px;
  padding: 56px 40px; text-align: center;
}
.vag-archive__empty p { margin: 0 0 10px; font: 400 15px/25px 'Roboto Flex', sans-serif; color: #594141; }
.vag-archive__empty-title {
  font: 700 22px/30px 'Merriweather', serif !important; color: #7b001f !important;
  margin-bottom: 12px !important;
}
.vag-archive__empty-links {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px !important;
}
.vag-archive__empty-links a {
  display: inline-block; padding: 9px 18px;
  border: 1px solid #7b001f; border-radius: 2px;
  color: #7b001f; text-decoration: none;
  font: 500 13px/18px 'Roboto Flex', sans-serif; letter-spacing: .04em;
}
.vag-archive__empty-links a:hover { background: #7b001f; color: #ffffff; }

@media (max-width: 767px) {
  .vag-archive__hero { padding: 32px 0 28px; }
  .vag-archive__title { font-size: 27px; line-height: 36px; }
  .vag-archive__desc { font-size: 15px; line-height: 25px; }
  .vag-archive__body { padding-top: 32px; padding-bottom: 48px; }
  .vag-archive__empty { padding: 36px 20px; }
  .vag-archive__empty-links { flex-direction: column; }
  .vag-archive__empty-links a { display: block; }
}
/* =================================================================
   MOC THOI GIAN TRANG LICH SU HINH THANH
   Lop rieng, khong dung chung voi .vag-tl-* cua trang Gioi thieu: ben do o
   dau tien la cham tron 20px va bi chot cung, dung lai se bop o nam lai.
   ================================================================= */
.vag-hist-item { flex-wrap: nowrap !important; }
.vag-hist-year {
  flex: 0 0 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}
.vag-hist-item > .e-con:last-child {
  flex: 1 1 auto !important; min-width: 0;
  position: relative;
}

/* Chấm tròn trên đường kẻ, ngang với dòng tiêu đề của mốc.
   Vẽ bằng ::before của ô chữ nên không cần thêm phần tử vào cấu trúc. */
.vag-hist-item > .e-con:last-child::before {
  content: ''; position: absolute; left: -6px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #7b001f; box-shadow: 0 0 0 3px #ffffff;
}

/* Mốc cuối: bỏ đoạn kẻ thừa thò xuống dưới dòng chữ cuối cùng */
.vag-hist-item:last-child > .e-con:last-child { padding-bottom: 0 !important; }

@media (max-width: 767px) {
  /* Khổ hẹp: năm nằm trên một dòng riêng, chữ mô tả tràn hết bề ngang */
  .vag-hist-item { flex-direction: column !important; }
  .vag-hist-year {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .vag-hist-item > .e-con:last-child { width: 100% !important; border-left-width: 0 !important; }
  .vag-hist-item > .e-con:last-child::before { display: none; }
}

/* =================================================================
   TRÌNH XEM VIDEO Ở TRANG CHI TIẾT TƯ LIỆU
   ================================================================= */

/* Khung 16:9 giữ đúng tỉ lệ dù nguồn nhúng trả về kích thước nào */
.vag-detail__video {
  position: relative;
  margin: 0 0 28px;
  border-radius: 8px;
  overflow: hidden;
  background: #12100f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  aspect-ratio: 16 / 9;
}
.vag-detail__video iframe,
.vag-detail__video video,
.vag-detail__video object,
.vag-detail__video embed {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0; display: block;
}
/* Trình nhúng của WordPress bọc thêm một lớp div, phải cho nó tràn khung */
.vag-detail__video > *:not(iframe):not(video) {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.vag-detail__videolink {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 24px;
  font: 500 15px/22px 'Roboto Flex', sans-serif;
}
.vag-detail__videolink a { color: #7b001f; }

/* Nhắc dành cho người quản trị, khách xem không thấy khối này */
.vag-detail__notice {
  margin: 0 0 24px; padding: 14px 18px;
  border: 1px dashed #b9871f; border-radius: 4px;
  background: #fff8e8; color: #6b4e0d;
  font: 400 14px/22px 'Roboto Flex', sans-serif;
}

/* --- Dấu play trên thẻ ở trang Thư viện video --- */
.vag-videogrid .eael-entry-thumbnail { position: relative; }
.vag-videogrid .eael-entry-thumbnail::after {
  content: 'play_arrow';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1;
  color: #ffffff;
  background: rgba(123, 0, 31, 0.86);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  pointer-events: none;
  transition: background .2s, transform .2s;
}
.vag-videogrid .eael-grid-post-holder:hover .eael-entry-thumbnail::after {
  background: #7b001f;
  transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 767px) {
  .vag-detail__video { border-radius: 4px; margin-bottom: 20px; }
  .vag-videogrid .eael-entry-thumbnail::after { width: 40px; height: 40px; font-size: 24px; }
}

/* =================================================================
   NHÃN CHUYÊN MỤC TRÊN ẢNH THẺ — GIỮ TRONG LÒNG THẺ
   Nhãn được đặt position:absolute ở góc trên trái ảnh, không có giới hạn
   bề rộng. Tên phân loại dài ("Sử liệu khoáng vật học", "Bảo vật hoàng gia
   & cổ vật") tràn khỏi thẻ, bị cắt ở mép hoặc xuống hai dòng che mất ảnh.
   ================================================================= */
.vag-newsgrid .post-carousel-categories {
  max-width: calc(100% - 24px);
  flex-wrap: nowrap;
  overflow: hidden;
}
.vag-newsgrid .post-carousel-categories li {
  min-width: 0;
  overflow: hidden;
}
.vag-newsgrid .post-carousel-categories a {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Khổ hẹp xếp hai thẻ mỗi hàng nên bề ngang chỉ còn khoảng 165px:
   thu nhỏ chữ và lề trong để nhãn còn đọc được thay vì chỉ thấy dấu ba chấm. */
@media (max-width: 767px) {
  .vag-newsgrid .post-carousel-categories { top: 8px; left: 8px; max-width: calc(100% - 16px); }
  .vag-newsgrid .post-carousel-categories a {
    padding: 2px 6px;
    font-size: 10px;
    letter-spacing: .03em;
  }
}

/* =================================================================
   KHỐI NHẬN DIỆN TRONG HEADER — TÊN HỘI GIỮ MỘT DÒNG
   Ô biểu trưng rộng 52px, ô tên Hội chiếm hết phần còn lại. Nếu để hai ô
   tự chia thì trên điện thoại mỗi ô được 122px, tên Hội phải gãy thành
   "HỘI ĐÁ QUÝ VIỆT" / "NAM". Tên cần 151px, dòng phụ cần 172px, chừa đủ
   193px là vừa.
   ================================================================= */
.vag-brand { flex-wrap: nowrap !important; }

/* Bieu trung va ten Hoi la lien ket ve trang chu. Giu nguyen mau chu goc,
   khong de kieu lien ket mac dinh cua giao dien lam doi mau hay gach chan. */
.vag-brand a,
.vag-brand .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}
.vag-brand .elementor-heading-title a:hover { opacity: .82; }
.vag-brand .elementor-icon:hover { opacity: .9; }
.vag-brand__mark {
  flex: 0 0 52px !important;
  width: 52px !important;
  max-width: 52px !important;
}
.vag-brand__name {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}

/* Chốt một dòng cho tên Hội và dòng phụ ở mọi khổ màn hình */
.vag-brand__name .elementor-heading-title { white-space: nowrap; }

/* Máy hẹp 320–360px: ô tên Hội chỉ còn 150px, mà tiêu đề cần 151px và dòng
   phụ cần 172px. Thu ô biểu trưng còn 40px để nhả thêm 12px, đồng thời hạ cỡ
   chữ và giãn chữ của hai dòng cho vừa. Không dùng dấu ba chấm: tên Hội bị
   cắt thành "HỘI ĐÁ QUÝ VIỆT NA…" còn khó coi hơn là gãy dòng. */
@media (max-width: 360px) {
  body.ehf-header #masthead .vag-brand__mark {
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
  }
  /* Phai giu nguyen do uu tien "body.ehf-header #masthead ..." nhu quy tac
     13px/9px o khoi "Header tren dien thoai" phia tren, neu khong quy tac do
     thang va co chu van tran ra ngoai. */
  body.ehf-header #masthead .vag-brand__title .elementor-heading-title {
    font-size: 12px !important;
    letter-spacing: -0.02em !important;
  }
  /* Dong phu: phai lap lai dung bo chon cua quy tac 9px o khoi
     "Header tren dien thoai" (no co them hai lop .elementor-widget-heading nen
     do uu tien cao hon), roi dat sau de thang. */
  body.ehf-header #masthead .vag-hdr-logo .elementor-widget-heading
    + .elementor-widget-heading .elementor-heading-title {
    font-size: 8px !important;
    letter-spacing: .01em !important;
  }
}

/* =================================================================
   DANH SÁCH BIỂU TƯỢNG — LƯỚI AN TOÀN
   Định dạng thật nằm ở widget-icon-list.min.css của Elementor. File đó chỉ
   được nạp khi thân trang có dùng widget danh sách, trong khi chân trang thì
   trang nào cũng dùng. Đã một lần file này không được nạp và toàn bộ danh sách
   chân trang thụt vào 40px kèm chấm tròn mặc định của trình duyệt.
   Vài dòng dưới đây giữ cho danh sách luôn thẳng lề dù chuyện đó lặp lại.
   ================================================================= */
.elementor-widget-icon-list .elementor-icon-list-items {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.elementor-widget-icon-list .elementor-icon-list-item {
  list-style: none;
  margin: 0;
}
.elementor-widget-icon-list .elementor-icon-list-item::marker { content: none; }
/* =================================================================
   BÀI VIẾT: HAI CỘT 2/3 – 1/3
   Cột trái là đầu bài, ảnh và thân bài; cột phải là 5 tin liên quan
   (vag_related_aside() trong vag-cpt.php). Các kiểu nội dung khác
   vẫn giữ bố cục bảng thông tin như cũ.
   ================================================================= */
.vag-detail__layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
/* Trong cột trái chỉ còn thân bài, bỏ chia cột dành cho bảng thông tin */
.vag-detail__layout .vag-detail__cols { grid-template-columns: minmax(0, 1fr); }

/* Header dính cao 120px trên màn lớn, cột phải bám cách bên dưới 24px.
   Cột phải cao ~655px: màn thấp hơn 840px thì không bám, nếu không phần
   dưới của danh sách bị khuất mà không cuộn tới được. */
@media (min-width: 1025px) and (min-height: 840px) {
  .vag-related { position: sticky; top: 144px; }
  body.admin-bar .vag-related { top: 176px; }
}
@media (max-width: 1024px) {
  .vag-detail__layout { grid-template-columns: minmax(0, 1fr); }
}

.vag-related .vag-detail__panel { padding: 20px 20px 8px; }
.vag-related__list { list-style: none; margin: 0; padding: 0; }
.vag-related__list li { margin: 0; border-bottom: 1px solid #ebefea; }
.vag-related__list li:last-child { border-bottom: 0; }
.vag-related__item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  color: inherit; text-decoration: none;
}
.vag-related__list li:first-child .vag-related__item { padding-top: 0; }
.vag-related__thumb {
  flex: 0 0 96px; height: 72px; border-radius: 4px; overflow: hidden;
  background: #ebefea; display: flex; align-items: center; justify-content: center;
}
.vag-related__thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.vag-related__thumb .vag-ms { font-size: 28px; color: #7b001f; }
.vag-related__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vag-related__title {
  font: 600 14px/20px 'Roboto Flex', sans-serif; color: #181d1a;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; transition: color .2s;
}
.vag-related__date {
  display: flex; align-items: center; gap: 4px;
  font: 400 12px/16px 'Roboto Flex', sans-serif; color: #594141;
}
.vag-related__date .vag-ms { font-size: 14px; color: #7b001f; }
.vag-related__item:hover .vag-related__title { color: #7b001f; }
.vag-related__item:hover .vag-related__thumb img { transform: scale(1.05); }

@media (max-width: 767px) {
  .vag-related__thumb { flex-basis: 88px; height: 66px; }
}