/* ===== HHA DIGITAL — Lớp hiệu ứng (design-system motion) ===== */

/* Card hover lift — mượt, tiết chế */
.hha-card{transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s cubic-bezier(.2,.7,.2,1) !important}
.hha-card:hover{transform:translateY(-8px) !important; box-shadow:0 22px 48px rgba(2,32,71,.14) !important}

/* Buttons — chuyển động nhẹ + sáng khi hover */
.button{transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important}
.button:hover{transform:translateY(-2px); filter:brightness(1.04)}

/* Ảnh trong section — hover phóng nhẹ */
.hha-zoom{overflow:hidden;border-radius:16px}
.hha-zoom img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hha-zoom:hover img{transform:scale(1.06)}

/* Bộ đếm số */
.hha-count{font-variant-numeric:tabular-nums}

/* Marquee — dải chữ chạy ngang (kiểu sanvu) */
.hha-marquee{overflow:hidden;white-space:nowrap;width:100%}
.hha-marquee>span{display:inline-block;padding-left:100%;animation:hha-scroll 26s linear infinite;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:20px}
@keyframes hha-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Parallax nhẹ (JS gán transform) */
.hha-parallax{will-change:transform}

/* Tôn trọng người tắt chuyển động */
@media (prefers-reduced-motion: reduce){
  .hha-card,.button,.hha-zoom img{transition:none !important}
  .hha-marquee>span{animation:none !important;padding-left:0 !important}
  .hha-parallax{transform:none !important}
}

/* ===== CF7 form — đồng bộ trên trang UX Builder ===== */
.wpcf7-form .hha-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wpcf7-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#123A6B;margin-bottom:14px}
.wpcf7-form input:not([type=submit]),.wpcf7-form select,.wpcf7-form textarea{width:100%;height:48px;border:1px solid #D9E2EC;border-radius:10px;padding:0 14px;font-size:15px;color:#0F172A;background:#fff}
.wpcf7-form textarea{height:110px;padding:12px 14px}
.wpcf7-form input[type=submit]{background:#F97316;color:#fff;border:none;border-radius:999px;padding:14px 30px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 10px 24px rgba(249,115,22,.32);width:100%;transition:.2s}
.wpcf7-form input[type=submit]:hover{background:#EA6A0A;transform:translateY(-2px)}
@media(max-width:640px){.wpcf7-form .hha-row{grid-template-columns:1fr}}

/* Card trong cùng hàng bằng chiều cao nhau */
.row .col.hha-card > .col-inner{height:100%;display:flex;flex-direction:column;justify-content:flex-start}
/* Icon thẻ: hệ thống thống nhất, không gradient */
.hha-ico svg{display:block}
.hha-card:hover .hha-ico{background:#F97316;border-color:#F97316;transition:background .28s,border-color .28s}
.hha-card:hover .hha-ico svg{stroke:#ffffff;transition:stroke .28s}
.hha-ico{transition:background .28s,border-color .28s}

/* ===== Cân đối chữ dài & ảnh: cột ảnh/tiêu đề dính theo khi cuộn ===== */
@media (min-width: 850px){
  .hha-sticky > .col-inner{position:sticky;top:100px}
}
/* Chia đôi cột cho khối chữ rất dài — vẫn hiện đủ chữ, chỉ đọc dễ hơn */
@media (min-width: 850px){
  .hha-2col-text{column-count:2;column-gap:44px}
  .hha-2col-text > p{break-inside:avoid;margin-bottom:14px}
}
/* Danh sách gạch đầu dòng dạng thẻ cho dễ quét */
.hha-list-card{background:#F8FAFC;border:1px solid #E8EDF3;border-radius:16px;padding:22px 26px;margin:0 0 18px}
.hha-list-card ul{margin:0 !important;padding-left:20px}
.hha-list-card li{margin-bottom:6px}

/* ===== Lưới bài tin tức ===== */
.hha-blog .post-item .box-text{padding:20px 18px 22px;background:#fff;border-radius:0 0 14px 14px}
.hha-blog .post-item .box{height:100%;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid #E8EDF3;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.hha-blog .post-item .box:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(2,32,71,.13)}
.hha-blog .post-item .post-title{font-size:18px;font-weight:700;color:#0F172A;line-height:1.4}
.hha-blog .post-item .post-title:hover{color:#F97316}
.hha-blog .post-item .from_the_blog_excerpt{font-size:15px;color:#475569;line-height:1.7}
.hha-blog .post-item .post-meta{font-size:13px;color:#94A3B8}
.hha-blog .row{align-items:stretch}
.hha-blog .post-item .box-image img{object-fit:cover;object-position:center}
.hha-blog .post-item .box-text .post-meta{margin-bottom:6px}

/* ===== Mục lục tương tác (PA2) ===== */
.hha-toc-link{transition:background .2s,color .2s,padding-left .2s}
.hha-toc-link:hover{background:#FFF7F0;color:#F97316 !important;padding-left:18px}
.hha-toc-link.is-current{background:#FFF7F0;color:#F97316 !important;
  box-shadow:inset 3px 0 0 #F97316}
/* chừa chỗ cho header dính khi nhảy neo */
[id^="pa2-"]{scroll-margin-top:110px}

/* ===== Cân đối hero: ảnh cao bằng cột chữ ===== */
@media (min-width: 850px){
  .hha-hero-media img{height:670px !important;object-fit:cover;width:100%}
  .hha-hero-media .ux-slider-wrapper,.hha-hero-media .ux-slider,
  .hha-hero-media .flickity-viewport{height:670px !important}
}
/* Thẻ logo "Chúng tôi là ai": nền thương hiệu, lấp đầy cột */
@media (min-width: 850px){
  .hha-logo-card > .col-inner{background:linear-gradient(160deg,#F8FAFC 0%,#FFF7F0 100%);
    border:1px solid #E8EDF3;border-radius:20px;padding:46px 40px;
    display:flex;align-items:center;justify-content:center;min-height:620px}
  .hha-logo-card .img,.hha-logo-card img{max-width:330px;margin:0 auto}
}

/* ===== Dải LOGO chạy ngang (kiểu sanvu) — shortcode [hha_logo_marquee] ===== */
.hha-logobar{
  /* shortcode ghi vào các biến *-set; biến thật nhân thêm hệ số theo bề rộng màn hình
     (inline style luôn thắng media query nên phải tách hai tầng biến như thế này) */
  --hha-logo-scale:1;
  --hha-logo-h:calc(var(--hha-logo-h-set,34px) * var(--hha-logo-scale));
  --hha-logo-gap:calc(var(--hha-logo-gap-set,64px) * var(--hha-logo-scale));
  --hha-logo-speed:calc(var(--hha-logo-speed-set,34s) * var(--hha-logo-scale));
  --hha-logo-color:var(--hha-logo-color-set,#0F172A);
  position:relative; overflow:hidden; width:100%;
}
.hha-logobar__track{display:flex; width:max-content; will-change:transform;
  animation:hha-logoscroll var(--hha-logo-speed) linear infinite}
.hha-logobar:hover .hha-logobar__track{animation-play-state:paused}
.hha-logobar__group{display:flex; align-items:center; flex:none;
  gap:var(--hha-logo-gap); padding-right:var(--hha-logo-gap)}
.hha-logobar__item{display:flex; align-items:center; gap:12px; flex:none;
  color:var(--hha-logo-color)}
.hha-logobar__glyph{height:var(--hha-logo-h); width:auto; display:block; flex:none}
.hha-logobar__name{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:800; font-size:calc(var(--hha-logo-h) * .76); line-height:1;
  letter-spacing:-.02em; white-space:nowrap; color:inherit}
/* Logo thả từ thư mục: giữ nguyên màu, hoặc ép về đen / trắng cho đồng bộ */
.hha-logobar__img{height:var(--hha-logo-h); width:auto; display:block; max-width:none}
.hha-logobar__img.is-dark{filter:brightness(0) saturate(100%)}
.hha-logobar__img.is-light{filter:brightness(0) invert(1)}
@keyframes hha-logoscroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(max-width:820px){ .hha-logobar{--hha-logo-scale:.74} }
@media(max-width:480px){ .hha-logobar{--hha-logo-scale:.62} }
@media (prefers-reduced-motion: reduce){
  .hha-logobar__track{animation:none !important}
}

/* ===== NỀN TOÀN TRANG HHA ===== */
body{
  background-color:#FDFCFA;
  background-image:url("hha-bg.svg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
}
/* Gỡ nền trắng đặc của theme để lộ nền trang */
#wrapper,#main,#content,.page-wrapper,.content-area{background-color:transparent !important}
/* Thẻ nội dung giữ nền đặc để chữ luôn rõ */
.hha-card > .col-inner,.hha-logo-card > .col-inner{backdrop-filter:saturate(120%)}
/* Di động: bỏ fixed cho mượt */
@media (max-width:1024px){
  body{background-attachment:scroll;background-size:170% auto}
}

/* ── Bảo hiểm hiển thị: JS tắt hoặc lỗi nạp thì chữ vẫn phải hiện ── */
.no-js [data-animate]{opacity:1 !important;transform:none !important}