/* ============================================================================
   VIET EVENT — DESIGN SYSTEM
   Nguồn: Figma "Website Viet Event" (node 2204-7) + site chạy vietevent.com.vn
   Nguyên tắc: mọi thứ Builder diễn đạt được (màu, font, padding, bo góc, nền)
   ĐỀU đặt trong settings của widget để admin sửa được. File này CHỈ lo phần
   Builder không diễn đạt nổi: overlay ảnh, lưới lục giác, mũi tên carousel,
   khối chồng lấn, và tinh chỉnh responsive.
   ========================================================================== */

:root {
  /* NỀN ĐEN TRUNG TÍNH. Trước đây là #000000 — rgb(20,16,13), đỏ nhiều hơn lam nên
     mắt đọc ra "nâu" chứ không phải đen; cả bộ nền nổi cũng ám ấm theo. Nay dùng đen
     thuần cho nền trang và xám trung tính cho các lớp nổi. */
  --ve-bg: #000000;          /* nền tối chủ đạo */
  --ve-bg-2: #000000;        /* nền footer */
  --ve-red: #f53501;         /* nhãn/nút nhấn */
  --ve-gold-1: #fda000;
  --ve-gold-2: #ffd07e;
  --ve-text: #ffffff;
  --ve-radius-xl: 150px;     /* bo góc "bậc thang" giữa các khối */
  --ve-radius-card: 20px;
  --ve-shell: 1536px;        /* bề rộng nội dung ở 1920 */
  /* Figma: dãy số liệu bắt đầu tại x=244 / 1920; dùng vw để lưới giãn cùng viewport. */
  --ve-gutter: 12.7083333vw;
  --ve-font: 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ve-font-display: 'SVN-Radiant-Slender', 'Gilroy', serif;

  /* ---- Bảng màu của theme nền (tokens.css) vốn là bảng SÁNG ----------------
     Các view dùng chung — category.ejs (danh sách bài), post.ejs (chi tiết bài),
     404.ejs — dựng bằng biến `--stch-*` và style.css. Giữ nguyên bảng sáng thì
     trang danh mục ra nền trắng toàn bộ, còn trang chi tiết có chữ #1a1c1c gần như
     vô hình trên nền tối. Định nghĩa lại ĐÚNG BỘ BIẾN ĐÓ là mọi thành phần .stch-*
     tự đúng màu, không phải đè từng quy tắc một. */
  --stch-surface: #000000;              /* nền trang */
  --stch-surface-low: #101010;          /* nền nổi nhẹ (xám trung tính, KHÔNG ám nâu) */
  --stch-surface-lowest: #161616;       /* nền thẻ/hộp */
  --stch-on-surface: #ffffff;           /* chữ chính */
  --stch-on-surface-variant: rgba(255, 255, 255, .72);   /* chữ phụ */
  --stch-primary: #f53501;              /* màu nhấn = đỏ thương hiệu */
  --stch-outline-ghost: rgba(255, 255, 255, .12);
  --stch-font-body: 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --stch-font-heading: 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------- 1. NỀN */
body.dmdc-theme-default {
  background-color: var(--ve-bg);
  color: var(--ve-text);
  font-family: var(--ve-font);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}

body.dmdc-theme-default main#main-content { background-color: var(--ve-bg); }

/* Các trang generic còn lại của theme nền (category/product/product_category/search)
   tự đặt nền sáng --stch-surface (#f9f9f9) nhưng KHÔNG tự đặt màu chữ → thừa hưởng
   color: var(--ve-text) (trắng) ở body bên trên ⇒ chữ trắng trên nền sáng, gần như
   vô hình. Trả lại màu chữ tối đúng như thiết kế gốc của các trang này. */
.stch-category-archive,
.stch-product-archive,
.stch-product-view,
.stch-search-wrap {
  color: var(--stch-on-surface, #1a1c1c);
}
/* Tiêu đề các trang trên: Cài đặt > CSS Giao diện (settings.theme_style_code trong DB)
   có rule toàn cục `h1,h2,…,.dmdc-heading-title{color:#fff}` — đúng cho các trang nền
   tối, nhưng làm tiêu đề tàng hình ở đây. Rule đó chỉ có specificity (0,0,1) và nạp
   SAU file này, nên phải thắng bằng specificity (0,1,1) chứ không thể dựa vào thứ tự. */
.stch-category-archive h1, .stch-category-archive h2, .stch-category-archive h3, .stch-category-archive h4, .stch-category-archive h5,
.stch-product-archive h1, .stch-product-archive h2, .stch-product-archive h3, .stch-product-archive h4, .stch-product-archive h5,
.stch-product-view h1, .stch-product-view h2, .stch-product-view h3, .stch-product-view h4, .stch-product-view h5,
.stch-search-wrap h1, .stch-search-wrap h2, .stch-search-wrap h3, .stch-search-wrap h4, .stch-search-wrap h5 {
  color: var(--stch-on-surface, #1a1c1c);
}

/* Theme nền (Stitch Agency) đặt letter-spacing âm + margin-bottom cho h1/h2 —
   phá vỡ tỉ lệ chữ của Viet Event. Trả về trung tính trong phạm vi trang.
   !important trên font-family/letter-spacing vì các trang generic (post.ejs,
   category.ejs, product.ejs, search.ejs, product_category.ejs) đặt inline
   style="font-family: var(--stch-font-heading)" — inline thắng stylesheet
   thường, phải ép mới về đúng font Viet Event (--stch-font-heading trỏ tới
   'SVN-Gumley' — font không có sẵn trong hệ thống → trình duyệt fallback ra
   font hệ điều hành nhìn "phồng/méo" chứ không phải Gilroy). */
body.dmdc-theme-default h1,
body.dmdc-theme-default h2,
body.dmdc-theme-default h3,
body.dmdc-theme-default h4 {
  font-family: var(--ve-font) !important;
  letter-spacing: normal !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

body.dmdc-theme-default p { margin-bottom: 0; }
body.dmdc-theme-default a { text-decoration: none; }

/* Chữ hiển thị (SVN-Radiant Slender) — dùng cho mọi H2 tiêu đề khối */
.ve-display .dmdc-heading-title { font-family: var(--ve-font-display) !important; }

/* -------------------------------------------------- 2. KHUNG & KHOẢNG CÁCH */
/* Container "boxed" của Builder dùng .container của Bootstrap (gutter đã bị ép 0)
   → dưới 1536px sẽ chạm sát mép. Cấp lại lề an toàn theo từng mốc. */
body.dmdc-theme-default .dmdc-el--container.container { padding-left: 0; padding-right: 0; }

/* Khung boxed chuẩn 1536 / 1920. Không để max-width cố định làm các section co lại
   khi màn hình lớn hơn bản thiết kế gốc; header và section boxed cùng dùng lưới này. */
@media (min-width: 1025px) {
  body.dmdc-theme-default .dmdc-el--container.container { max-width: 80vw !important; }
}

@media (max-width: 1024px) {
  body.dmdc-theme-default .dmdc-el--container.container { padding-left: 24px; padding-right: 24px; }
  .ve-bleed { --ve-gutter: 24px; }
}

/* Khối tràn viền có lề trong lớn (Tổ chức sự kiện / Khách hàng - Đối tác) */
.ve-bleed { padding-left: var(--ve-gutter) !important; padding-right: var(--ve-gutter) !important; }
@media (max-width: 1024px) { .ve-bleed { padding-left: 24px !important; padding-right: 24px !important; } }

/* Bo góc "bậc thang" — thu nhỏ dần để không nuốt nội dung trên màn hình bé */
@media (max-width: 1280px) { .ve-step { border-radius: 90px 0 0 0 !important; } .ve-step--tr { border-radius: 0 90px 0 0 !important; } .ve-step--br { border-radius: 0 0 90px 0 !important; } .ve-step--bl { border-radius: 0 0 0 90px !important; } }
@media (max-width: 700px) { .ve-step, .ve-step--tr, .ve-step--br, .ve-step--bl { border-radius: 40px 0 0 0 !important; } .ve-step--tr { border-radius: 0 40px 0 0 !important; } .ve-step--br { border-radius: 0 0 40px 0 !important; } .ve-step--bl { border-radius: 0 0 0 40px !important; } }

/* ------------------------------------------------------------- 3. HERO VIDEO */
.ve-hero .dmdc-widget-container {
  display: block;
  width: 100%;
  height: auto;
}

/* Thẻ <video> nằm TRONG khung tỉ lệ `.dmdc-video-aspect-ratio` (khung này có
   `padding-top: <tỉ lệ>` + `overflow: hidden`, còn video thì `position:absolute; inset:0`).
   Vì vậy video PHẢI phủ vừa đúng khung — mọi can thiệp chiều cao ở đây đều làm video
   to hơn khung rồi bị khung cắt mất.
   BẪY đã sập (sửa 12/08/2026): `@media (max-width:700px){ .ve-hero video{ min-height:62vh } }`
   — luật này có từ thời hero còn là thẻ <video> đứng trần. Sau khi module video được bọc
   khung tỉ lệ, 62vh = 523px nhồi vào khung 219px ⇒ **trên điện thoại chỉ thấy đúng góc
   trên của video**. Chiều cao hero muốn đổi thì đổi "Tỷ lệ khung hình" của widget trong
   Builder (khung sẽ tự cao theo), TUYỆT ĐỐI không nống chiều cao thẻ <video>. */
.ve-hero video {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* -------------------------------------------------- 4. KHỐI GIỚI THIỆU (ẢNH) */
/* Ảnh trái nằm trên nền hoạ tiết mờ; nền do container mang (bg_image), ảnh do
   widget image mang → chỉ cần ép ảnh phủ hết cột. */
.ve-about-media .dmdc-el--image img,
.ve-about-media img { width: 100%; height: auto; display: block; }

/* Link mũi tên "Tìm hiểu về chúng tôi →" */
.ve-arrow-link a.dmdc-btn,
.ve-arrow-link a {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent !important; border: 0 !important; padding: 0 !important;
  color: #fff !important; font-size: 20px; font-weight: 500;
}
/* Mũi tên: gạch ngang + ĐẦU MŨI TÊN, cả hai màu cam như bản thiết kế (Figma
   "Tìm hiểu về chúng tôi ⟶" — Arrow 2). Trước đây chỉ có một gạch TRẮNG trơn, nhìn
   như chữ bị gạch chân lỡ dở chứ không ra mũi tên.
   Vẽ trọn mũi tên trong MỘT ảnh SVG nội tuyến thay vì ghép hai pseudo-element: hộp
   chữ là inline-flex có `gap: 12px`, ghép hai mảnh là luôn hở đúng bằng khe đó. */
.ve-arrow-link a::after {
  content: "";
  width: 42px; height: 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="10" viewBox="0 0 42 10"><path d="M0 5h39" stroke="%23f53501" stroke-width="1.4"/><path d="M35 1.5 41 5l-6 3.5z" fill="%23f53501"/></svg>') no-repeat right center;
  position: relative; transition: width .3s ease;
}
.ve-arrow-link a:hover::after { width: 62px; background-size: 100% auto; }

/* -------------------------------------------- 5. THẺ "TẦM NHÌN / SỨ MỆNH" */
/* Nền chuyển sắc + bo góc do settings container đảm nhiệm; ở đây chỉ đảm bảo
   chiều cao đều nhau khi 2 thẻ nằm cạnh. */
.ve-vm-card { height: 100%; }
.ve-vm-row > .dmdc-el--container { align-self: stretch; }

/* Mobile — MẶC ĐỊNH XẾP CHỒNG.
   Hai cột trên màn 390px chỉ còn ~155px mỗi bên: chỉ đẹp khi nội dung NGẮN (trang chủ,
   ~100 ký tự/thẻ). Trang Giới thiệu dùng lại đúng lớp này nhưng mỗi thẻ ~540 ký tự ⇒
   hai cột biến thành hai cột chữ hẹp cao 746px, xấu và khó đọc.
   Vì vậy hai cột là TUỲ CHỌN (`ve-vm-row--duo`), không phải mặc định — thêm thẻ mới với
   nội dung dài thì tự khắc xếp chồng, không phải nhớ đi vá. */
@media (max-width: 700px) {
  .ve-vm-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px;
  }
  .ve-vm-row > .dmdc-el--container {
    width: 100% !important;
    max-width: none !important;
  }

  /* Biến thể HAI CỘT — dùng cho khối nội dung ngắn, đúng bản thiết kế mobile của
     trang chủ (Figma iPhone 13/14 – node 172:301: hai thẻ 165px, khe 20px). */
  .ve-vm-row--duo {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px;
  }
  .ve-vm-row--duo > .dmdc-el--container {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
  /* Thẻ hẹp còn ~165px: hạ cỡ chữ cho khỏi vỡ dòng, giữ đúng tỉ lệ bản thiết kế */
  .ve-vm-row--duo .ve-vm-card .dmdc-heading-title { font-size: 15px !important; }
  .ve-vm-row--duo .ve-vm-card .dmdc-text-editor,
  .ve-vm-row--duo .ve-vm-card .dmdc-text-editor * { font-size: 13px !important; line-height: 1.5 !important; }
}

/* ------------------------------------------------- 6. CAROUSEL (post_slider) */
/* .ve-carousel nằm trong container flex-column + align-items:center (Truyền hình thực
   tế/Talkshow…) → không có align-items:stretch nên box tự co theo nội dung
   (shrink-to-fit). Swiper bên trong có slide width:100% trước khi JS đo được kích
   thước thật → Chromium tính bề rộng "vừa khít nội dung" ra một số khổng lồ (kẹp ở
   trần LayoutUnit ~33.5 triệu px), vỡ toàn bộ layout ngang. Ép full-width để tránh. */
.ve-carousel { width: 100%; align-self: stretch; }
/* Mũi tên tròn viền vàng như Figma (Group 694603 / 694619). */
.ve-carousel .swiper-button-prev,
.ve-carousel .swiper-button-next,
.ve-carousel .dmdc-swiper-prev,
.ve-carousel .dmdc-swiper-next {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(253, 160, 0, .55);
  background: rgba(0, 0, 0, .55);
  color: var(--ve-gold-1);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, border-color .25s ease;
}
.ve-carousel .swiper-button-prev:hover,
.ve-carousel .swiper-button-next:hover,
.ve-carousel .dmdc-swiper-prev:hover,
.ve-carousel .dmdc-swiper-next:hover {
  background: var(--ve-gold-1); border-color: var(--ve-gold-1); color: var(--ve-bg);
}
.ve-carousel .swiper-button-prev::after,
.ve-carousel .swiper-button-next::after { font-size: 18px; font-weight: 700; }

.ve-carousel .swiper-pagination-bullet { background: #fff; opacity: .45; }
.ve-carousel .swiper-pagination-bullet-active { opacity: 1; }

/* Figma: mũi tên NẰM NGOÀI hai mép thẻ, viền đỏ.
   Mũi tên là con của .swiper (overflow:hidden). Mẹo: overflow CHỈ cắt phần tử absolute khi
   khối chứa (containing block) của nó nằm BÊN TRONG phần tử bị cắt. Cho .swiper
   position:static → khối chứa của mũi tên nhảy lên khung cha .position-relative bên ngoài,
   nên mũi tên thoát khỏi vùng cắt, còn các slide vẫn bị .swiper cắt gọn đúng mép. */
.ve-carousel .dmdc-post-slider-wrapper { padding-left: 84px; padding-right: 84px; }
.ve-carousel .dmdc-post-slider-wrapper > .swiper { position: static; }
/* Slider đa năng (khối nhận xét): bản thân phần tử vừa là .swiper vừa là khung → phải bọc
   thêm .ve-carousel-frame ở seed để có khung định vị bên ngoài. */
.ve-carousel-frame { position: relative; padding-left: 84px; padding-right: 84px; }
/* !important vì widget tự khai báo position qua selector có #id (thắng class thường) */
.ve-carousel-frame > .dmdc-el--slider,
.ve-carousel-frame .dmdc-el--testimonial_carousel,
.ve-carousel-frame .dmdc-testi-swiper { position: static !important; }
@media (max-width: 700px) {
  .ve-carousel .dmdc-post-slider-wrapper,
  .ve-carousel-frame { padding-left: 46px; padding-right: 46px; }
}
.ve-carousel .swiper-button-prev,
.ve-carousel .dmdc-swiper-prev { left: 0; }
.ve-carousel .swiper-button-next,
.ve-carousel .dmdc-swiper-next { right: 0; }
.ve-carousel .swiper-button-prev,
.ve-carousel .swiper-button-next,
.ve-carousel .dmdc-swiper-prev,
.ve-carousel .dmdc-swiper-next {
  width: 46px; height: 46px;
  border-color: var(--ve-red);
  background: transparent;
  color: var(--ve-red);
  box-shadow: none;
}
.ve-carousel .swiper-button-prev:hover,
.ve-carousel .swiper-button-next:hover,
.ve-carousel .dmdc-swiper-prev:hover,
.ve-carousel .dmdc-swiper-next:hover {
  background: var(--ve-red); border-color: var(--ve-red); color: #fff;
}
.ve-carousel .swiper-button-prev::after,
.ve-carousel .swiper-button-next::after { font-size: 15px; font-weight: 600; }
@media (max-width: 700px) {
  .ve-carousel .swiper-button-prev,
  .ve-carousel .swiper-button-next { width: 36px; height: 36px; }
}

/* --------------------------------------------------- 6b. THẺ BÀI (post-card)
   post_grid/post_slider dựng thẻ theo phong cách sáng (bg trắng, chữ đen, viền,
   bóng đổ). Bộ điều khiển "THẺ BÀI VIẾT" của style-engine trỏ vào .dmdc-post-card
   trong khi module in ra .post-card → không ăn. Vì vậy phần nhìn của thẻ được
   chuẩn hoá tại đây theo hệ tối Viet Event. */
.ve-cards .post-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
}
.ve-cards .post-card:hover { transform: none; box-shadow: none !important; }
.ve-cards .post-card-thumb {
  border-radius: var(--ve-radius-card);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Lõi để nền #f8f9fa cho khung ảnh — trên nền tối lộ ra thành ô xám sáng ở những thẻ
     THIẾU ẢNH hoặc trong lúc ảnh chưa tải xong. */
  background: rgba(255, 255, 255, .06) !important;
}
/* Ô giữ chỗ khi bài không có ảnh đại diện */
.ve-cards .dmdc-img-placeholder,
.ve-cards .post-card-thumb .no-thumb {
  background: rgba(255, 255, 255, .04) !important;
  color: rgba(255, 255, 255, .28) !important;
}
.ve-cards .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ve-cards .post-card:hover .post-card-thumb img { transform: scale(1.05); }
.ve-cards .post-card-body { padding: 20px 0 0 !important; }
.ve-cards .post-title { margin-bottom: 0 !important; }
.ve-cards .post-title a {
  color: #fff !important;
  font-family: var(--ve-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.ve-cards .post-title a:hover { color: var(--ve-gold-1) !important; }
.ve-cards .post-excerpt { color: rgba(255, 255, 255, .72) !important; }
/* Ngày đăng + lượt xem. Trước đây theme ẨN HẲN dòng này (`display:none`) nên dù bật
   "Hiển thị ngày/lượt xem" trong Builder cũng không thấy gì — hai lớp chặn chồng nhau. */
.ve-cards .post-meta-top {
  margin-bottom: 8px !important;
  color: rgba(255, 255, 255, .55) !important;
  font-family: var(--ve-font); font-size: 13px !important;
  opacity: 1 !important;
  gap: 18px !important;
}
.ve-cards .post-meta-top .meta-item { gap: 7px; }
.ve-cards .post-meta-top .meta-icon { margin-right: 0; font-size: 12px; color: var(--ve-gold-1); opacity: .85; }
.ve-cards .post-footer { border-top: 0 !important; padding-top: 14px !important; }
.ve-cards .read-more-link { color: var(--ve-gold-1) !important; font-size: 16px; }
.ve-cards .category-badge { display: none; }

/* Biến thể dùng cho carousel dịch vụ: chỉ ảnh + tiêu đề */
.ve-cards--plain .post-footer,
.ve-cards--plain .post-excerpt { display: none !important; }

/* Biến thể Tin tức: ảnh ngang 16:11 như Figma (445×313) */
.ve-cards--news .post-card-thumb { aspect-ratio: 445 / 313; }
/* Figma: tiêu đề tin căn đều 2 biên; link đọc tiếp là "Xem chi tiết" chữ trắng, mũi tên cam.
   Chuỗi "Đọc bài viết" nằm cứng trong post_grid.ejs (lõi dùng chung nhiều site) → đổi nhãn
   bằng CSS thay vì sửa lõi, để không ảnh hưởng các site anh em. */
/* Căn đều 2 biên CHỈ dùng cho thẻ đủ rộng (khối Tin tức trang chủ, ~445px). Trên lưới
   4 cột của trang danh sách, thẻ chỉ ~250px nên căn đều làm chữ giãn rời rạc, rất khó đọc
   — dùng container query để tự chuyển về căn trái khi thẻ hẹp. */
.ve-cards--news .post-title a { text-align: justify; display: block; }
.ve-cards--news .read-more-link { font-size: 0 !important; color: #fff !important; }
.ve-cards--news .read-more-link::before { content: "Xem chi tiết"; font-size: 16px; font-weight: 400; }
.ve-cards--news .read-more-link i { color: var(--ve-red); font-size: 15px; }
.ve-cards--news .post-footer { border-top: 0 !important; padding-top: 10px !important; }

/* Mobile: bản thiết kế cho khối Tin tức là MỘT HÀNG NGANG kéo ngang được (thẻ rộng
   217px, thấy trọn thẻ đầu + hé thẻ sau), chứ không phải xếp chồng.
   Trước đây lưới Bootstrap `col-md-4 col-sm-6` rơi về 1 cột dưới 576px ⇒ 7 thẻ nối
   đuôi nhau thành khối cao 2415px, riêng mục Tin tức đã dài gần bằng 1/4 trang. */
@media (max-width: 700px) {
  /* Widget nằm trong container flex-column + align-items:center ⇒ với tư cách flex item nó
     CO THEO NỘI DUNG (shrink-to-fit). Khi bên trong là ray ngang, "nội dung" = tổng bề rộng
     mọi thẻ ⇒ khối phình ra 1366px và tràn sang trái. Cùng một cái bẫy đã ghi ở §6 cho
     `.ve-carousel` — chữa bằng đúng một cách: ép full-width + stretch. */
  .ve-cards--news { width: 100% !important; align-self: stretch !important; }
  .ve-cards--news .dmdc-post-grid-container { width: 100%; }
  .ve-cards--news .dmdc-post-grid-container > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    /* Kéo hết khe của Bootstrap để canh mép trái khớp tiêu đề khối */
    margin-left: 0; margin-right: 0;
    padding-bottom: 6px;
  }
  .ve-cards--news .dmdc-post-grid-container > .row::-webkit-scrollbar { display: none; }
  /* `!important` là BẮT BUỘC ở đây, không phải cho tiện: module post_grid tự phát
     `#pgc-<widgetId> .pg2-grid-item { flex: 0 0 100% }` cho khoảng ≤700px — chọn theo ID
     (1-1-0) nên mọi selector class của theme đều thua. Ở khối này ta CỐ Ý bỏ qua số cột
     của widget vì bản thiết kế mobile là một RAY NGANG, không phải lưới 1 cột. */
  .ve-cards--news .dmdc-post-grid-container > .row > [class*="col-"] {
    flex: 0 0 217px !important;
    max-width: 217px !important;
    width: 217px !important;
    padding-left: 0; padding-right: 0;
    scroll-snap-align: start;
  }
  /* Thẻ hẹp thì căn đều 2 biên làm chữ giãn rời rạc — trả về căn trái */
  .ve-cards--news .post-title a { text-align: left; }
}

/* Biến thể carousel dịch vụ: thẻ dọc 4:5 như Figma */
.ve-cards--portrait .post-card-thumb { aspect-ratio: 446 / 544; }

/* ------------------------------- LƯỚI DỰ ÁN (trang Dự án tiêu biểu) --------
   Ảnh nguồn có tấm ngang, có tấm là poster DỌC. Để nguyên tỉ lệ gốc thì hàng flex bị
   tấm cao nhất kéo cao vống, sinh khoảng trắng lớn ở các thẻ còn lại. Ép CÙNG một tỉ lệ
   445/313 + object-fit:cover để mọi thẻ cao bằng nhau. */
.ve-projects .ve-proj-card .dmdc-el--image img,
.ve-projects .ve-proj-card figure img {
  width: 100% !important;
  aspect-ratio: 445 / 313;
  height: auto !important;
  object-fit: cover;
  border-radius: var(--ve-radius-card);
  display: block;
}
.ve-projects .ve-proj-card figure { margin: 0 !important; }
.ve-projects .ve-proj-card .dmdc-heading-title a { color: #fff; }
.ve-projects .ve-proj-card:hover .dmdc-heading-title a { color: var(--ve-gold-1); }
.ve-projects .ve-proj-card .dmdc-heading-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Biến thể TRANG DANH SÁCH (Bí kíp, Thư viện video…): giống --news về tỉ lệ ảnh và nhãn
   "Xem chi tiết", nhưng tiêu đề CĂN TRÁI. Lưới danh sách 4 cột nên thẻ hẹp (~270px),
   căn đều 2 biên làm chữ giãn rời rạc rất khó đọc — chỉ khối Tin tức trang chủ (thẻ rộng
   ~445px theo Figma) mới căn đều. Tách class riêng thay vì đặt ngưỡng theo bề rộng:
   ngưỡng luôn sai ở một khổ màn hình nào đó. */
.ve-cards--list .post-card-thumb { aspect-ratio: 445 / 313; }
.ve-cards--list .post-title a { text-align: left; display: block; }
.ve-cards--list .read-more-link { font-size: 0 !important; color: #fff !important; }
.ve-cards--list .read-more-link::before { content: "Xem chi tiết"; font-size: 16px; font-weight: 400; }
.ve-cards--list .read-more-link i { color: var(--ve-red); font-size: 15px; }
.ve-cards--list .post-footer { border-top: 0 !important; padding-top: 10px !important; }

/* ------------------- 7a. TẤM NỀN "TỔ CHỨC SỰ KIỆN" (Figma node 2013-13) ---- */
/* KHÔNG phải khối cam đặc, và viền KHÔNG phải hình elip gần đúng — đây là path "Union"
   thật của Figma (bo trái 200px + đường cong nhô lên ở phải), dựng bằng clip-path SVG
   (EVENTS_CLIP_SVG trong seed-home.mjs, clipPathUnits=objectBoundingBox nên co giãn đúng
   theo khung thật). Nền: màu #F33600 opacity .3 giữ đến 12.780898% rồi mờ về trong suốt,
   đúng theo gradient và opacity của Union trong Figma. */
/* clip-path phải nằm trên MỘT LỚP NỀN RIÊNG (::before) chứ không phải trên chính
   .ve-events — trong Figma, hình Union chỉ là nền trang trí NẰM SAU nội dung (tiêu đề,
   ảnh), không phải khung cắt nội dung. Áp clip-path thẳng lên .ve-events sẽ cắt luôn
   tiêu đề nằm trong vùng y=[0,30%] bên trái (nơi path chưa "nhô" lên tới đỉnh). */
.ve-events {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
  /* Builder does not render page-level container padding. Figma node 2013:13
     measures title (260,307), grid (260,429), and large tile 871×596.

     LỀ TRÊN PHẢI CO GIÃN THEO BỀ RỘNG, không được là số cố định: nền khối là ảnh
     ve-events-union.svg đặt `background-size:100%` nên mép trên của mảng nâu luôn nằm ở
     215/1920 = 11.1979167vw — tức là TỤT XUỐNG khi màn hình rộng ra. Lề trên 64px cố định
     khiến tiêu đề nằm CAO HƠN mép nâu và chòi hẳn lên nền đen (đo được: lệch 51px ở 1024px,
     37px ở 900px — 07/08). 15.9895833vw = 307/1920 chính là khoảng cách Figma đã đặt giữa
     đỉnh khối và tiêu đề, luôn dư 4.79vw so với mép nâu ở mọi bề rộng. */
  /* LỀ TRÁI cũng phải co giãn: hình nền có GÓC BO TRÒN bán kính 200/1920 = 10.42% bề rộng,
     trong vùng đó mép trên của mảng nâu tụt sâu xuống tới 415/1920. Lề trái 24px cố định
     khiến chữ rơi đúng vào vùng góc lượn ⇒ vẫn chòi ra nền đen dù lề trên đã đủ. 11vw là
     ngay sau góc lượn, chỗ mép trên đã phẳng ở 215/1920 = 11.2vw. */
  padding: max(64px, 15.9895833vw) 24px 56px max(24px, 11vw) !important;
  gap: 32px !important;
  overflow: hidden;
  isolation: isolate;
}
.ve-events::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  /* Figma Union is 712px high in the 1920px design frame. */
  height: min(100%, 37.083333vw);
  background: linear-gradient(180deg,
    rgba(243, 54, 0, .3) 0%, rgba(243, 54, 0, .3) 12.780898%,
    rgba(243, 54, 0, 0) 100%);
  z-index: 0;
  pointer-events: none;
}
.ve-events > .dmdc-bg-layer {
  z-index: 0;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
}
.ve-events > *:not(.dmdc-bg-layer) { position: relative; z-index: 1; }
.ve-events::before { content: none !important; }
/* SVG định nghĩa clip-path chỉ là tài nguyên nền, không được tính như một flex item.
   Nếu ở trong luồng, nó sinh thêm một gap và đẩy lưới xuống sai mốc y=429 của Figma. */
@media (min-width: 1025px) {
  .ve-events {
    /* KHÔNG ghim `height` nữa. Trước đây ép 1025px (đúng bằng chiều cao khung Figma) trong khi
       nội dung cũng vừa khít 1025 (307 + 75 + 47 + 596) ⇒ lưới ảnh chạm ĐÚNG mép đáy, dính
       liền dải đếm số bên dưới; chỉ cần thêm bất cứ thứ gì vào khối là bị `overflow:hidden`
       cắt cụt. Nay để chiều cao tự tính theo nội dung.
       Figma: khối Tổ chức sự kiện y=3644..4669, dải đếm số bắt đầu y=4796 ⇒ CÁCH NHAU 127px.
       Khoảng đó đặt bằng padding-bottom để nền của khối vẫn phủ hết. */
    min-height: 0 !important;
    padding: 15.9895833vw 0 6.6145833vw 13.5416667vw !important; /* 307 / 0 / 127 / 260 (÷1920) */
    gap: 2.4479167vw !important; /* 47 / 1920 */
  }
  .ve-events > .dmdc-el--heading {
    margin: 0 !important;
    width: 56.1458333vw; /* 1078 / 1920 */
    flex: 0 0 3.90625vw; /* 75 / 1920 */
  }
  .ve-events .ve-mosaic {
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }
  /* Figma: hàng ảnh rộng 1773px trong khi vùng nội dung chỉ 1660px (x=260 → 1920)
     ⇒ cột phải TRÀN khỏi mép màn hình. body đã có overflow-x:hidden nên an toàn. */
  .ve-events .ve-mosaic .pg-mosaic { width: calc(100% + 5.8854167vw); } /* 113 / 1920 */
  .ve-events .ve-mosaic .pg-ov-title { font-size: 1.0416667vw; line-height: 1.25vw; }   /* 20 / 24 */
  .ve-events .ve-mosaic .pg-ov-more { font-size: .9375vw; line-height: 1.40625vw; }      /* 18 / 27 */
}

/* --------------------------- 7. LƯỚI DỰ ÁN (module Post Grid — bố cục khảm) */
/* Khối này TRƯỚC ĐÂY dựng tay bằng container + ảnh nền (.ve-tile/.ve-mosaic-col--*).
   Nay dùng module Post Grid lấy bài theo chuyên mục nên toàn bộ bố cục/lớp phủ/mũi tên
   do chính module lo (server/views/modules/post_grid.ejs) — ở đây chỉ còn phần tràn mép
   và cỡ chữ theo vw. Các rule .ve-tile cũ đã xoá vì không còn phần tử tương ứng. */
.ve-mosaic { width: 100%; align-self: stretch; }
.ve-mosaic .dmdc-post-grid-container { padding: 0 !important; }

/* ------------------------------------------------------ 8. DẢI SỐ (counter) */
/* Figma: gradient cam đối xứng — đậm ở hai mép, sáng dần vào giữa. Builder chỉ đặt được
   gradient 2 màu nên nền thật khai báo tại đây (đo từ bản thiết kế). */
.ve-stats {
  box-sizing: border-box;
  min-height: 15.9895833vw;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: #c88400 !important;
  background-image:
    linear-gradient(90deg, rgba(209, 125, 0, .74) 0%, rgba(237, 159, 18, .54) 50%, rgba(205, 119, 0, .74) 100%),
    url('/uploads/2025/09/bg-kh.webp') !important;
  background-position: center, center 48% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
/* Vạch ngăn giữa 4 cột — Figma Vector 9/10/11. */
.ve-stats > .dmdc-el--container + .dmdc-el--container { position: relative; }
.ve-stats > .dmdc-el--container + .dmdc-el--container::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 7.1354167vw; background: rgba(0, 0, 0, .35);
}
/* Điện thoại + máy tính bảng: xếp 2×2 (105+ | 15+ / 10K+ | 850+) đúng bản thiết kế
   mobile, nền vàng, một vạch dọc giữa hai cột.
   Khối này TRƯỚC ĐÂY bị bật "ẩn trên máy tính bảng" + "ẩn trên điện thoại" trong Builder
   nên biến mất hẳn dưới 1024px — đã gỡ bằng scripts/theme-vietevent/show-stats-on-mobile.mjs.
   Phải phủ tới 1024px chứ không chỉ 700px: bốn cột nhồi vào 768px làm ô cuối tràn ra
   ngoài và chui xuống dưới widget liên hệ nổi. */
@media (max-width: 1024px) {
  .ve-stats {
    position: relative;
    flex-wrap: wrap !important;
    min-height: 0;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
    row-gap: 22px;
  }
  .ve-stats > .dmdc-el--container {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  /* Vạch dọc: một đường duy nhất chạy giữa hai cột. KHÔNG bám theo thứ tự con
     (`nth-child`) vì con đầu tiên có thể là `.dmdc-bg-layer` hoặc không, tuỳ khối
     có đặt ảnh/màu nền hay không — đếm theo vị trí là hỏng ngay khi đổi cài đặt nền. */
  .ve-stats > .dmdc-el--container + .dmdc-el--container::before { display: none; }
  .ve-stats::after {
    content: "";
    position: absolute; left: 50%; top: 26px; bottom: 26px;
    width: 1px; background: rgba(0, 0, 0, .35);
    pointer-events: none;
  }
  .ve-stats .dmdc-counter-number,
  .ve-stats .dmdc-counter-number-prefix,
  .ve-stats .dmdc-counter-number-suffix { font-size: 40px !important; }
}
@media (max-width: 700px) {
  .ve-stats .dmdc-counter-number,
  .ve-stats .dmdc-counter-number-prefix,
  .ve-stats .dmdc-counter-number-suffix { font-size: 34px !important; }
}
.ve-stats .dmdc-counter-number,
.ve-stats .counter-number { line-height: 1; }
@media (min-width: 1025px) {
  .ve-stats .dmdc-counter-number,
  .ve-stats .dmdc-counter-number-prefix,
  .ve-stats .dmdc-counter-number-suffix { font-size: 4.1666667vw !important; }
}

/* --------------------------------------------- 9. "NHỮNG THƯỚC PHIM ĐẸP" */
/* Ảnh lớn bên trái + hộp cam chồng lấn bên phải. */
.ve-film { position: relative; }
.ve-film-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-film-box { align-self: center; }
@media (min-width: 1281px) {
  .ve-film-box { margin-left: -120px; }
}
@media (max-width: 1280px) {
  .ve-film { flex-direction: column !important; }
  .ve-film-media, .ve-film-box { width: 100% !important; }
  .ve-film-box { margin-left: 0; }
}
.ve-film-box .ve-film-divider { height: 1px; background: rgba(255, 255, 255, .5); width: 100%; }

/* Nút play tròn cam giữa ảnh (Figma) — ảnh là widget image nên chèn bằng lớp phủ ::after */
.ve-film-media { position: relative; }
.ve-film-media::after {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--ve-gold-1) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 34px 34px;
  pointer-events: none;
  transition: transform .25s ease;
}
.ve-film-media:hover::after { transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 700px) { .ve-film-media::after { width: 58px; height: 58px; background-size: 24px 24px; } }

/* CTA "KHÁM PHÁ THÊM →" trong hộp cam: Figma là nút VIỀN TRẮNG, không phải link trần */
.ve-film-box .ve-arrow-link a {
  border: 1px solid rgba(255, 255, 255, .85) !important;
  padding: 14px 26px !important;
  text-transform: uppercase;
  font-size: 16px; letter-spacing: .04em;
  gap: 28px;
}
.ve-film-box .ve-arrow-link a::after { width: 26px; }
.ve-film-box .ve-arrow-link a:hover { background: rgba(255, 255, 255, .14) !important; }

/* Homepage Image Slider, measured from Figma node 2001:8 (1660 x 738). */
@media (min-width: 1025px) {
  .ve-film-slider {
    width: 86.4583333vw !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }
  .ve-film-slider .dmdc-image-slider-wrapper { width: 100% !important; }
  .ve-film-slider .swiper {
    height: 38.4375vw !important;
    background: transparent !important;
  }
  .ve-film-slider .swiper-slide {
    overflow: visible !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  /* Slide gốc có background ảnh phủ toàn bộ khung. Figma chỉ hiển thị ảnh ở
     phần bên trái; vùng còn lại phía sau panel phải là nền đen. */
  .ve-film-slider .swiper-slide > .dmdc-slide-link { display: none !important; }
  .ve-film-slider .swiper-slide > .dmdc-slide-action-link {
    inset: 0 auto 0 0 !important;
    width: 81.746988% !important;
  }
  .ve-film-slider .dmdc-slider-side-image {
    inset: 0 auto 0 0 !important;
    width: 81.746988% !important;
    border-radius: 0 1.0416667vw 1.0416667vw 0;
  }
  .ve-film-slider .dmdc-slider-side-panel {
    inset: 15.582656% 0 auto 64.819277% !important;
    width: 35.180723% !important;
    height: 70.596206% !important;
    box-sizing: border-box;
    z-index: 5 !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 3.125vw 2.9166667vw !important;
    border-radius: 1.0416667vw;
    background: #f53501 !important;
  }
  .ve-film-slider .dmdc-slider-side-image::after {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 5.3125vw; height: 5.3125vw; border-radius: 50%; pointer-events: none;
    background: var(--ve-gold-1) url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23fff'%3E%3Cpath%20d='M8%205v14l11-7z'/%3E%3C/svg%3E) no-repeat center / 2.0833333vw 2.0833333vw;
  }
  .ve-film-slider .dmdc-slider-side-title { font-size: 1.8229167vw !important; line-height: 1.23 !important; }
  .ve-film-slider .dmdc-slider-side-divider { margin: 1.25vw 0 2.03125vw; }
  .ve-film-slider .dmdc-slider-side-item-title { font-size: 1.3020833vw !important; line-height: 1.5 !important; }
  .ve-film-slider .dmdc-slider-side-cta {
    width: 17.0833333vw;
    min-height: 2.6041667vw;
    margin-top: auto;
    justify-content: space-between;
    padding: 0 1.25vw !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 999px;
    font-size: 1.0416667vw !important;
    font-weight: 500;
  }
  .ve-film-slider .dmdc-slider-side-cta::after { content: '\2192'; margin-left: 1.0416667vw; font-size: 1.35em; line-height: 1; }
  .ve-film-slider .swiper-pagination {
    display: flex;
    align-items: center;
    gap: 1.5625vw;
    width: auto !important;
    left: auto !important;
    right: 2.03125vw !important;
    bottom: 1.875vw !important;
  }
  .ve-film-slider .swiper-pagination-bullet {
    width: .4166667vw;
    height: .4166667vw;
    margin: 0 !important;
    background: #fff !important;
    opacity: 1 !important;
  }
  .ve-film-slider .swiper-pagination-bullet-active {
    width: .4166667vw;
    height: .4166667vw;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ve-gold-1) !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------- 10. LƯỚI LOGO LỤC GIÁC */
/* Gallery ảnh của Builder + clip-path lục giác như bản gốc (.hex-gallery). */
/* Cùng lỗi co ngót (shrink-to-fit) như .ve-carousel ở trên: nằm trong container
   flex-column + align-items:center → không tự giãn hết bề ngang, khiến CSS Grid
   8 cột bên trong co về vài px, gallery gần như biến mất. Ép full-width. */
.ve-hex { width: 100%; align-self: stretch; }
.ve-hex .dmdc-gallery-item,
.ve-hex .dmdc-image-gallery .dmdc-gallery-item {
  background: #ffffff !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  aspect-ratio: 181 / 210;
  height: auto !important;
  padding: 18% 16% !important;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.ve-hex .dmdc-gallery-item:hover { transform: translateY(-6px); }
/* Figma: lục giác trắng có VIỀN VÀNG, hàng thứ 2 lệch nửa ô (tổ ong).
   clip-path cắt mất border thật → dùng lớp nền vàng bên dưới làm viền (padding 2px). */
.ve-hex .dmdc-gallery-grid { align-items: start; }
.ve-hex .dmdc-gallery-item {
  background: linear-gradient(#e7b45c, #e7b45c) padding-box,
              linear-gradient(#e7b45c, #e7b45c) border-box !important;
  border: 2px solid transparent;
  position: relative;
}
.ve-hex .dmdc-gallery-item::before {
  content: ""; position: absolute; inset: 2px; background: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ve-hex .dmdc-gallery-item img { position: relative; z-index: 1; }
/* Hàng 2 lệch nửa ô: 8 cột → các ô 9..16 tịnh tiến sang phải 50% + kéo lên cho khít tổ ong */
@media (min-width: 1025px) {
  .ve-hex .dmdc-gallery-item:nth-child(n + 9) { transform: translate(50%, -26%); }
  .ve-hex .dmdc-gallery-item:nth-child(n + 9):hover { transform: translate(50%, calc(-26% - 6px)); }
}
/* Theme nền ép `max-height:40px` cho ảnh gallery → logo lọt thỏm trong ô lục giác.
   KHÔNG ép `filter` ở đây nữa: hiệu ứng xám → hiện màu thật khi rê chuột nay là
   setting của widget ("Hiệu ứng khi rê chuột"), module tự phát CSS đủ mạnh để đè
   theme nền. Ép filter tại đây sẽ khoá cứng, admin đổi setting không ăn. */
.ve-hex .dmdc-gallery-item img,
.ve-hex .dmdc-image-gallery .dmdc-gallery-item img {
  max-height: 100% !important;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
}
.ve-hex .dmdc-image-gallery .dmdc-gallery-item:hover img { transform: none; filter: none !important; }

/* Figma 2001-6/2018-18 dùng lớp màu thương hiệu có alpha trên nền nâu tối,
   không phải một mảng cam đặc. Giữ màu nền này ở CSS để thắng background inline
   do Builder sinh ra nhưng vẫn bảo toàn hình dạng bo góc của container. */
.ve-partners {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}
.ve-partners > .dmdc-bg-layer {
  z-index: 0;
  background-color: var(--ve-bg) !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
}
.ve-partners > *:not(.dmdc-bg-layer) { position: relative; z-index: 1; }
@media (min-width: 1025px) {
  .ve-partners {
    margin-top: -3.59375vw !important; /* Figma: union starts 69px before the cards end */
    padding: 16.5625vw 0 0 !important; /* title starts 318px below the union top */
    gap: 0 !important;
  }
  .ve-partners > .dmdc-el--heading { margin: 0 !important; }
  .ve-partners > .dmdc-el--text_editor {
    margin: 0 0 2.8125vw !important; /* 54px between subtitle and logo grid */
  }
  .ve-partners > .dmdc-el--text_editor p {
    margin: 0 !important;
  }
  .ve-partners > .ve-hex { margin: 0 !important; }
  .ve-partners .ve-hex {
    width: 71.5625vw !important; /* Figma: x=273..1647 = 1374px */
    flex: 0 0 auto !important;
    align-self: center !important;
  }
  /* Figma hex frames: 146.843px wide, 16.157px between columns. The old
     10px gap enlarged each cell and made the second row sit too high. */
  .ve-partners .ve-hex .dmdc-gallery-grid {
    gap: .8415104vw !important; /* 16.157px / 1920 */
  }
  .ve-partners .ve-hex .dmdc-gallery-item:nth-child(n + 9) {
    transform: translate(50%, -20.8333333%);
  }
  .ve-partners .ve-hex .dmdc-gallery-item:nth-child(n + 9):hover {
    transform: translate(50%, calc(-20.8333333% - 6px));
  }
}

/* ------------------------------- 11. KHÁCH HÀNG NÓI VỀ CHÚNG TÔI (nhận xét) */
/* Figma: ảnh chân dung phía trên, thân thẻ nền chuyển sắc vàng, gạch đỏ ngắn trước tên. */
/* layout='header' cho thứ tự ảnh → tên → đơn vị → nội dung như Figma; .tc-head vốn xếp
   ngang (avatar cạnh meta) nên đổi thành cột để ảnh nằm trên toàn bộ bề ngang thẻ. */
/* !important: widget in card_bg thành inline style trên .tc-card, inline luôn thắng
   stylesheet thường nên nền chuyển sắc phải ép mới hiện. */
.ve-quotes .tc-card {
  background: url('/images/ve-testimonial-card.svg') center / 100% 100% no-repeat !important;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 0 !important;
  height: 100%;
  box-shadow: none !important;
}
.ve-quotes .tc-slide { height: 100%; }
.ve-quotes .swiper-slide { height: auto; }
.ve-quotes .tc-head { flex-direction: column; align-items: stretch; gap: 0; }
.ve-quotes .tc-avatar {
  width: 100% !important; max-width: none !important; height: 300px !important;
  /* Figma: ảnh bo 20px CẢ 4 GÓC (không phải chỉ 2 góc trên) — ảnh nằm ngay trong khung
     thẻ có viền bo cùng bán kính; để border-radius:0 làm góc ảnh vuông ló ra ngoài viền
     vàng bo tròn của thẻ (SVG nền), lộ góc vuông xấu ở 2 góc trên. */
  border-radius: 20px !important; object-fit: cover; display: block; flex: 0 0 auto;
}
.ve-quotes .tc-meta { padding: 24px 26px 0; }
/* Gạch đỏ ngắn trước TÊN (chỉ tên, không áp cho dòng đơn vị) */
.ve-quotes .tc-name { position: relative; padding-left: 112px; }
.ve-quotes .tc-name::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 2px; background: var(--ve-red);
}
.ve-quotes .tc-title { padding-left: 112px; }
.ve-quotes .tc-content { padding: 18px 30px 30px !important; margin: 0 !important; }
@media (min-width: 1025px) {
  .ve-quotes-sec {
    position: relative;
    z-index: 2;
    padding: 7.34375vw 0 0 !important;
    gap: 2.6041667vw !important;
    border-radius: 0 0 7.8125vw 0 !important;
  }
  .ve-quotes-sec .ve-carousel-frame { padding-left: 13.5416667vw !important; padding-right: 13.5416667vw !important; }
  .ve-quotes-sec .dmdc-testi-swiper { width: 100% !important; overflow: hidden !important; }
  .ve-quotes-sec .swiper-wrapper { align-items: stretch !important; }
  .ve-quotes-sec .swiper-slide { height: 31.125vw !important; }
  .ve-quotes-sec .swiper-button-prev,
  .ve-quotes-sec .swiper-button-next {
    top: 45.0625% !important;
    width: 3.125vw !important;
    height: 3.125vw !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url('/images/ve-testimonial-arrow.svg') center / contain no-repeat !important;
    color: transparent !important;
  }
  .ve-quotes-sec .swiper-button-prev { left: 8.4375vw !important; transform: scaleX(-1); }
  .ve-quotes-sec .swiper-button-next { right: 8.4375vw !important; }
  .ve-quotes-sec .swiper-button-prev::after,
  .ve-quotes-sec .swiper-button-next::after { display: none !important; }
  .ve-quotes .tc-card { height: 31.125vw; min-height: 0; }
  .ve-quotes .tc-avatar { height: 15.459375vw !important; border-radius: 1.0416667vw !important; }
  .ve-quotes .tc-head {
    display: block !important;
    align-items: initial !important;
    gap: 0 !important;
    text-align: left !important;
  }
  .ve-quotes .tc-meta {
    width: 100% !important;
    box-sizing: border-box;
    padding: 1.25vw 1.5890625vw 0;
    display: grid !important;
    grid-template-columns: 4.5347396vw minmax(0, 1fr);
    column-gap: 1.0817708vw;
    text-align: left !important;
  }
  .ve-quotes .tc-meta::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 4.5347396vw;
    height: .1030729vw;
    margin-top: .1822917vw;
    background: var(--ve-red);
  }
  .ve-quotes .tc-name {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0 !important;
    margin: 0 !important;
    font-size: 1.0416667vw !important;
    line-height: normal !important;
    text-align: left !important;
  }
  .ve-quotes .tc-name::before { display: none !important; }
  .ve-quotes .tc-title {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0 !important;
    margin-top: .13984375vw !important;
    font-size: .9375vw !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  .ve-quotes .tc-content { padding: 0 1.5890625vw 1.5625vw !important; }
}
@media (max-width: 700px) { .ve-quotes .tc-avatar { height: 240px !important; } }

/* --------------------------------------------------- 11b. NGHỆ SĨ (dự phòng) */
.ve-artists .dmdc-el--image img { border-radius: var(--ve-radius-card) var(--ve-radius-card) 0 0; }

/* ------------------------------------------------------- 11c. HEADER */
/* Figma: menu VIẾT HOA, giãn chữ, cách đều ~40px, rồi vạch ngăn + biểu tượng sóng nhạc cam. */
/* Cấu trúc thật: nav.dmdc-nav-menu > ul.dmdc-menu > li.dmdc-menu-item > a.dmdc-menu-link */
.ve-header-dark .dmdc-menu-link {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ve-header-dark .dmdc-menu { gap: 38px; align-items: center; flex-wrap: nowrap; }
.ve-header-dark .dmdc-menu > li > .dmdc-menu-link { padding-left: 0; padding-right: 0; }
/* Menu con vẫn giữ chữ thường, cỡ bình thường */
.ve-header-dark .dropdown-menu .dmdc-menu-link { text-transform: none; letter-spacing: normal; }
/* Bỏ hình tam giác mặc định của Bootstrap (vẽ bằng border-top, thô và lệch baseline)
   — nhưng KHÔNG bỏ hẳn dấu hiệu: mục có cấp con phải nhìn ra được là bấm/rê vào sẽ xổ.
   Thay bằng chevron tự vẽ ở quy tắc bên dưới. */
.ve-header-dark .dmdc-menu-link.dropdown-toggle::after { display: none !important; }

/* ---- Chevron báo "mục này có menu con" ------------------------------------
   Vẽ bằng 2 cạnh border xoay 45° nên không phụ thuộc font icon, nét luôn sắc.
   Xoay ngược 180° khi menu con đang mở (hover hoặc .show do Bootstrap gắn). */
.ve-header-dark .dmdc-menu > li.dmdc-has-submenu:not(.dmdc-item-icon-only) > .dmdc-menu-link {
  display: inline-flex; align-items: center;
}
.ve-header-dark .dmdc-menu > li.dmdc-has-submenu:not(.dmdc-item-icon-only) > .dmdc-menu-link::before {
  content: "";
  order: 2;                       /* nằm SAU chữ dù khai trước */
  width: 6px; height: 6px;
  margin-left: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease, opacity .22s ease;
  opacity: .7;
  flex: 0 0 auto;
}
.ve-header-dark .dmdc-menu > li.dmdc-has-submenu:not(.dmdc-item-icon-only):hover > .dmdc-menu-link::before,
.ve-header-dark .dmdc-menu > li.dmdc-has-submenu:not(.dmdc-item-icon-only).show > .dmdc-menu-link::before {
  transform: translateY(1px) rotate(225deg);
  opacity: 1;
}
/* Mục có cả icon riêng: icon đứng trước chữ, chevron vẫn ở cuối */
.ve-header-dark .dmdc-menu > li.dmdc-has-submenu > .dmdc-menu-link .dmdc-menu-icon { order: 0; }
.ve-header-dark .dmdc-menu > li.dmdc-has-submenu > .dmdc-menu-link .dmdc-menu-label { order: 1; }

.ve-nav { gap: 0 !important; }

/* ---- Menu con PHẢI thoát được ra ngoài header ----------------------------
   style-engine tự phát `overflow:hidden` cho container có bề rộng riêng (.ve-nav đặt
   width 78%). Bảng menu con đổ xuống DƯỚI mép header nên bị cắt sạch: đo bằng JS thì
   vẫn "display:block, visible, cao 225px" — nhìn thì không thấy gì, rất dễ tưởng là
   lỗi hover. Mở khoá overflow cho riêng vùng header. */
.ve-header-dark,
.ve-header-dark .dmdc-el--container,
.ve-header-dark .dmdc-el--nav_menu,
.ve-header-dark .dmdc-nav-menu-wrapper,
.ve-header-dark .dmdc-nav-menu,
.ve-header-dark .navbar-collapse { overflow: visible !important; }

/* Vạch ngăn + sóng nhạc */
.ve-eq-wrap { display: flex; align-items: center; padding-left: 26px; margin-left: 26px; position: relative; }
.ve-eq-wrap::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: rgba(255, 255, 255, .45);
}
.ve-eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.ve-eq span { width: 3px; background: var(--ve-gold-1); border-radius: 1px; }
.ve-eq span:nth-child(1) { height: 40%; }
.ve-eq span:nth-child(2) { height: 75%; }
.ve-eq span:nth-child(3) { height: 100%; }
.ve-eq span:nth-child(4) { height: 60%; }
.ve-eq span:nth-child(5) { height: 85%; }

/* ---- Dấu "/" ngăn cách giữa các mục menu (thiết kế Figma) ---------------- */
/* Đặt trên li chứ không phải ::after của link, để mục CHỈ-CÓ-ICON ở cuối vẫn
   được ngăn cách đúng và dấu gạch không bị gạch chân theo link khi hover. */
@media (min-width: 1280px) {
  .ve-header-dark .dmdc-menu > li + li { position: relative; }
  .ve-header-dark .dmdc-menu > li + li::before {
    content: "/";
    position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, .38);
    font-size: 15px; font-weight: 300; line-height: 1; pointer-events: none;
  }
  .ve-header-dark .dmdc-menu { gap: 44px; }
}

/* ---- Mục menu CHỈ HIỆN ICON (Quản lý Menu → Hiện icon + Ẩn chữ) ---------- */
/* Dùng cho mục "Menu con" ở cuối thanh menu: rê chuột vào icon là mở menu con. */
.ve-header-dark .dmdc-item-icon-only > .dmdc-menu-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0;
  color: var(--ve-gold-1);
  font-size: 20px; line-height: 1;
  transition: color .18s ease, transform .18s ease;
}
.ve-header-dark .dmdc-item-icon-only > .dmdc-menu-link:hover,
.ve-header-dark .dmdc-item-icon-only.show > .dmdc-menu-link { color: #fff; transform: scale(1.06); }
/* Mục chỉ-có-icon không cần nút mũi tên phụ */
.ve-header-dark .dmdc-item-icon-only > .dmdc-submenu-toggle { display: none; }
/* Menu con của mục icon căn theo mép PHẢI để không tràn khỏi màn hình.
   PHẢI có !important: module phát `#widget-<id> .dropdown-menu{left:0}` (đặc trưng có ID)
   nên `left:auto` theo class luôn thua ⇒ bảng vẫn mở sang phải và tràn ra ngoài màn hình
   (đo được: thừa 16px ở 1920, 80px ở 1280). */
@media (min-width: 1280px) {
  .ve-header-dark .dmdc-item-icon-only > .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}
/* Icon đứng cạnh chữ (khi KHÔNG bật "ẩn chữ") */
.ve-header-dark .dmdc-menu-icon { margin-right: 8px; }

/* Bảng menu con — nền tối, khớp header thay vì nền trắng mặc định của Bootstrap.
   PHẢI dùng !important: module nav_menu phát CSS neo theo `#widget-<id>` (đặc trưng có ID,
   1-1-0) nên mọi selector theo class của theme đều thua, dù viết dài đến đâu. */
.ve-header-dark .dropdown-menu {
  background: var(--stch-surface-lowest) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 12px !important;
  padding: 10px 0 !important;
  /* style-engine (dùng chung) ép `min-width:200px` cho MỌI menu con. Nhãn dài như
     "Hậu Trường Sản Xuất Sự Kiện" tràn ra khỏi nền bo góc ⇒ nhìn như nền bị cắt.
     `max-content` cho khung tự rộng bằng nhãn dài nhất, `max-width` chặn không cho
     khung phình quá tay; nhãn vượt trần thì xuống dòng chứ không tràn. */
  min-width: max-content !important;
  max-width: min(340px, 90vw) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
}
.ve-header-dark .dropdown-menu .dmdc-menu-link {
  color: rgba(255, 255, 255, .88) !important;
  padding: 9px 20px !important;
  font-size: 15px !important;
  line-height: 1.45;
  white-space: normal;
}
.ve-header-dark .dropdown-menu .dmdc-menu-link:hover,
.ve-header-dark .dropdown-menu .dmdc-menu-link.active { color: var(--ve-gold-1) !important; }

@media (max-width: 1279px) { .ve-eq-wrap { display: none; } }

/* ===================================================== 11d. HEADER MOBILE
   Figma node 176:68 "M-Header": khung 390×56, logo 107×31 ở x=13, biểu tượng
   sóng nhạc 27×27 ở x=348. Module nav_menu dùng `navbar-expand-lg` (mốc 992) nhưng
   menu VietEvent viết hoa + giãn chữ nên 992–1279 vẫn tràn ⇒ ép thu gọn tới 1279.
   ==================================================================== */
@media (max-width: 1279.98px) {
  /* Hàng header: cao 56px, logo trái - nút menu phải */
  .ve-header-dark > .dmdc-container-flex {
    min-height: 56px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .ve-header-dark > .dmdc-container-flex > .dmdc-el--container:first-child { width: auto !important; flex: 0 0 auto !important; }
  .ve-header-dark .ve-nav { width: auto !important; flex: 0 0 auto !important; justify-content: flex-end !important; }
  .ve-header-dark .dmdc-el--image img { width: 107px !important; height: auto !important; }

  /* Bootstrap chỉ tự thu gọn dưới 992 — dưới 1280 phải tự ép */
  .ve-header-dark .navbar-collapse:not(.show) { display: none !important; }
  .ve-header-dark .navbar-toggler { display: inline-flex !important; }

  /* Nút mở menu = biểu tượng sóng nhạc của thương hiệu (đúng 5 vạch 52/100/74/100/52%
     như Figma). Vẽ bằng SVG nền nên không phải sửa markup của module dùng chung. */
  /* `padding: 0` PHẢI có !important: module phát `#widget-<id> .navbar-toggler{padding:8px}`
     (đặc trưng có ID) dưới 992px → nút 27px chỉ còn 11px lòng trong, icon bị bóp dẹt. */
  .ve-header-dark .navbar-toggler {
    width: 27px; height: 27px; padding: 0 !important; margin: 0 0 0 auto;
    border: 0; background: transparent; box-shadow: none !important;
    align-items: center; justify-content: center;
  }
  .ve-header-dark .navbar-toggler > i { display: none; }        /* bỏ icon fa-bars mặc định */
  .ve-header-dark .navbar-toggler::before {
    content: ""; display: block; width: 27px; height: 27px;
    background: no-repeat center/27px 27px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Cg fill='%23FDA000'%3E%3Crect x='0' y='13' width='2' height='14' rx='1'/%3E%3Crect x='6.25' y='0' width='2' height='27' rx='1'/%3E%3Crect x='12.5' y='7' width='2' height='20' rx='1'/%3E%3Crect x='18.75' y='0' width='2' height='27' rx='1'/%3E%3Crect x='25' y='13' width='2' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
    transition: opacity .2s ease;
  }
  .ve-header-dark .navbar-toggler[aria-expanded="true"]::before { opacity: .55; }

  /* Dự phòng khi JS drawer không chạy: menu vẫn xổ được ngay dưới header */
  .ve-header-dark .navbar-collapse.show {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 8px 20px 24px;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, .10);
    z-index: 1040;
  }
  .ve-header-dark .navbar-collapse.show .dmdc-menu { flex-direction: column !important; gap: 0 !important; }
  .ve-header-dark .navbar-collapse.show .dmdc-menu > li + li::before { content: none; }
}

/* ---- NGĂN KÉO MENU MOBILE (drawer dùng chung của lõi: public/js/dmdc-mobile-nav.js)
   Drawer được JS gắn thẳng vào <body>, NẰM NGOÀI .ve-header-dark nên phải neo theo
   class theme trên <body>. Mặc định của lõi là nền trắng chữ đen — trên site nền tối
   nhìn như panel lạ rơi vào; dưới đây khoác lại đúng bảng màu thương hiệu. ---- */
body.dmdc-theme-default .dm-drawer {
  background: #000000;
  box-shadow: -10px 0 40px rgba(0, 0, 0, .55);
  border-left: 1px solid rgba(255, 255, 255, .08);
}
body.dmdc-theme-default .dm-drawer .dm-close { color: var(--ve-gold-1); font-size: 32px; }
body.dmdc-theme-default .dm-drawer .dm-menu li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.dmdc-theme-default .dm-drawer .dm-menu a { color: #fff; font-size: 16px; }
body.dmdc-theme-default .dm-drawer .dm-menu a:hover,
body.dmdc-theme-default .dm-drawer .dm-menu a.active { color: var(--ve-gold-1); }
body.dmdc-theme-default .dm-drawer .dm-menu .dm-sub-btn { color: rgba(255, 255, 255, .55); }
body.dmdc-theme-default .dm-drawer .dm-menu li.dm-has-sub.open > .dm-sub-btn { color: var(--ve-gold-1); }
body.dmdc-theme-default .dm-drawer .dm-menu .dropdown-menu a,
body.dmdc-theme-default .dm-drawer .dm-menu ul ul a { color: rgba(255, 255, 255, .72); font-size: 15px; }
body.dmdc-theme-default .dm-drawer .dm-foot {
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}
body.dmdc-theme-default .dm-drawer .dm-search {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .25);
}
body.dmdc-theme-default .dm-drawer .dm-search input { background: transparent; color: #fff; }
body.dmdc-theme-default .dm-drawer .dm-search input::placeholder { color: rgba(255, 255, 255, .55); }
body.dmdc-theme-default .dm-drawer .dm-search button { color: var(--ve-gold-1); }

/* Mục "chỉ hiện icon" (kiểu "Menu con" trên PC): trong ngăn kéo PHẢI hiện lại chữ,
   nếu không người dùng chỉ thấy một icon trơ trọi không biết nhóm đó là gì. */
body.dmdc-theme-default .dm-drawer .dmdc-item-icon-only > a { display: flex; align-items: center; gap: 10px; }
body.dmdc-theme-default .dm-drawer .dmdc-item-icon-only .visually-hidden {
  position: static !important; width: auto !important; height: auto !important;
  margin: 0 !important; overflow: visible !important; clip: auto !important;
  clip-path: none !important; white-space: normal !important;
}
body.dmdc-theme-default .dm-drawer .dmdc-menu-icon { color: var(--ve-gold-1); width: 20px; text-align: center; }

/* ------------------------------------------------------------ 12. FOOTER */
/* NỀN FOOTER — chép ĐÚNG đặc tả Figma (file utnFlHIAYM1Hw2oXt80ZJN, nút 141:254 →
   "Rectangle 6721"): GRADIENT_LINEAR NGANG (tay nắm [0,0.5] → [1,0.5]),
   #FDA000 @0% → #FFD07E @42.79% → #FDA000 @90.9%, opacity của LỚP = 0.30.
   Vì cả lớp cùng 30% nên viết thẳng alpha .30 vào từng điểm dừng là tương đương.

   Footer KHÔNG phải màu nâu: dải nâu #593A09→#5A4729 dùng trước đây chỉ là kết quả đã
   "nướng sẵn" của lớp vàng 30% này phủ lên nền #14100D của bản thiết kế. Site nay nền
   đen nên phủ lên đen, dải sẽ sẫm hơn ảnh Figma một chút nhưng đúng thông số gốc.

   Khối footer trong Builder PHẢI để trống màu nền: khối có màu nền thì công cụ dựng sinh
   một lớp `.dmdc-bg-layer` con vẽ ĐÈ lên nền của chính khối, che mất gradient này
   (xem scripts/theme-vietevent/seed-footer-gradient.mjs). */
.ve-footer {
  background-color: var(--ve-bg-2) !important;
  background-image: linear-gradient(90deg,
    rgba(253, 160, 0, .30) 0%,
    rgba(255, 208, 126, .30) 42.79%,
    rgba(253, 160, 0, .30) 90.9%) !important;
}
.ve-footer a { color: #fff; text-decoration: none; }
.ve-footer a:hover { color: var(--ve-gold-1); }
.ve-footer-head .dmdc-heading-title { color: var(--ve-gold-1); }
.ve-footer .ve-frow { width: 100%; }

/* Ô đăng ký bản tin — viên thuốc viền mảnh, nút chữ vàng nằm trong */
.ve-news-form {
  display: flex; align-items: stretch; width: 100%; max-width: 470px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px; overflow: hidden;
}
.ve-news-form input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 14px 22px; color: #fff; font-size: 15px;
}
.ve-news-form input::placeholder { color: rgba(255, 255, 255, .7); }
.ve-news-form button {
  flex: 0 0 auto; background: transparent; border: 0;
  padding: 14px 26px; color: var(--ve-gold-1);
  font-weight: 700; font-size: 15px; letter-spacing: .04em; cursor: pointer;
  transition: color .2s ease;
}
.ve-news-form button:hover { color: #fff; }

/* Danh sách liên hệ có biểu tượng cam */
.ve-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ve-contact li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; }
.ve-contact i { color: var(--ve-red); font-size: 16px; width: 18px; flex: 0 0 18px; margin-top: 3px; text-align: center; }

/* Cột liên kết */
.ve-flinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ve-flinks a { font-size: 16px; line-height: 1.5; }

/* Mạng xã hội — vòng tròn mờ */
.ve-social { display: flex; gap: 16px; }
.ve-social a {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
  transition: background .25s ease, color .25s ease;
}
.ve-social a:hover { background: #fff; color: var(--ve-bg); }

@media (max-width: 1024px) {
  .ve-footer .ve-frow { flex-direction: column !important; gap: 28px !important; }
  .ve-footer .ve-frow > .dmdc-el--container { width: 100% !important; }
}

/* Nút cuộn lên + rail mạng xã hội cố định bên phải (bản gốc) */
.ve-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 900; background: rgba(0, 0, 0, .55); border-radius: 5px 0 0 5px;
  display: flex; flex-direction: column;
}
.ve-rail a {
  width: 45px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.ve-rail a:hover { color: var(--ve-gold-1); }
@media (max-width: 700px) { .ve-rail { display: none; } }

/* Rail mạng xã hội dạng "Custom HTML" (trang Liên hệ) — markup gốc mang theo class
   .social-list/.item/... từ theme WP cũ, không có CSS đi kèm → hiện link xanh gạch
   chân trần trụi. Style lại theo cùng ngôn ngữ với .ve-rail ở trên. */
.social-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social-list .item a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 16px; text-decoration: none !important;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.social-list .item a:hover { background: var(--ve-gold-1); border-color: var(--ve-gold-1); color: var(--ve-bg) !important; }
.social-list .item.language a { width: auto; padding: 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------------- 13. RESPONSIVE */
@media (max-width: 1280px) {
  .ve-about { flex-direction: column !important; }
  .ve-about > .dmdc-el--container { width: 100% !important; }
  .ve-about-copy { padding: 48px 40px !important; }
}
@media (max-width: 1024px) {
  body.dmdc-theme-default { font-size: 16px; }
  .ve-events .ve-mosaic { width: 100% !important; flex-direction: column !important; gap: 24px !important; }
  .ve-mosaic > .dmdc-el--container { width: 100% !important; }
}
@media (max-width: 700px) {
  /* .ve-stats (2×2) và .ve-vm-row (2 cột) đã xử lý ở §8 và §5 — KHÔNG lặp lại ở đây.
     Trước 13/08/2026 chỗ này có `.ve-vm-row { flex-direction: column }` xếp chồng
     Tầm nhìn/Sứ mệnh, ngược với bản thiết kế mobile (hai thẻ nằm cạnh nhau). */
  .ve-about-copy { padding: 40px 24px !important; }
}

/* ==========================================================================
   13. MẪU DÙNG CHUNG: DANH SÁCH BÀI VIẾT & CHI TIẾT BÀI VIẾT
   --------------------------------------------------------------------------
   Mọi chuyên mục (Tin tức, Hậu trường sản xuất sự kiện, Dự án tiêu biểu,
   Sản xuất talkshow/truyền hình thực tế, Thư viện video) dùng CHUNG
   themes/default/category.ejs; mọi bài viết dùng CHUNG post.ejs. Nên chuẩn hoá
   một lần ở đây là áp cho toàn bộ.

   Bậc tiêu đề thống nhất với trang chủ / trang Giới thiệu:
     · Tiêu đề bài — CHI TIẾT  → H1, chữ hiển thị gradient vàng
     · Tiêu đề bài — DANH SÁCH → H3, trắng, đậm vừa (giống thẻ ngoài trang chủ)
     · Tiêu đề trong nội dung  → H2/H3 gradient vàng, cỡ giảm dần
   ========================================================================== */

/* ---------------------------------------------------- 13a. DANH SÁCH BÀI */
.stch-category-archive { background: var(--ve-bg); }

/* Nhãn "CHUYÊN MỤC" phía trên tên chuyên mục */
.stch-category-archive .badge-stch {
  background: var(--ve-red) !important;
  color: #fff !important;
  border: 0 !important;
  letter-spacing: .08em;
}

/* Tên chuyên mục = tiêu đề trang (H1) */
.stch-category-archive h1 {
  font-family: var(--ve-font-display);
  font-weight: 400 !important;
  font-size: clamp(28px, 2.6vw, 50px) !important;
  line-height: 1.3;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Thẻ từng bài trong danh sách */
.stch-archive-card {
  background: var(--stch-surface-lowest) !important;
  border: 1px solid var(--stch-outline-ghost);
  border-radius: var(--ve-radius-card);
  transition: border-color .2s ease, transform .2s ease;
}
.stch-archive-card:hover { border-color: rgba(253, 160, 0, .45); transform: translateY(-2px); }
.stch-archive-card img { border-radius: 14px; }

/* Tiêu đề bài TRONG DANH SÁCH = H3 trắng (khớp thẻ ngoài trang chủ) */
.stch-archive-card h3,
.stch-archive-card h3 a {
  font-family: var(--ve-font);
  color: #fff !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
  line-height: 1.4;
  text-decoration: none;
}
.stch-archive-card:hover h3 a { color: var(--ve-gold-1) !important; }
.stch-archive-card p { color: rgba(255, 255, 255, .72) !important; font-size: 16px; line-height: 1.65; }
.stch-archive-card .text-secondary,
.stch-archive-card .fw-bold.text-secondary { color: rgba(255, 255, 255, .55) !important; }

/* ---------------------------------------------------- 13b. CHI TIẾT BÀI */
.stch-editorial-post { background: var(--ve-bg); }

/* Tiêu đề bài KHI XEM CHI TIẾT = H1 gradient vàng, chữ hiển thị — giống tiêu đề
   các khối ngoài trang chủ và tiêu đề trang Giới thiệu. */
.stch-editorial-post h1 {
  font-family: var(--ve-font-display);
  font-weight: 400 !important;
  font-size: clamp(26px, 2.9vw, 56px) !important;
  line-height: 1.28;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- ĐƯỜNG DẪN PHÂN CẤP (breadcrumb) ----
   Dấu phân cách: Bootstrap mặc định vẽ "/" qua ::before. Đổi sang mũi tên Font Awesome
   (nạp bằng \f054 chứ không dùng thẻ <i>, để không phải chèn nút giả vào giữa các <li>).
   Chữ TRẮNG; mục đang xem mờ đi; rê chuột vào mục khác → vàng như màu tiêu đề. */
.ve-crumbs .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--ve-font); font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase;
}
.ve-crumbs .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.ve-crumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 9px;
  color: rgba(255, 255, 255, .38);
  float: none; display: inline-block; vertical-align: middle;
  padding: 0 10px;
}
.ve-crumbs .breadcrumb-item a {
  color: #fff; text-decoration: none;
  transition: color .18s ease;
}
.ve-crumbs .breadcrumb-item a:hover,
.ve-crumbs .breadcrumb-item a:focus-visible { color: var(--ve-gold-1); }
/* Mục cuối = bài đang xem: không phải liên kết nên KHÔNG đổi màu khi rê chuột */
.ve-crumbs .breadcrumb-item.active {
  color: rgba(255, 255, 255, .55);
  max-width: min(100%, 46ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) {
  .ve-crumbs .breadcrumb { font-size: 12px; }
  .ve-crumbs .breadcrumb-item.active { max-width: 100%; }
}

/* ---- DÒNG THÔNG TIN: tác giả · ngày đăng · lượt xem ---- */
.ve-post-meta__avatar {
  width: 48px; height: 48px; flex: 0 0 48px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--stch-outline-ghost);
  color: rgba(255, 255, 255, .6);
}
.ve-post-meta__author {
  color: #fff; font-family: var(--ve-font);
  font-size: 15px; font-weight: 700; line-height: 1.4;
}
.ve-post-meta__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 3px;
  color: rgba(255, 255, 255, .58); font-size: 14px;
}
.ve-post-meta__fact { display: inline-flex; align-items: center; gap: 7px; }
.ve-post-meta__fact i { font-size: 13px; color: var(--ve-gold-1); opacity: .85; }

/* ---- Ngày đăng + lượt xem trong THẺ DANH SÁCH ---- */
.ve-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  color: rgba(255, 255, 255, .55);
  font-family: var(--ve-font); font-size: 13px; letter-spacing: .02em;
}
.ve-card-meta__item { display: inline-flex; align-items: center; gap: 7px; }
.ve-card-meta__item i { font-size: 12px; color: var(--ve-gold-1); opacity: .85; }

/* ---- THÂN BÀI: quy chuẩn cỡ chữ theo từng màn hình, chữ trắng ---- */
.stch-post-content {
  font-family: var(--ve-font);
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  line-height: 1.75;
}
@media (max-width: 1024px) { .stch-post-content { font-size: 17px; line-height: 1.72; } }
@media (max-width: 700px)  { .stch-post-content { font-size: 16px; line-height: 1.7; } }

.stch-post-content p { margin-bottom: 1.15em; }
.stch-post-content strong, .stch-post-content b { color: #fff; font-weight: 700; }
.stch-post-content a { color: var(--ve-gold-1); text-decoration: underline; text-underline-offset: 3px; }
.stch-post-content a:hover { color: var(--ve-gold-2); }
.stch-post-content li { margin-bottom: .5em; }
.stch-post-content img { max-width: 100%; height: auto; border-radius: var(--ve-radius-card); }
.stch-post-content figcaption { color: rgba(255, 255, 255, .55); font-size: 15px; text-align: center; margin-top: 8px; }
.stch-post-content blockquote {
  border-left: 3px solid var(--ve-red);
  padding: 4px 0 4px 20px; margin: 1.5em 0;
  color: rgba(255, 255, 255, .8); font-style: italic;
}
.stch-post-content hr { border-color: var(--stch-outline-ghost); }
.stch-post-content table { width: 100%; border-collapse: collapse; }
.stch-post-content th, .stch-post-content td { border: 1px solid var(--stch-outline-ghost); padding: 10px 12px; }

/* Tiêu đề TRONG nội dung bài — cùng hệ gradient vàng, cỡ giảm dần theo bậc */
.stch-post-content h2,
.stch-post-content h3,
.stch-post-content h4 {
  font-family: var(--ve-font);
  font-weight: 700;
  line-height: 1.35;
  margin: 1.6em 0 .6em;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stch-post-content h2 { font-size: clamp(22px, 1.75vw, 32px); }
.stch-post-content h3 { font-size: clamp(19px, 1.35vw, 24px); }
.stch-post-content h4 { font-size: clamp(17px, 1.15vw, 20px); }

/* ---- THẺ TAG ---- */
.stch-editorial-post .badge-stch {
  display: inline-block;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--stch-outline-ghost) !important;
  color: rgba(255, 255, 255, .82) !important;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  transition: all .18s ease;
}
.stch-editorial-post .badge-stch:hover {
  background: rgba(253, 160, 0, .14) !important;
  border-color: rgba(253, 160, 0, .5) !important;
  color: var(--ve-gold-1) !important;
}

/* ---- CỘT BÊN (Tin mới nhất) ----
   LƯU Ý: `.stch-editorial-post` chỉ nằm trên <article> ở cột col-lg-8, còn <aside> ở
   cột col-lg-4 BÊN CẠNH — selector con của .stch-editorial-post không với tới. Neo theo
   vùng main CÓ CHỨA bài chi tiết để vẫn giới hạn đúng trang mà không phải sửa view. */
body.dmdc-theme-default main:has(.stch-editorial-post) aside > div {
  background: var(--stch-surface-lowest) !important;
  border: 1px solid var(--stch-outline-ghost);
}
body.dmdc-theme-default main:has(.stch-editorial-post) aside h4 {
  color: var(--ve-gold-1) !important; font-family: var(--ve-font); font-size: 18px; font-weight: 700;
}
/* Bootstrap `.text-dark` có !important nên phải thắng bằng đặc trưng chọn cao hơn */
body.dmdc-theme-default main:has(.stch-editorial-post) aside a,
body.dmdc-theme-default main:has(.stch-editorial-post) aside a.text-dark {
  color: rgba(255, 255, 255, .82) !important;
}
body.dmdc-theme-default main:has(.stch-editorial-post) aside a:hover { color: var(--ve-gold-1) !important; }
body.dmdc-theme-default main:has(.stch-editorial-post) .btn-premium,
.stch-editorial-post .btn-premium { background: var(--ve-red) !important; border: 0 !important; color: #fff !important; }

/* ------------------- 13c. POP-UP XEM VIDEO (chuyên mục Thư viện video) ----
   Bấm vào bài trong danh sách Thư viện video mở pop-up phát video thay vì
   chuyển trang; dưới video hiển thị thêm phần nội dung của bài nếu có. */
.ve-vmodal { position: fixed; inset: 0; z-index: 2000; display: none; }
.ve-vmodal.is-open { display: block; }
.ve-vmodal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); backdrop-filter: blur(3px); }
.ve-vmodal__panel {
  position: relative; z-index: 1;
  width: min(1000px, 92vw); max-height: 90vh; overflow-y: auto;
  margin: 5vh auto 0;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ve-radius-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: veVModalIn .28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes veVModalIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ve-vmodal__close {
  position: absolute; top: 8px; right: 12px; z-index: 2;
  background: transparent; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
.ve-vmodal__close:hover { color: var(--ve-gold-1); }
.ve-vmodal__player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ve-radius-card) var(--ve-radius-card) 0 0; overflow: hidden; }
.ve-vmodal__player iframe,
.ve-vmodal__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ve-vmodal__body { padding: 22px 26px 28px; }
.ve-vmodal__title {
  font-family: var(--ve-font-display); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 30px); line-height: 1.3; margin: 0 0 12px;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ve-vmodal__text { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.7; white-space: pre-line; }
.ve-vmodal__more { display: inline-block; margin-top: 16px; color: var(--ve-gold-1); font-weight: 600; text-decoration: none; }
.ve-vmodal__more:hover { color: var(--ve-gold-2); }
.ve-vmodal__more::after { content: " →"; }
.stch-archive-card.is-loading { opacity: .55; pointer-events: none; }
@media (max-width: 700px) {
  .ve-vmodal__panel { width: 96vw; margin-top: 3vh; }
  .ve-vmodal__body { padding: 18px 18px 24px; }
  .ve-vmodal__text { font-size: 16px; }
}

/* ------------------------------- 13d. PHÂN TRANG (dùng chung) --------------
   Áp cho CẢ trang danh sách chuyên mục (category.ejs) LẪN khối Post Grid dựng
   bằng Builder — hai nơi dùng chung markup .pagination-wrapper/.page-link nên
   một bộ CSS là đồng bộ. Lõi để nền sáng (bg-light text-dark) → phải khoác lại. */
.pagination-wrapper .pagination { flex-wrap: wrap; }
.pagination-wrapper .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 15px; font-weight: 600;
  box-shadow: none !important;
  transition: all .18s ease;
}
.pagination-wrapper .page-link:hover {
  background: rgba(253, 160, 0, .16) !important;
  border-color: rgba(253, 160, 0, .55) !important;
  color: var(--ve-gold-1) !important;
}
.pagination-wrapper .page-item.active .page-link {
  background: var(--ve-red) !important;
  border-color: var(--ve-red) !important;
  color: #fff !important;
}
.pagination-wrapper .page-item.disabled .page-link {
  background: transparent !important; border-color: transparent !important;
  color: rgba(255, 255, 255, .35) !important;
}
.pagination-wrapper .pagination-note { color: rgba(255, 255, 255, .5); font-size: 14px; }
@media (max-width: 700px) {
  .pagination-wrapper .page-link { min-width: 38px; height: 38px; font-size: 14px; padding: 0 9px; }
}

/* --------------- 13e. CỘT BÊN "TIN MỚI NHẤT" — có ảnh đại diện --------------
   5 bài mới nhất của mọi chuyên mục: ảnh vuông nhỏ bên trái, tiêu đề + ngày bên phải. */
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-sidebar-list {
  display: flex; flex-direction: column; gap: 16px;
}
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-item:last-child {
  padding-bottom: 0; border-bottom: 0;
}
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-thumb {
  flex: 0 0 76px; width: 76px; height: 76px;
  border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .3); font-size: 20px;
}
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-item:hover .stch-side-thumb img { transform: scale(1.07); }
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-body { min-width: 0; }
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  color: rgba(255, 255, 255, .86);
  font-family: var(--ve-font); font-size: 15px; font-weight: 600; line-height: 1.45;
  transition: color .18s ease;
}
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-item:hover .stch-side-title { color: var(--ve-gold-1); }
body.dmdc-theme-default main:has(.stch-editorial-post) .stch-side-date {
  display: block; margin-top: 5px;
  color: rgba(255, 255, 255, .45); font-size: 13px;
}

/* ------------------- 14. WIDGET LIÊN HỆ NỔI (Floating Contact) --------------
   Nội dung do Cài đặt chung > Widget Liên hệ nổi sinh ra (themes/default/partials/
   contact_widget.ejs). Bộ cài đặt và phần render ĐÃ CÓ SẴN trong lõi nhưng CHƯA
   TỪNG có CSS đi kèm — bật lên chỉ ra một chuỗi link trần trụi giữa trang. Khối
   dưới đây là phần định vị dùng chung + lớp áo theo phong cách VietEvent. */
.dmdc-contact-widget {
  position: fixed; z-index: 1035;
  display: flex; align-items: center; gap: 4px;
  padding: 10px 8px;
  background: rgba(0, 0, 0, .92);
  border: 1px solid var(--ve-gold-1);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.dmdc-contact-widget.cw-layout-vertical { flex-direction: column; }
.dmdc-contact-widget.cw-layout-horizontal { flex-direction: row; }
.dmdc-contact-widget.cw-pos-right { right: 18px; }
.dmdc-contact-widget.cw-pos-left { left: 18px; }
.dmdc-contact-widget.cw-align-top { top: 110px; }
.dmdc-contact-widget.cw-align-bottom { bottom: 96px; }
.dmdc-contact-widget.cw-align-middle { top: 50%; transform: translateY(-50%); }

.dmdc-contact-widget .cw-item {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 38px; height: 38px; padding: 0 4px;
  background: var(--cw-bg, transparent);
  color: var(--cw-text-color, var(--ve-gold-1)); text-decoration: none;
  border-radius: 10px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.dmdc-contact-widget .cw-item:hover {
  background: var(--cw-hover-bg, var(--ve-gold-1));
  color: var(--cw-hover-text, #000000);
  transform: scale(1.06);
}
.dmdc-contact-widget .cw-icon-box {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
/* Nhãn chỉ hiện ở chế độ "Chỉ văn bản" / "Cả hai" — chế độ icon vẫn giữ cho trình đọc màn hình.
   NGOẠI LỆ: bật "Trượt để hiện text khi Hover" thì chế độ icon PHẢI hiện nhãn lúc rê chuột.
   Trước đây nhãn bị ẩn kiểu sr-only nên bật tuỳ chọn trượt cũng không bao giờ thấy chữ. */
.dmdc-contact-widget .cw-label {
  font-family: var(--ve-font); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.dmdc-contact-widget.cw-mode-icons:not(.cw-hover-slide) .cw-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.dmdc-contact-widget.cw-mode-text .cw-icon-box { display: none; }
.dmdc-contact-widget.cw-mode-text .cw-item,
.dmdc-contact-widget.cw-mode-both .cw-item { padding: 0 12px; }

/* Trượt hiện nhãn khi rê chuột (Cài đặt > Trượt để hiện text khi Hover) */
.dmdc-contact-widget.cw-hover-slide .cw-label {
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width .28s ease, opacity .2s ease, margin .28s ease;
}
.dmdc-contact-widget.cw-hover-slide .cw-item:hover .cw-label { max-width: 200px; opacity: 1; margin-left: 2px; }
/* Xếp dọc: hộp phải tự nới theo nhãn dài nhất đang mở, không cắt cụt chữ */
.dmdc-contact-widget.cw-hover-slide { width: max-content; }
.dmdc-contact-widget.cw-hover-slide .cw-item { justify-content: flex-start; }
.dmdc-contact-widget.cw-hover-slide .cw-icon-box { flex: 0 0 30px; }

@keyframes cwShake {
  0%, 88%, 100% { transform: rotate(0); }
  90%, 94% { transform: rotate(-12deg); }
  92%, 96% { transform: rotate(12deg); }
}
.dmdc-contact-widget.cw-shake .cw-icon-box { animation: cwShake 2.4s infinite; }
@media (prefers-reduced-motion: reduce) {
  .dmdc-contact-widget.cw-shake .cw-icon-box { animation: none; }
}

/* Mobile: hạ xuống mép dưới, xếp ngang cho khỏi che nội dung */
@media (max-width: 700px) {
  .dmdc-contact-widget,
  .dmdc-contact-widget.cw-align-top,
  .dmdc-contact-widget.cw-align-middle,
  .dmdc-contact-widget.cw-align-bottom {
    top: auto; bottom: 14px; left: auto; right: 50%; transform: translateX(50%);
    flex-direction: row; gap: 2px; padding: 6px 10px; border-radius: 999px;
  }
  .dmdc-contact-widget .cw-item { min-width: 34px; height: 34px; }
  .dmdc-contact-widget .cw-icon-box { font-size: 16px; }
}

/* Thông báo kết quả đăng ký bản tin ở footer */
.ve-news-msg { margin-top: 10px; font-size: 14px; line-height: 1.5; min-height: 1px; }
.ve-news-msg.is-ok { color: #9ee49b; }
.ve-news-msg.is-err { color: #ffb4a2; }

/* ------------------------------ 15. NÚT LÊN ĐẦU TRANG ---------------------- */
.ve-btt {
  position: fixed; bottom: 24px; z-index: 1040;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  color: #fff; font-size: 17px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.ve-btt--right { right: 24px; }
.ve-btt--left { left: 24px; }
.ve-btt.is-on { opacity: 1; visibility: visible; transform: none; }
.ve-btt:hover { filter: brightness(1.1); transform: translateY(-2px); }
/* Trên mobile thanh liên kết nhanh nằm giữa mép dưới → đẩy nút lên cho khỏi chồng */
@media (max-width: 700px) { .ve-btt { bottom: 68px; width: 42px; height: 42px; } }

/* ============================== 16. TRANG LIÊN HỆ ==========================
   Biểu mẫu do lõi sinh ra (`views/modules/form.ejs`) mang sẵn CSS neo theo
   `.uid-<id>` — đặc trưng 0-2-0, và mặc định là ô input SÁNG (viền #ced4da) cho
   nền trắng. Trên nền tối của Viet Event nhìn như ô trắng dán lên trang, nên
   phải đè lại; dùng `!important` vì selector của module luôn thắng về đặc trưng. */
.ve-contact-form .dmdc-form-wrapper,
.ve-contact-form .dmdc-form-ajax { width: 100%; }

.ve-contact-form .form-label {
  color: rgba(255, 255, 255, .82) !important;
  font-family: var(--ve-font); font-size: 14px; font-weight: 600;
  letter-spacing: .01em; margin-bottom: 7px !important;
}
.ve-contact-form .form-label .text-danger { color: var(--ve-red) !important; }

.ve-contact-form .form-control,
.ve-contact-form .form-select {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: var(--ve-font); font-size: 16px;
  padding: 13px 16px !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ve-contact-form .form-control::placeholder { color: rgba(255, 255, 255, .38); }
.ve-contact-form .form-control:focus,
.ve-contact-form .form-select:focus {
  background: rgba(255, 255, 255, .08) !important;
  border-color: var(--ve-gold-1) !important;
  box-shadow: 0 0 0 3px rgba(253, 160, 0, .15) !important;
  outline: none;
}
/* Trình duyệt vẽ danh sách <option> bằng nền hệ thống — ép nền tối cho khỏi chữ trắng trên nền trắng */
.ve-contact-form .form-select option { background: #141414; color: #fff; }
.ve-contact-form textarea.form-control { min-height: 132px; resize: vertical; }
.ve-contact-form .dmdc-field-wrap { margin-bottom: 18px; }

.ve-contact-form .dmdc-submit-btn {
  border: 0 !important; border-radius: 999px !important;
  font-family: var(--ve-font); font-weight: 700; letter-spacing: .06em;
  box-shadow: 0 10px 26px rgba(245, 53, 1, .28) !important;
}
.ve-contact-form .dmdc-submit-btn:hover { transform: translateY(-2px); }

/* Khối thông báo sau khi gửi */
.ve-contact-form .dmdc-form-message {
  font-family: var(--ve-font); font-size: 15px; line-height: 1.6; border-radius: 12px;
}
.ve-contact-form .dmdc-form-message.alert-success,
.ve-contact-form .dmdc-form-message.text-success {
  background: rgba(80, 190, 90, .12) !important; border: 1px solid rgba(120, 220, 130, .35) !important;
  color: #a9e8a6 !important;
}
.ve-contact-form .dmdc-form-message.alert-danger,
.ve-contact-form .dmdc-form-message.text-danger {
  background: rgba(245, 53, 1, .12) !important; border: 1px solid rgba(245, 53, 1, .38) !important;
  color: #ffb4a2 !important;
}

/* ---- Cột thông tin liên hệ ---- */
.ve-contact-info .dmdc-icon-list { list-style: none; margin: 0; padding: 0; }
.ve-contact-info .dmdc-icon-list-item { margin-bottom: 16px; }
.ve-contact-info .dmdc-icon-list-item a,
.ve-contact-info .dmdc-icon-list-item > .dmdc-icon-list-icon {
  display: flex; align-items: flex-start; gap: 14px;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-family: var(--ve-font); font-size: 16px; line-height: 1.55;
  transition: color .18s ease;
}
.ve-contact-info .dmdc-icon-list-item a:hover { color: var(--ve-gold-1); }
.ve-contact-info .dmdc-icon-list-icon {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(253, 160, 0, .12); border: 1px solid rgba(253, 160, 0, .3);
  border-radius: 10px; color: var(--ve-gold-1); font-size: 15px;
}
.ve-contact-info .dmdc-icon-list-text { padding-top: 8px; word-break: break-word; }

.ve-contact-social { display: flex; gap: 10px; margin-top: 6px; }
.ve-contact-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: 16px; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ve-contact-social a:hover { background: var(--ve-gold-1); border-color: var(--ve-gold-1); color: #000000; }

/* ---- Bản đồ ---- */
.ve-contact-map .dmdc-google-maps {
  width: 100%; overflow: hidden;
  border-radius: var(--ve-radius-card);
  border: 1px solid rgba(255, 255, 255, .12);
}
.ve-contact-map iframe { display: block; border: 0; }
@media (max-width: 700px) { .ve-contact-map .dmdc-google-maps { height: 300px !important; } }

/* Hàng nhiều cột trong biểu mẫu: module ghi width theo % vào style INLINE và không có mốc
   responsive nào ⇒ trên điện thoại "Họ và tên" + "Số điện thoại" vẫn nằm cạnh nhau, mỗi ô
   chỉ còn ~138px. Ép xuống một cột (cần !important để thắng style inline). */
@media (max-width: 575.98px) {
  .dmdc-form-container .dmdc-form-row { flex-wrap: wrap; }
  .dmdc-form-container .dmdc-form-col { width: 100% !important; }
  .dmdc-form-container .dmdc-form-col + .dmdc-form-col { margin-top: 18px; }
}

/* ===================== 17. THỨ TỰ LỚP CỦA HEADER =========================
   Header (`.dmdc-site-header`) và cột "Tin mới nhất" trong trang chi tiết bài viết
   (`aside.sticky-top`) ĐỀU dùng class `.sticky-top` của Bootstrap ⇒ cùng `z-index: 1020`.
   Hai phần tử cùng lớp thì phần tử ĐỨNG SAU trong DOM vẽ đè lên — cột bên phải nằm sau
   header nên nó che mất menu con đang mở.

   Lưu ý: `z-index: 1050` trên chính `.dropdown-menu` KHÔNG cứu được, vì menu con nằm
   TRONG ngữ cảnh xếp lớp do header tạo ra; so sánh diễn ra ở mức header (1020) chứ không
   phải ở mức menu con.

   Theme đã có sẵn token `--stch-z-header: 1050` nhưng trước nay chỉ gán cho
   `.lumina-glass-header` — một header của theme mẫu KHÔNG dùng ở site này. */
body.dmdc-theme-default .dmdc-site-header { z-index: var(--stch-z-header, 1050); }

/* Khối "dính" nằm trong nội dung trang không có lý do gì phải tranh lớp với header
   hay các lớp nổi khác — hạ hẳn xuống. Vẫn dính bình thường. */
body.dmdc-theme-default main .sticky-top { z-index: 1; }

/* ================= 18. MẪU "DANH SÁCH BÀI VIẾT" (Templates) =================
   Chuyên mục nay dựng bằng MẪU trong Quản lý Giao diện (widget post_list) thay cho tệp
   cứng category.ejs. Module post_list vốn được viết cho nền SÁNG: thẻ bài mang thẳng
   class `bg-white`, tiêu đề `text-dark`, mô tả `text-muted`. Khối dưới đây khoác lại
   đúng bảng màu tối, giữ nguyên diện mạo bản danh sách trước đó. */

/* Nhãn "CHUYÊN MỤC" — viên thuốc đỏ như bản cũ */
.ve-cat-eyebrow .dmdc-heading-title {
  display: inline-block;
  padding: 7px 16px;
  background: var(--ve-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ve-font);
}

/* Tên chuyên mục = H1 gradient vàng, cùng hệ với tiêu đề trang chủ.
   `.ve-tag-title` dùng chung hệ này cho trang lưu trữ theo THẺ (/tag/{slug}) — cùng một
   bộ quy tắc để hai trang lưu trữ không bao giờ lệch nhau. */
.ve-cat-title .dmdc-post-title,
.ve-tag-title .dmdc-post-title {
  font-family: var(--ve-font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 50px);
  line-height: 1.3;
  text-align: center;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Thẻ từng bài ---- */
.ve-cat-list .post-list-card {
  background: var(--stch-surface-lowest);
  border: 1px solid var(--stch-outline-ghost);
  border-radius: var(--ve-radius-card);
  transition: border-color .2s ease, transform .2s ease;
}
.ve-cat-list .post-list-card:hover { border-color: rgba(253, 160, 0, .45); transform: translateY(-2px); }
/* Padding thân thẻ — trước đây module ghi cứng class `p-4`; nay là MẶC ĐỊNH của theme,
   admin đổi "Padding thẻ" trong Builder là đè được (module phát rule neo theo #plc-<id>). */
.ve-cat-list .post-list-body { padding: 20px 26px; }
@media (max-width: 767.98px) { .ve-cat-list .post-list-body { padding: 18px 20px; } }
.ve-cat-list .post-list-thumb-inner { border-radius: 14px 0 0 14px; }
@media (max-width: 767.98px) { .ve-cat-list .post-list-thumb-inner { border-radius: 14px 14px 0 0; } }

/* Tiêu đề bài TRONG DANH SÁCH = H3 trắng (khớp thẻ ngoài trang chủ) */
.ve-cat-list .post-title a {
  font-family: var(--ve-font);
  color: #fff;
  font-weight: 600;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.4;
}
.ve-cat-list .post-list-card:hover .post-title a { color: var(--ve-gold-1); }
/* Tiêu đề LUÔN chiếm đúng 2 dòng (2 × line-height 1.4 = 2.8em): bài tiêu đề ngắn mà để co
   lại 1 dòng thì thẻ đó thấp hơn các thẻ khác 18px, cả cột nhìn so le. */
.ve-cat-list .post-title a { min-height: 2.8em; }

.ve-cat-list .post-excerpt {
  color: rgba(255, 255, 255, .72);
  font-size: 16px; line-height: 1.65;
  opacity: 1 !important;
}

/* Ngày đăng · lượt xem */
.ve-cat-list .post-meta-top {
  color: rgba(255, 255, 255, .55);
  opacity: 1 !important;
  font-family: var(--ve-font); font-size: 13px;
  /* Một dòng duy nhất: bài nào có huy hiệu chuyên mục thì hàng meta xuống dòng, đội thẻ cao
     thêm ~18px và làm cả cột cao thấp lệch nhau. */
  flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
}
.ve-cat-list .post-meta-top .meta-icon { color: var(--ve-gold-1); opacity: .85; margin-right: 7px; }

/* "Đọc bài viết" — viên thuốc đỏ như nút của bản danh sách cũ */
.ve-cat-list .post-footer { border-top: 1px solid var(--stch-outline-ghost) !important; }
.ve-cat-list .read-more-link {
  padding: 10px 24px;
  background: var(--ve-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ve-font); font-size: .85rem;
  transition: background .2s ease, color .2s ease;
}
.ve-cat-list .read-more-link:hover { background: var(--ve-gold-1); color: #000; }

/* Ô trống khi bài chưa có ảnh */
.ve-cat-list .dmdc-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .25);
}

/* ---- 18b. post_list: hai kiểu hiển thị còn lại (Lưới / Nổi bật) ----
   Mở mẫu trong Builder rồi Lưu là SettingsPanel ghi đè `display_style` bằng giá trị mặc
   định của widget (list → grid) — không phải người dùng chọn. Nhánh grid/featured chỉ có
   màu cho nền SÁNG: tiêu đề `rgb(27,42,58)` trên nền đen là **đen trên đen**, nhìn như
   mất sạch danh sách. Khoác màu cho cả hai nhánh để đổi kiểu hiển thị kiểu nào cũng đọc được. */
.ve-cat-list .pl-grid-card,
.ve-cat-list .pl-feat-main,
.ve-cat-list .pl-feat-item {
  background: var(--stch-surface-lowest);
  border: 1px solid var(--stch-outline-ghost);
  border-radius: var(--ve-radius-card);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.ve-cat-list .pl-grid-card:hover,
.ve-cat-list .pl-feat-item:hover { border-color: rgba(253, 160, 0, .45); transform: translateY(-2px); }

.ve-cat-list .pl-grid-body,
.ve-cat-list .pl-feat-item-body { padding: 16px 18px 18px; }

/* Độ đậm 700 để KHỚP nhánh danh sách. Lưu ý: theme khai 600 cho `.post-title a` nhưng
   thẻ <a> ở nhánh danh sách mang sẵn class Bootstrap `fw-bold` (= 700 !important) trong
   markup của module, nên thực tế nó luôn ra 700. Nhánh lưới không có class đó ⇒ nếu để
   600 thì hai kiểu hiển thị lệch nhau dù CSS trông như đã thống nhất. */
.ve-cat-list .pl-grid-title a,
.ve-cat-list .pl-feat-main-title a,
.ve-cat-list .pl-feat-item-title {
  font-family: var(--ve-font);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.ve-cat-list .pl-grid-title a { font-size: clamp(17px, 1.15vw, 20px); }
.ve-cat-list .pl-feat-main-title a { font-size: clamp(20px, 1.6vw, 28px); }
.ve-cat-list .pl-feat-item-title { font-size: 15px; }
.ve-cat-list .pl-grid-card:hover .pl-grid-title a,
.ve-cat-list .pl-feat-item:hover .pl-feat-item-title { color: var(--ve-gold-1); }

/* Mô tả + meta: module làm mờ bằng `opacity` (cách trung tính, không chốt màu, hợp cho
   bản cài nền trắng). Ở đây đã chốt màu SẴN độ trong nên phải trả `opacity` về 1, không
   thì mờ chồng mờ: .72 × .78 = .56, chữ tối hơn hẳn nhánh danh sách.
   Phải chèn thêm `.dmdc-pl-grid` để lên 0-3-0 — bằng đúng 0-2-0 là THUA, vì thẻ <style>
   của module nằm sau <link> theme trong DOM. */
.ve-cat-list .pl-grid-excerpt,
.ve-cat-list .pl-feat-main-excerpt,
.ve-cat-list .pl-feat-item-excerpt { color: rgba(255, 255, 255, .72); line-height: 1.6; }
.ve-cat-list .dmdc-pl-grid .pl-grid-excerpt { opacity: 1; }

.ve-cat-list .pl-grid-meta,
.ve-cat-list .pl-feat-meta,
.ve-cat-list .pl-feat-item-meta { color: rgba(255, 255, 255, .55); font-size: 13px; }
.ve-cat-list .dmdc-pl-grid .pl-grid-date,
.ve-cat-list .dmdc-pl-grid .pl-grid-author,
.ve-cat-list .dmdc-pl-grid .pl-grid-views { opacity: 1; color: rgba(255, 255, 255, .55); }
.ve-cat-list .pl-grid-meta i,
.ve-cat-list .pl-feat-meta i,
.ve-cat-list .pl-feat-item-meta i { color: var(--ve-gold-1); opacity: .85; }

.ve-cat-list .pl-grid-thumb,
.ve-cat-list .pl-feat-main-thumb,
.ve-cat-list .pl-feat-item-thumb { background: rgba(255, 255, 255, .04); }
.ve-cat-list .pl-feat-noimg { color: rgba(255, 255, 255, .25); }

/* ============= 19. MẪU "CHI TIẾT BÀI VIẾT" (Templates) =====================
   Trang bài nay dựng bằng MẪU trong Quản lý Giao diện (widget) thay cho tệp cứng post.ejs.
   Các widget của lõi đều viết cho nền SÁNG (`bg-white` ghi thẳng vào thẻ, chữ #333/#212529),
   nên khối dưới đây khoác lại bảng màu tối, giữ đúng diện mạo bản trước. */

/* ---- Đường dẫn phân cấp ---- */
.ve-pd-crumbs .dmdc-breadcrumbs {
  font-family: var(--ve-font); font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase;
}
.ve-pd-crumbs .dmdc-breadcrumb-link { color: #fff; transition: color .18s ease; }
.ve-pd-crumbs .dmdc-breadcrumb-link:hover { color: var(--ve-gold-1); opacity: 1; }
.ve-pd-crumbs .dmdc-breadcrumb-item.active .dmdc-breadcrumb-text {
  color: rgba(255, 255, 255, .55); font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ve-pd-crumbs .dmdc-breadcrumb-item.active { font-weight: 400; min-width: 0; }
.ve-pd-crumbs .dmdc-breadcrumb-separator { color: rgba(255, 255, 255, .38); }

/* ---- Tiêu đề bài = H1 gradient vàng, font hiển thị ---- */
.ve-pd-title .dmdc-post-title {
  font-family: var(--ve-font-display);
  font-weight: 400 !important;
  font-size: clamp(26px, 2.9vw, 56px) !important;
  line-height: 1.28;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Tác giả · Ngày · Lượt xem · Thẻ ---- */
.ve-pd-meta { padding-bottom: 20px; border-bottom: 1px solid var(--stch-outline-ghost); }
.ve-pd-meta .dmdc-post-info-item { color: rgba(255, 255, 255, .58) !important; font-family: var(--ve-font); }
.ve-pd-meta .dmdc-post-info-item i { color: var(--ve-gold-1) !important; opacity: .85; }
.ve-pd-meta .dmdc-post-info-divider { color: rgba(255, 255, 255, .3) !important; }
.ve-pd-meta .dmdc-post-tags-label { color: rgba(255, 255, 255, .5); font-size: 13px; }
.ve-pd-meta .dmdc-post-tag {
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--stch-outline-ghost);
  color: rgba(255, 255, 255, .8); font-size: 13px; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ve-pd-meta .dmdc-post-tag:hover { background: var(--ve-gold-1); border-color: var(--ve-gold-1); color: #000; }

/* ---- Ảnh đại diện ---- */
.ve-pd-thumb .dmdc-post-featured-image { border-radius: var(--ve-radius-card) !important; }
.ve-pd-thumb img { max-height: none !important; }

/* ---- Thân bài: quy chuẩn cỡ chữ theo màn hình, chữ trắng ----
   Module post_content phát <style> riêng đặt màu #333/#212529 với selector 0-1-1;
   thêm một lớp class ở đây là thắng, không cần !important. */
.ve-pd-content .dmdc-post-content {
  font-family: var(--ve-font) !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
}
@media (max-width: 1024px) { .ve-pd-content .dmdc-post-content { font-size: 17px !important; } }
@media (max-width: 700px)  { .ve-pd-content .dmdc-post-content { font-size: 16px !important; } }
.ve-pd-content .dmdc-post-content strong,
.ve-pd-content .dmdc-post-content b { color: #fff; }
.ve-pd-content .dmdc-post-content a { color: var(--ve-gold-1); text-underline-offset: 3px; }
.ve-pd-content .dmdc-post-content a:hover { color: var(--ve-gold-2); }
.ve-pd-content .dmdc-post-content h2,
.ve-pd-content .dmdc-post-content h3,
.ve-pd-content .dmdc-post-content h4 {
  font-family: var(--ve-font); font-weight: 700; line-height: 1.35; margin: 1.6em 0 .6em;
  background: linear-gradient(90deg, var(--ve-gold-1), var(--ve-gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ve-pd-content .dmdc-post-content h2 { font-size: clamp(22px, 1.75vw, 32px); }
.ve-pd-content .dmdc-post-content h3 { font-size: clamp(19px, 1.35vw, 24px); }
.ve-pd-content .dmdc-post-content h4 { font-size: clamp(17px, 1.15vw, 20px); }
.ve-pd-content .dmdc-post-content img { border-radius: var(--ve-radius-card); }
.ve-pd-content .dmdc-post-content blockquote {
  background: rgba(255, 255, 255, .04) !important;
  border-left: 3px solid var(--ve-red) !important;
  color: rgba(255, 255, 255, .8);
}
.ve-pd-content .dmdc-post-content figcaption { color: rgba(255, 255, 255, .55); font-size: 15px; text-align: center; }

/* ---- Cột bên "Tin mới nhất" ---- */
.ve-pd-aside { position: sticky; top: 110px; }
.ve-pd-sidebox { background: var(--stch-surface-low); border-radius: var(--ve-radius-card); }

/* Thẻ tin trong cột bên: thu gọn thành ảnh vuông 76px + tiêu đề + ngày */
.ve-pd-side-list .dmdc-post-list-container { padding: 0 !important; }
.ve-pd-side-list .post-list-card {
  background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--stch-outline-ghost) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important; padding: 14px 0 !important;
  gap: 14px;
}
.ve-pd-side-list .post-list-card:first-child { padding-top: 0 !important; }
.ve-pd-side-list .post-list-card:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
.ve-pd-side-list .post-list-thumb {
  flex: 0 0 76px !important; width: 76px; height: 76px;
  border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .05);
}
.ve-pd-side-list .post-list-thumb-inner { aspect-ratio: 1 / 1 !important; height: 100% !important; min-height: 0 !important; border-radius: 12px; }
.ve-pd-side-list .post-list-body { padding: 0 !important; min-width: 0; }
.ve-pd-side-list .post-title { margin-bottom: 4px !important; }
.ve-pd-side-list .post-title a {
  font-family: var(--ve-font); font-size: 15px !important; font-weight: 600 !important;
  color: rgba(255, 255, 255, .86) !important; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ve-pd-side-list .post-list-card:hover .post-title a { color: var(--ve-gold-1) !important; }
.ve-pd-side-list .post-meta-top {
  order: 2; margin: 0 !important;
  color: rgba(255, 255, 255, .45) !important; opacity: 1 !important; font-size: 13px;
}
.ve-pd-side-list .post-meta-top .meta-icon { display: none; }
.ve-pd-side-list .post-meta-top .category-badge-list { display: none; }
/* Cột bên không cần mô tả và nút "Đọc bài viết" — chỉ làm rối */
.ve-pd-side-list .post-excerpt,
.ve-pd-side-list .post-footer { display: none !important; }

.ve-pd-more { margin-top: 22px; }
.ve-pd-more a, .ve-pd-more .dmdc-button {
  display: block; width: 100%; text-align: center;
  padding: 13px 24px; border-radius: 999px;
  background: var(--ve-red); color: #fff !important;
  font-family: var(--ve-font); font-weight: 700; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.ve-pd-more a:hover, .ve-pd-more .dmdc-button:hover { background: var(--ve-gold-1); color: #000 !important; }

@media (max-width: 1024px) { .ve-pd-aside { position: static; } }

/* ================= 20. TRANG LƯU TRỮ THEO THẺ (/tag/{slug}) =================
   Bấm vào thẻ ở cuối bài viết trước 12/08/2026 ra một dòng chữ trần (route chỉ res.send).
   Nay là MẪU trong Quản lý Giao diện (templates.type='tag') — hầu hết diện mạo dùng lại
   §18, phần dưới chỉ là những gì riêng của trang thẻ. */

/* Nhãn "THẺ" — dùng chung viên thuốc đỏ với nhãn "CHUYÊN MỤC" (xem §18) */

/* Mẫu CỨNG dự phòng themes/default/tag.ejs — chỉ chạy khi chưa gán mẫu Builder.
   Không đặt màu chữ trong markup nữa (theme quyết định) nên neo ở đây cho nền tối. */
.ve-tag-archive .stch-archive-card h3 a { color: var(--ve-gold-2); }
.ve-tag-archive .stch-archive-card h3 a:hover { color: var(--ve-red); }