/* ==========================================================================
   bla-ux.css - kiểu dáng cho lớp tương thích shortcode UX Builder (inc/ux-shortcodes/).
   Mobile first: viết cho điện thoại trước, mở rộng bằng min-width. Điểm ngắt giống Flatsome cũ để bố cục không lệch:
   550px (medium), 850px (large). Màu/font dùng biến --bla-* (bla-tokens.css) kèm giá trị dự phòng.
   Phạm vi: mọi class bắt đầu bằng .bla-ux-; không đụng Bootstrap/Tailwind.
   ========================================================================== */

/* ---------- Nền chữ cơ bản trong vùng nội dung UX (giống nhịp chữ cũ: thân 16px, tiêu đề đậm) ---------- */
.bla-ux-section, .bla-ux-section * { box-sizing: border-box; }
.bla-ux-section { --ux-red: var(--bla-red, #ed1c24); --ux-yellow: var(--bla-yellow, #ffc50f); --ux-text: #000; --ux-link: #334862;
  position: relative; width: 100%; padding: var(--bla-ux-pad, 30px) 0; display: flex; flex-direction: column; justify-content: center;
  min-height: var(--bla-ux-h, 0); color: var(--ux-text); font-family: var(--bla-font, Roboto, system-ui, sans-serif); font-size: 16px; line-height: 1.6; }
.bla-ux-section__in { position: relative; z-index: 2; width: 100%; }
.bla-ux-section__bg, .bla-ux-section__ov { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bla-ux-section__ov { z-index: 1; }
.bla-ux-section__bgimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.bla-ux-section :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 .5em; color: inherit; font-weight: 700; line-height: 1.3; }
.bla-ux-section h1 { font-size: 1.7em; }
.bla-ux-section h2 { font-size: 1.6em; }
.bla-ux-section h3 { font-size: 1.25em; }
.bla-ux-section h4 { font-size: 1.125em; }
.bla-ux-section h5 { font-size: 1em; }
.bla-ux-section h6 { font-size: .9em; }
.bla-ux-section p { margin: 0 0 1.3em; }
.bla-ux-section :is(ul, ol) { margin: 0 0 1.3em 1.3em; padding: 0; }
.bla-ux-section a { color: var(--ux-link); text-decoration: none; }
.bla-ux-section a:hover { color: var(--ux-red); }
.bla-ux-section img { max-width: 100%; height: auto; }
.bla-ux-dark, .bla-ux-dark :is(h1, h2, h3, h4, h5, h6, p, li, a) { color: #fff; }

@media (min-width: 850px) { .bla-ux-section { min-height: var(--bla-ux-h, 0); } }
@media (max-width: 549px) { .bla-ux-section { min-height: var(--bla-ux-h-sm, var(--bla-ux-h, 0)); } }

/* ---------- Hàng / cột (lưới 12 phần, flex) ---------- */
.bla-ux-row { --g: 15px; --gb: 30px; display: flex; flex-flow: row wrap; width: 100%; max-width: 1200px; margin-inline: auto; }
.bla-ux-row--small { --g: 10px; --gb: 20px; }
.bla-ux-row--large { --g: 30px; --gb: 30px; }
.bla-ux-row--collapse { --g: 0px; --gb: 0px; }
.bla-ux-row--full { max-width: none; }
.bla-ux-row--middle { align-items: center; }
.bla-ux-row--bottom { align-items: flex-end; }
.bla-ux-row--center { justify-content: center; }
.bla-ux-row--right { justify-content: flex-end; }
.bla-ux-row--equal > .bla-ux-col > .bla-ux-col__in { height: 100%; }
.bla-ux-col__in .bla-ux-row { width: auto; max-width: none; margin-inline: -15px; }
.bla-ux-col { position: relative; min-width: 0; padding: 0 var(--g, 15px) var(--gb, 30px);
  flex: 0 0 calc(var(--span-sm, 12) / 12 * 100%); max-width: calc(var(--span-sm, 12) / 12 * 100%); }
.bla-ux-col__in { position: relative; width: 100%; padding: var(--pad, 0); }
.bla-ux-text-center { text-align: center; } .bla-ux-text-right { text-align: right; } .bla-ux-text-left { text-align: left; } .bla-ux-text-justify { text-align: justify; }
@media (min-width: 550px) {
  /* Tablet (550-849px): như Flatsome, cột dùng span__md nếu có, KHÔNG thì dùng span của màn lớn (trước đây rơi về span__sm làm trang xếp dọc, cao gấp đôi) */
  .bla-ux-col { flex-basis: calc(var(--span-md, var(--span, 12)) / 12 * 100%); max-width: calc(var(--span-md, var(--span, 12)) / 12 * 100%); }
  .bla-ux-col__in { padding: var(--pad-md, var(--pad, 0)); }
}
@media (min-width: 850px) {
  .bla-ux-col { flex-basis: calc(var(--span, 12) / 12 * 100%); max-width: calc(var(--span, 12) / 12 * 100%); }
  .bla-ux-col__in { padding: var(--pad, 0); }
}
@media (max-width: 549px) { .bla-ux-col__in { padding: var(--pad-sm, var(--pad, 0)); } }

/* Đổ bóng theo cấp 1-5 (thang bóng Material như thiết kế cũ) */
.bla-ux-depth-1 { box-shadow: 0 1px 3px -2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); }
.bla-ux-depth-2 { box-shadow: 0 3px 6px -4px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); }
.bla-ux-depth-3 { box-shadow: 0 10px 20px -12px rgba(0,0,0,.19), 0 3px 6px rgba(0,0,0,.23); }
.bla-ux-depth-4 { box-shadow: 0 14px 28px -18px rgba(0,0,0,.25), 0 10px 10px -10px rgba(0,0,0,.22); }
.bla-ux-depth-5 { box-shadow: 0 19px 38px -24px rgba(0,0,0,.30), 0 15px 12px -12px rgba(0,0,0,.22); }
[class*="bla-ux-depth-hover-"] { transition: box-shadow .3s; }
.bla-ux-depth-hover-1:hover { box-shadow: 0 1px 3px -2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); }
.bla-ux-depth-hover-2:hover { box-shadow: 0 3px 6px -4px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); }
.bla-ux-depth-hover-3:hover { box-shadow: 0 10px 20px -12px rgba(0,0,0,.19), 0 3px 6px rgba(0,0,0,.23); }
.bla-ux-depth-hover-4:hover { box-shadow: 0 14px 28px -18px rgba(0,0,0,.25), 0 10px 10px -10px rgba(0,0,0,.22); }
.bla-ux-depth-hover-5:hover { box-shadow: 0 19px 38px -24px rgba(0,0,0,.30), 0 15px 12px -12px rgba(0,0,0,.22); }

/* ---------- Hiển thị theo màn hình ---------- */
.bla-ux-hidden { display: none !important; }
@media (max-width: 549px) { .bla-ux-hide-sm { display: none !important; } }
@media (min-width: 550px) { .bla-ux-show-sm { display: none !important; } }
@media (min-width: 550px) and (max-width: 849px) { .bla-ux-hide-md { display: none !important; } }
@media (max-width: 549px), (min-width: 850px) { .bla-ux-show-md { display: none !important; } }

/* ---------- Khoảng trống, đường kẻ, ngăn xếp ---------- */
.bla-ux-gap { display: block; height: var(--h-sm, var(--h, 30px)); }
@media (min-width: 550px) { .bla-ux-gap { height: var(--h, 30px); } }
.bla-ux-divider { display: block; background: var(--bla-red, #ed1c24); opacity: 1; }
.bla-ux-divider.is-center { margin-inline: auto; } .bla-ux-divider.is-right { margin-left: auto; }
.bla-ux-stack { display: flex; flex-wrap: wrap; gap: var(--g, .5rem); justify-content: var(--jc-sm, var(--jc, flex-start)); align-items: var(--ai, stretch); }
.bla-ux-stack--col { flex-direction: column; }
@media (min-width: 550px) { .bla-ux-stack { justify-content: var(--jc, flex-start); } }
.bla-ux-textbox { position: absolute; transform: translate(-50%, -50%); width: var(--w-sm, var(--w, 60%)); max-width: 100%; z-index: 3; }
@media (min-width: 550px) { .bla-ux-textbox { width: var(--w, 60%); } }

/* ---------- Chữ ---------- */
.bla-ux-text { font-size: var(--fs-sm, var(--fs, inherit)); line-height: var(--lh-sm, var(--lh, inherit)); }
@media (min-width: 550px) { .bla-ux-text { font-size: var(--fs, inherit); line-height: var(--lh, inherit); } }
.bla-ux-text > :last-child { margin-bottom: 0; }

.bla-ux-title { display: flex; align-items: center; width: 100%; margin: 0 0 1em; text-transform: uppercase; }
.bla-ux-title__main { display: block; }
.bla-ux-title--center .bla-ux-title__main, .bla-ux-title--bold-center .bla-ux-title__main { margin: 0 15px; text-align: center; }
.bla-ux-title b { flex: 1 1 20px; height: 2px; background: currentColor; opacity: .1; }
.bla-ux-title--normal { border-bottom: 2px solid rgba(0,0,0,.1); }
.bla-ux-title a { color: inherit; }

/* ---------- Nút ---------- */
.bla-ux-btn { --b: var(--bla-red, #ed1c24); --bt: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 2.75em;
  padding: 0 1.4em; margin: 0 1em 1em 0; background: var(--b); color: var(--bt) !important; border: 2px solid var(--b); border-radius: 0;
  font-weight: 700; font-size: .97em; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.bla-ux-btn:hover { opacity: .9; }
.bla-ux-btn--secondary { --b: var(--bla-yellow, #ffc50f); --bt: #1d0e1f; }
.bla-ux-btn--white { --b: #fff; --bt: var(--bla-red, #ed1c24); }
.bla-ux-btn--success { --b: #4caf50; } .bla-ux-btn--alert { --b: #b20000; }
.bla-ux-btn--outline { background: transparent; color: var(--b) !important; }
.bla-ux-btn--outline:hover { background: var(--b); color: var(--bt) !important; opacity: 1; }
.bla-ux-btn--link, .bla-ux-btn--underline { background: transparent; border-color: transparent; color: var(--b) !important; padding: 0 .4em; }
.bla-ux-btn--underline span { text-decoration: underline; }
.bla-ux-btn--xsmall, .bla-ux-btn--smaller { font-size: .9em; } .bla-ux-btn--small { font-size: .9em; }
.bla-ux-btn--large { font-size: 1.1em; } .bla-ux-btn--larger { font-size: 1.25em; } .bla-ux-btn--xlarge { font-size: 1.5em; }
.bla-ux-btn--expand { display: flex; width: 100%; margin-right: 0; }
.bla-ux-btn.btn-skew { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); color: #fff !important; }

.bla-ux-videobtn { display: inline-flex; align-items: center; justify-content: center; width: 4em; height: 4em; padding: 0; border: 3px solid #fff; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; font-size: 1em; cursor: pointer; transition: transform .2s, background-color .2s; }
.bla-ux-videobtn:hover { background: var(--bla-red, #ed1c24); transform: scale(1.08); }
.bla-ux-videobtn i { font-size: 1.3em; margin-left: .15em; }

/* ---------- Mạng xã hội ---------- */
.bla-ux-social { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; }
.bla-ux-social.is-center { justify-content: center; } .bla-ux-social.is-right { justify-content: flex-end; }
.bla-ux-social__a { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid currentColor; color: #333 !important; font-size: .95em; transition: background-color .2s, color .2s; }
.bla-ux-social--fill .bla-ux-social__a { background: #fff; border-color: rgba(0,0,0,.25); }
.bla-ux-social__a:hover { background: var(--bla-red, #ed1c24); border-color: var(--bla-red, #ed1c24); color: #fff !important; }

/* ---------- Accordion (details/summary) ---------- */
.bla-ux-acc__item { border-bottom: 1px solid rgba(0,0,0,.1); }
.bla-ux-acc__title { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .8em 1em; font-weight: 700; cursor: pointer; list-style: none; min-height: 44px; background: #f4f4f4; }
.bla-ux-acc__title::-webkit-details-marker { display: none; }
.bla-ux-acc__item[open] > .bla-ux-acc__title { background: var(--bla-red, #ed1c24); color: #fff; }
.bla-ux-acc__item[open] > .bla-ux-acc__title i { transform: rotate(180deg); }
.bla-ux-acc__title i { transition: transform .2s; }
.bla-ux-acc__inner { padding: 1em; }

/* ---------- Người, ô biểu tượng ---------- */
.bla-ux-team { text-align: center; }
.bla-ux-team__fig { margin: 0 auto 1em; overflow: hidden; background: #f4f4f4; }
.bla-ux-team__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bla-ux-team__name { margin: 0 0 .25em; font-size: 1em; text-transform: uppercase; }
.bla-ux-team__title { margin: 0 0 .5em; font-size: .9em; opacity: .75; text-transform: uppercase; }
.bla-ux-team--large .bla-ux-team__name { font-size: 1.25em; } .bla-ux-team--small .bla-ux-team__name { font-size: .9em; }
.bla-ux-social--team { justify-content: center; }

.bla-ux-fbox { display: flex; align-items: flex-start; gap: 1em; margin-bottom: 1.3em; }
.bla-ux-fbox--center { flex-direction: column; align-items: center; text-align: center; }
.bla-ux-fbox__icon { flex: 0 0 auto; max-width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bla-ux-fbox__pic { width: 100%; height: auto; object-fit: contain; }
.bla-ux-fbox__text { flex: 1 1 0; min-width: 0; }
.bla-ux-fbox__text > :last-child { margin-bottom: 0; }
.bla-ux-plain, .bla-ux-plain:hover { color: inherit !important; text-decoration: none !important; display: block; }

/* ---------- Ảnh ---------- */
.bla-ux-img { position: relative; max-width: 100%; }
.bla-ux-img__in { position: relative; overflow: hidden; }
.bla-ux-img__in.is-crop .bla-ux-img__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bla-ux-img__pic { display: block; width: 100%; height: auto; }
.bla-ux-img--zoom .bla-ux-img__pic { transition: transform .5s; } .bla-ux-img--zoom:hover .bla-ux-img__pic { transform: scale(1.06); }

.bla-ux-box { position: relative; height: 100%; }
.bla-ux-box__link { height: 100%; }
.bla-ux-box__image { margin-inline: auto; }
.bla-ux-box__imgwrap { position: relative; overflow: hidden; }
.bla-ux-box__imgwrap.is-crop .bla-ux-box__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bla-ux-box__pic { display: block; width: 100%; height: auto; transition: transform .4s; }
.bla-ux-box:hover .bla-ux-box__pic { transform: scale(1.04); }
.bla-ux-box__ov { position: absolute; inset: 0; }
.bla-ux-box__text { padding: 1em; }
.bla-ux-box__textin > :last-child { margin-bottom: 0; }
.bla-ux-box--overlay .bla-ux-box__text { position: absolute; inset: 0; display: flex; padding: 1em; color: #fff; z-index: 2; background: none; }
.bla-ux-box--overlay .bla-ux-box__textin { width: 100%; align-self: center; }
.bla-ux-box--overlay .bla-ux-box__textin :is(h1,h2,h3,h4,h5,h6,p,a) { color: #fff; }
.bla-ux-box--pos-top .bla-ux-box__textin { align-self: flex-start; } .bla-ux-box--pos-bottom .bla-ux-box__textin { align-self: flex-end; }

/* ---------- Banner ---------- */
.bla-ux-banner { position: relative; display: flex; align-items: center; min-height: var(--h-sm, var(--h, 300px)); overflow: hidden; background: #222; color: #fff; }
@media (min-width: 550px) { .bla-ux-banner { min-height: var(--h, 300px); } }
.bla-ux-banner__bg, .bla-ux-banner__ov { position: absolute; inset: 0; }
.bla-ux-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bla-ux-banner__layers { position: absolute; inset: 0; z-index: 2; }
.bla-ux-banner :is(h1,h2,h3,h4,h5,h6,p,a) { color: #fff; }

/* ---------- Video (nạp iframe khi bấm) ---------- */
.bla-ux-video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.bla-ux-video img, .bla-ux-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.bla-ux-video .bla-ux-videobtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.bla-ux-video .bla-ux-videobtn:hover { transform: translate(-50%, -50%) scale(1.08); }
.bla-ux-dialog { border: 0; padding: 0; width: min(92vw, 960px); aspect-ratio: 16 / 9; background: #000; }
.bla-ux-dialog::backdrop { background: rgba(0,0,0,.8); }
.bla-ux-dialog iframe { width: 100%; height: 100%; border: 0; display: block; }
.bla-ux-dialog__x { position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.4em; cursor: pointer; }

/* ---------- Slider (scroll-snap; JS thêm nút/chấm/tự chạy) ---------- */
.bla-ux-slider { position: relative; }
.bla-ux-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.bla-ux-slider__track::-webkit-scrollbar { display: none; }
.bla-ux-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; position: relative; }
.bla-ux-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; cursor: pointer; font-size: 1.1em; opacity: 0; transition: opacity .2s; }
.bla-ux-slider:hover .bla-ux-slider__nav, .bla-ux-slider__nav:focus-visible { opacity: 1; }
.bla-ux-slider__nav--prev { left: 8px; } .bla-ux-slider__nav--next { right: 8px; }
.bla-ux-slider__dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.bla-ux-slider__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.bla-ux-slider__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bla-red, #ed1c24); background: transparent; }
.bla-ux-slider__dot.is-active::before { background: var(--bla-red, #ed1c24); }
@media (hover: none) { .bla-ux-slider__nav { opacity: 1; } }

/* Hàng cột dạng băng chuyền: slider-mobile-create (chỉ điện thoại/tablet), các hàng còn lại mọi màn hình */
.bla-ux-row.slider-mobile-create, .bla-ux-row.row-slider-hesinhthai, .bla-ux-row.row-slider-baotri2, .bla-ux-row.list-doitac, .bla-ux-row.slider-phanhoi {
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bla-ux-row.slider-mobile-create::-webkit-scrollbar, .bla-ux-row.row-slider-hesinhthai::-webkit-scrollbar, .bla-ux-row.row-slider-baotri2::-webkit-scrollbar,
.bla-ux-row.list-doitac::-webkit-scrollbar, .bla-ux-row.slider-phanhoi::-webkit-scrollbar { display: none; }
.bla-ux-row.slider-mobile-create > .bla-ux-col, .bla-ux-row.row-slider-hesinhthai > .bla-ux-col, .bla-ux-row.row-slider-baotri2 > .bla-ux-col,
.bla-ux-row.list-doitac > .bla-ux-col, .bla-ux-row.slider-phanhoi > .bla-ux-col { scroll-snap-align: start; }
@media (min-width: 850px) {
  .bla-ux-row.slider-mobile-create { flex-wrap: wrap; overflow: visible; }
}
.list-doitac .bla-ux-col img { height: 71px; width: auto; object-fit: contain; margin-inline: auto; }

/* ---------- Thẻ bài / sự kiện / khoá học ---------- */
.bla-ux-cards { display: grid; grid-template-columns: repeat(var(--cols-sm, 1), minmax(0, 1fr)); gap: 20px; }
@media (min-width: 550px) { .bla-ux-cards { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); } }
@media (min-width: 850px) { .bla-ux-cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.bla-ux-card { display: flex; flex-direction: column; min-width: 0; }
.bla-ux-card__img { display: block; position: relative; overflow: hidden; background: #f4f4f4; margin-bottom: 12px; }
.bla-ux-card__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bla-ux-card__title { margin: 0 0 10px; font-size: 1em; }
.bla-ux-card__title a { color: #000 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.5; }
.bla-ux-card__title a:hover { color: var(--bla-red, #ed1c24) !important; }
.bla-ux-card__date { font-size: .9em; opacity: .7; margin-bottom: 8px; }
.bla-ux-card__excerpt { margin: 0 0 10px; }
.bla-ux-card__more { font-weight: 700; color: var(--bla-red, #ed1c24) !important; }
.bla-ux-cards.is-horizontal { grid-template-columns: 1fr; }
.bla-ux-cards.is-horizontal .bla-ux-card { flex-direction: row; gap: 10px; }
.bla-ux-cards.is-horizontal .bla-ux-card__img { flex: 0 0 auto; width: 35%; margin: 0; align-self: flex-start; } /* flex-start: không bị kéo cao, giữ 16:9 */
.bla-ux-cards.is-horizontal .bla-ux-card__body { flex: 1 1 0; min-width: 0; }
.bla-ux-cards--event .info-event { font-size: .9em; color: gray; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 8px; }
.bla-ux-cards--event .info-event > div { width: 50%; }
.event-sidebar .info-event { display: none; }
.bla-ux-evfeat { position: relative; }
.bla-ux-evfeat__pic { display: block; width: 100%; height: auto; }
.bla-ux-evfeat__info { position: relative; background: #fff; margin: -40px 12px 0; padding: 16px; display: flex; flex-direction: column; gap: 1rem; box-shadow: rgba(0,0,0,.35) 0 5px 15px; }
@media (min-width: 550px) { .bla-ux-evfeat__info { flex-direction: row; justify-content: space-between; margin-inline: 20px; padding: 20px; } }
.bla-ux-evfeat__status { color: red; }
.bla-ux-menu__title { font-weight: 700; margin-bottom: .5em; }
.bla-ux-menu__list { list-style: none; margin: 0; padding: 0; }
.bla-ux-breadcrumb { padding: 20px 0; }

/* ---------- Hiệu ứng vào khung nhìn (chỉ khi JS sẵn sàng; tôn trọng giảm chuyển động) ---------- */
.bla-ux-anim-on .bla-ux-anim { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.bla-ux-anim-on .bla-ux-anim--fadeInUp { transform: translateY(24px); }
.bla-ux-anim-on .bla-ux-anim--fadeInLeft { transform: translateX(-24px); }
.bla-ux-anim-on .bla-ux-anim--fadeInRight { transform: translateX(24px); }
.bla-ux-anim-on .bla-ux-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bla-ux-anim-on .bla-ux-anim { opacity: 1; transform: none; transition: none; } .bla-ux-slider__track { scroll-behavior: auto; } }

/* ==========================================================================
   Quy tắc riêng của BLA (chuyển từ flatsome-child/assets/css/custom.css, đổi tên class sang .bla-ux-*).
   Chỉ giữ phần áp lên NỘI DUNG trang; phần header/footer thuộc theme.
   ========================================================================== */
.p-mb-0 p { margin-bottom: 0; }
.align-item-center { align-items: center; }
.lh-0, .lh-0 p { line-height: 0; }
.font-manr { font-family: 'Manrope', Arial, sans-serif !important; }
.no-text-shadown > * { text-shadow: none; }
.text-stroke * { text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px 5px #555; }
.img-shadown img { filter: drop-shadow(2px 4px 6px black); }
.bla-ux-btn.text-white { color: #fff; }
.stack-topbar .bla-ux-fbox { flex-wrap: nowrap; gap: 8px; }
.icon-box-intro .bla-ux-fbox__pic { height: 60px; object-fit: contain; }
.box-border.bla-ux-fbox { border: 1px solid #ccc; border-radius: 10px; padding: 10px; }
.box-icon-tuonglai .bla-ux-fbox__pic { height: 240px; object-fit: cover; }
.stack-social-contact .bla-ux-fbox svg { height: 30px; object-fit: contain; }
.box-img-intro { height: 100%; }
.box-img-intro .bla-ux-box__image::before { content: ""; position: absolute; inset: auto 0 0 0; height: 100%; background: #f4f4f4; z-index: -1; }
.box-img-intro .bla-ux-box__pic { width: auto; height: 200px; object-fit: contain; margin: 0 auto; display: block; position: static; }
.box-img-intro .bla-ux-box__text { box-shadow: rgba(0,0,0,.35) 0 5px 15px; height: calc(100% - 200px); }
.box-story-success { box-shadow: rgba(0,0,0,.1) 0 4px 12px; padding-top: 20px; }
.box-story-success .bla-ux-box__pic { height: 269px; object-fit: contain; }
.box-story-success p { font-size: 16px; }
.hdqt-about .bla-ux-team__fig { margin-bottom: 20px; border: 1px solid #ccc; }
.blog-index .bla-ux-card__title a { margin-bottom: 10px; line-height: 1.5; color: #000; }
.blog-index .bla-ux-card__more { text-transform: none; font-size: 1em; }
.arc-traihe .bla-ux-acc__item { margin-bottom: 20px; border-bottom: 0; }
.arc-traihe .bla-ux-acc__title { background-color: #4caf50; color: #fff; }
.arc-traihe .bla-ux-acc__item[open] > .bla-ux-acc__title { border: 1px solid #ccc; border-bottom: 0; background: #ed1c24; }
.arc-traihe .bla-ux-acc__inner { border: 1px solid #ccc; border-top: none; }
.table-3-column table, .table-3-column table td, .table-3-column table th { border: 1px solid #000; }
.table-3-column table { border-collapse: collapse; }
.table-3-column table td { padding: 10px; font-weight: 600; }
.table-3-column table tbody tr:first-child td { background-color: #ed1c24; color: #fff; text-transform: uppercase; }
.slider-video-vertical-col { max-height: 415px; overflow: hidden; }
.slider-video-vertical-col .bla-ux-banner { margin-bottom: 30px; }

/* Hiệu ứng nền slide đầu trang chủ cũ (cờ Đức + dải đỏ trượt vào khi slide được chọn) */
.bg-effect::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 180px; height: 0; transition: height 1s; background: url('../img/germany.png') no-repeat; background-size: contain; pointer-events: none; }
.bg-effect::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 1; width: 200px; height: 0; transition: height 1s; background: #ed1c24; transform: skewX(-15deg); pointer-events: none; }
.bla-ux-slide.is-selected .bg-effect::before { height: 200px; }
.bla-ux-slide.is-selected .bg-effect::after { height: 40%; }
@media (min-width: 1024px) { .bg-effect::before { width: 180px; } .bla-ux-slide.is-selected .bg-effect::before { height: 200px; } }
@media (min-width: 1611px) { .bg-effect::before { width: 417px; background-size: cover; } .bla-ux-slide.is-selected .bg-effect::before { height: 100%; } }
@media (min-width: 850px) { .bg-effect::after { right: 13%; width: 300px; } .bla-ux-slide.is-selected .bg-effect::after { height: 90%; } }

/* Logo trong nội dung ([shortcode_logo]) */
.bla-ux-logo { display: inline-block; } .bla-ux-logo img { display: block; height: auto; max-width: 100%; }

/* Ảnh đại diện bài viết/sự kiện/khóa học trong shortcode: luôn 16:9 dù nội dung cũ đặt tỉ lệ khác (image_height) */
.bla-ux-card__img { aspect-ratio: 16 / 9 !important; }
.bla-ux-evfeat__pic { aspect-ratio: 16 / 9; object-fit: cover; }