/*!
 * home-redesign.css
 * CSS redesign trang chu (Khanh Hung Academy) — tach tu ban HTML redesign moi.
 * Nap SAU home.min.css, chi cho is_page_template('page-template/home-template.php').
 * Cac khoi popup-sale/form/modal toan cuc da nam o footer.php — KHONG dua vao day.
 */

/* ============================================================
   1. KHA 3D Cube Badge (hero, GSAP-driven)
   ============================================================ */
/* ===== KHA 3D Cube Badge (GSAP-driven) ===== */
/* wrapper = chỉ là khung perspective, KHÔNG còn fill/khung hồng nữa */
.kha-flip-wrapper {
  overflow: visible !important;
  perspective: 1100px;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.kha-flip-wrapper::before,
.kha-flip-wrapper::after {
  display: none !important;
}
.kha-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}
/* mỗi mặt là một HỘP hoàn chỉnh → cả khối hồng quay cùng */
.kha-flip-front,
.kha-flip-back,
.kha-cube-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  box-sizing: border-box;
}
.kha-cube-face {
  position: absolute;
  inset: 0;
}
/* mặt sáng: nền hồng đặc, chữ trắng */
.kha-flip-front {
  background: #f41e92;
  border: 2px solid #f41e92;
}
.kha-flip-front .txt {
  color: #fff !important;
}
/* Mỗi mặt cube một màu cố định (hồng / xanh da trời mona.host / xanh lá / xanh mona.software) */
.kha-face-c1 { background: #f41e92 !important; border-color: #f41e92 !important; }
.kha-face-c2 { background: #18C0F0 !important; border-color: #18C0F0 !important; }
.kha-face-c3 { background: #22C55E !important; border-color: #22C55E !important; }
.kha-face-c4 { background: #2484E4 !important; border-color: #2484E4 !important; }
.kha-face-c1 .txt, .kha-face-c2 .txt,
.kha-face-c3 .txt, .kha-face-c4 .txt { color: #fff !important; }
/* mặt tối: nền tím đậm, viền + chữ hồng */
.kha-flip-back {
  position: absolute;
  inset: 0;
  background: #18C0F0;       /* fallback không còn đen (mặt sẽ được JS gán màu riêng) */
  border: 2px solid #18C0F0;
}
.kha-flip-back .txt {
  color: #fff !important;
}
/* ===== Big title hero trên nền tím — chữ vàng-cam nổi khối, viền cam + đổ bóng khối ===== */
.noi-khoi-stack { position: relative; }
.banner-inner-txt.banner-noi-khoi {
  position: relative;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  font-weight: 800;          /* extra bold */
  font-size: 4.4rem;
  letter-spacing: 0;
  line-height: 1.35;          /* nới để dấu tiếng Việt (Ộ, Ô) không bị đè */
  background: linear-gradient(180deg, #FECD1F 0%, #F59034 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Stroke cùng tông vàng-cam (không phải trắng) -> chữ dày lên mà không sinh viền trắng lỗi */
  -webkit-text-stroke: 1.2px #F59034;
  /* 1 bóng khối cứng tạo cảm giác nổi khối + 1 bóng mềm tách chữ khỏi nền tím */
  filter: drop-shadow(2px 2px 0 #C05C00) drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
/* Lớp chữ thứ 2 (nhân bản <p>, wrap khớp tuyệt đối), màu vàng đặc đè lên trên để che phần gradient/stroke giữa nét chữ, chỉ lộ viền */
.banner-inner-txt.banner-noi-khoi.nk-overlay {
  position: absolute;
  inset: 0;
  margin: 0;
  color: #FECD1F;
  -webkit-text-fill-color: #FECD1F;
  background: none;
  -webkit-text-stroke: 0;
  filter: none;
  pointer-events: none;
}
@media screen and (max-width: 1200px) {
  .banner-inner-txt.banner-noi-khoi { font-size: 3.4rem; }
}
@media screen and (max-width: 768px) {
  /* viền overlay vàng cùng độ dày để che hẳn stroke cam của lớp dưới */
  .banner-inner-txt.banner-noi-khoi.nk-overlay { -webkit-text-stroke: 1.4px #FECD1F; }
}
@media screen and (max-width: 576px) {
  .banner-inner-txt.banner-noi-khoi {
    font-size: 2.4rem;
    /* mobile: tăng tương phản — viền đậm hơn + quầng tối tách chữ khỏi nền tím */
    -webkit-text-stroke: 1.4px #C05C00;
    filter: drop-shadow(2px 2px 0 #9C4A00) drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  }
}
/* ===== Font UTM Bebas cho big title (nhúng tự chứa) ===== */
@font-face {
  font-family: 'UTM Bebas';
  src: url('/template/assets/font/UTM_Bebas/UTMBebas.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ===== Trang trí thỏi vàng hero — hiệu ứng xa/gần (6 thỏi, 3 tầng độ sâu) ===== */
.hero-gold-decor {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* sau nội dung (content z-index: 2) */
  pointer-events: none;
  overflow: visible;
  /* clip trên/trái/phải tại mép hero, nhưng CHO PHÉP tràn xuống dưới -> thỏi nằm trên cả 2 section */
  clip-path: polygon(0 0, 100% 0, 100% 320%, 0 320%);
}
/* slot định vị theo % + tâm; parallax ghi đè translate thứ 2 qua biến --px/--py */
.gold-coin {
  position: absolute;
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  will-change: transform;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.gold-coin img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  mix-blend-mode: screen;     /* glow đen biến mất -> chỉ còn vàng hoà vào nền, không bị cắt cứng */
}
/* nội dung hero nổi trên lớp vàng */
.banner-receive .container { position: relative; z-index: 2; }

/* ===== Hero circuit background — mạch điện phát sáng (tông tím-trắng/vàng đồng bộ brand) ===== */
.hero-circuit{
  position:absolute; inset:0; z-index:0;     /* trên gradient, dưới coin & content */
  pointer-events:none; overflow:hidden;
}
/* quầng sáng radial phía trên giống pin */
.hero-circuit::before{
  content:""; position:absolute; left:50%; top:-10%;
  width:120%; height:90%; transform:translateX(-50%);
  background:radial-gradient(60% 70% at 50% 0%,
              rgba(196,150,255,.55) 0%,
              rgba(140,70,210,.28) 38%,
              rgba(88,11,148,0) 72%);
  filter:blur(4px);
}
.hero-circuit svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* đường mạch nền mờ */
.hc-trace{ fill:none; stroke:rgba(216,180,255,.18); stroke-width:1.4; }
.hc-trace.gold{ stroke:rgba(255,213,106,.16); }
/* xung sáng chạy dọc mạch */
.hc-pulse{
  fill:none; stroke:#efe2ff; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:46 1400;
  filter:url(#hcGlow);
  animation:hc-run linear infinite;
}
.hc-pulse.gold{ stroke:#ffd98c; }
@keyframes hc-run{ from{ stroke-dashoffset:1446; } to{ stroke-dashoffset:0; } }
/* nút mạch */
.hc-node{ fill:#efe2ff; filter:url(#hcGlow); animation:hc-node 3.4s ease-in-out infinite; }
.hc-node.gold{ fill:#ffd98c; }
@keyframes hc-node{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
/* hạt bụi sáng lơ lửng */
.hc-dot{ fill:#cdb4ff; animation:hc-twinkle ease-in-out infinite; }
@keyframes hc-twinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }
@media (prefers-reduced-motion:reduce){
  .hc-pulse,.hc-node,.hc-dot{ animation:none; }
}

/* ===== Đồng bộ padding dọc cho TẤT CẢ section = 120px; riêng hero padding-top = 56px ===== */
.sec-com{ padding-top:12rem !important; padding-bottom:12rem !important; }
.banner-receive .banner.sec-com{ padding-top:5.6rem !important; }   /* hero top 56px */
.sec-com.colleague-success{ padding-top:0 !important; padding-bottom:0 !important; }
.colleague-success .colleague-success-wrap{ position:relative; padding-top:120px !important; padding-bottom:120px !important; background:linear-gradient(to bottom, #440873 0%, #7C0FD2 100%) !important; }
/* Light.svg trang trí 2 góc trên section đại sảnh */
.colleague-success .hof-light{ position:absolute; top:50px; z-index:3; width:34rem; max-width:40vw; height:auto; scale:1.8; mix-blend-mode:screen; pointer-events:none; user-select:none; }
.colleague-success .hof-light--right{ right:0; }
.colleague-success .hof-light--left{ left:0; transform:scaleX(-1); }
@media (max-width:768px){ .colleague-success .hof-light{ width:42vw; } }
.colleague-success .hall-of-fame{ padding-bottom:0 !important; }
/* ===== Mobile: giảm padding dọc section còn 64px (desktop vẫn giữ 120px) ===== */
@media (max-width:768px){
  .sec-com{ padding-top:6.4rem !important; padding-bottom:6.4rem !important; }
  .colleague-success .colleague-success-wrap{ padding-top:64px !important; padding-bottom:64px !important; }
  /* section .data nền tím: padding-bottom đồng bộ với các section khác ở mobile (6.4rem = 64px).
     Dùng .style-top để tăng specificity, thắng rule global .data.sec-com{padding-bottom:120px} */
  .data.sec-com.style-top{ padding-bottom:6.4rem !important; }
  /* phóng to hình máy tính (data) ~scale 1.4 bằng width (reflow chuẩn; tràn ngang đã được .data overflow:hidden clip) */
  .data-image{ width:140% !important; max-width:none !important; margin-left:-20% !important; margin-right:-20% !important; transform:none !important; }
  /* tách 4 card màu khỏi hình máy tính -> có padding cho dễ đọc */
  .data-inner{ gap:3.2rem !important; }
  /* phóng to mũi tên giữa 2 ảnh 2018 -> 2026 */
  .staff-zero-hero-arrow{ width:4rem !important; }
  /* tăng khoảng cách giữa 2 ảnh 2018/2026 (mobile xếp dọc) */
  .staff-zero-hero-list{ gap:8rem !important; }
  /* hero: thu nhỏ thỏi vàng lớp GẦN (data-depth=1.0, gốc 240px) */
  .banner-receive .gold-coin[data-depth="1.0"]{ width:150px !important; }
  /* hero: thu nhỏ hiệu ứng sao băng (meteors) */
  .hero-meteors svg{ transform:scale(.7); transform-origin:center; }
  /* bỏ padding-bottom:2.4rem của .courses-personalized-data-wrap (home.min.css, breakpoint mobile)
     + giảm overlap: margin-top gốc -8rem (tuned cho desktop, padding-bottom section 120px) ăn hết
     padding-bottom 64px của section Quyền lợi ở mobile → nội dung cuối sát section kế. Giảm còn -2rem. */
  .courses-personalized-data-wrap{ padding-bottom:0 !important; margin-top:-2rem !important; }
}

/* ===== Redesign section "Đồng nghiệp nói gì" — nền trắng, tiêu đề selection-box ===== */
.colleague-club{ background:#fff !important; }
.colleague-club .colleague-club-mask{ display:none !important; }
/* ===== Ẩn texture/confetti colleague-success ===== */
#tsparticles, #stars, #stars2, #stars3 { display: none !important; }

/* ===== Title "Đại sảnh danh vọng" — chữ nổi khối 3D (thay ảnh) ===== */
.hall-of-fame .hall-of-fame-header .img-tt{ max-width:none !important; }
.hall-of-fame .hall-of-fame-header .hof-title{
  position:relative;
  margin:0; text-align:center; text-transform:uppercase;
  font-weight:800; font-size:7.2rem; line-height:1.32; letter-spacing:.02em; white-space:nowrap;
  background: linear-gradient(180deg,#FECD1F 0%,#F59034 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:1px #FFE0B5;
  paint-order:stroke fill;
  filter:drop-shadow(2px 2px 0 #C05C00);
}
/* Lớp gradient vàng đè khít lên trên — che phần stroke lẹm vào trong nét chữ */
.hall-of-fame .hall-of-fame-header .hof-title .hof-top{
  position:absolute; inset:0; pointer-events:none;
  background: url("/template/assets/images/home/gold-glitter.jpg") center/cover, linear-gradient(180deg,#FECD1F 0%,#F59034 100%);
  background-blend-mode: overlay;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:0;
}
/* ===== Mạ vàng glitter cho box "E-Learning CHỤC TỶ" ===== */
.hall-of-fame .hall-of-fame-list .tens-billions .gold-mask{
  position:absolute; inset:0; pointer-events:none;
  background: url("/template/assets/images/home/gold-glitter.jpg") center/cover;
  mix-blend-mode: overlay;
  border-radius: inherit;
}
/* ===== Hiệu ứng bạc cho box "E-Learning TIỀN TỶ" ===== */
.hall-of-fame .hall-of-fame-list .hall-of-fame-tt.silver .silver-mask{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: url("/template/assets/images/home/kha-badge-bg.jpg") center/cover;
  mix-blend-mode: overlay;
  border-radius: inherit;
}
.hall-of-fame .hall-of-fame-list .hall-of-fame-tt.silver{ border-color:#b8b8b8 !important; }
.hall-of-fame .hall-of-fame-list .hall-of-fame-tt.silver .txt{ color:#000 !important; }
.hall-of-fame .hall-of-fame-list .hall-of-fame-tt.silver .icon img{ filter:brightness(0) !important; }
@media (max-width:1200px){ .hall-of-fame .hall-of-fame-header .hof-title{ font-size:5rem; } }
@media (max-width:576px){ .hall-of-fame .hall-of-fame-header .hof-title{ font-size:2.6rem; } }
/* desc-f: bỏ lớp gradient + 2 line, chỉ giữ text */
.hall-of-fame .hall-of-fame-header .desc-f{ margin-top:8px !important; padding:0 !important; }
.hall-of-fame .hall-of-fame-header .desc-f .desc-f-shape{ display:none !important; }
.hall-of-fame .hall-of-fame-header .desc-f::before,
.hall-of-fame .hall-of-fame-header .desc-f::after{ display:none !important; content:none !important; }
/* tagline to hơn */
.hall-of-fame .hall-of-fame-header .desc{ font-size:2.8rem !important; font-weight:700 !important; background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important; mix-blend-mode:normal !important; }
@media (max-width:1200px){ .hall-of-fame .hall-of-fame-header .desc{ font-size:2.2rem !important; } }
@media (max-width:576px){ .hall-of-fame .hall-of-fame-header .desc{ font-size:1.8rem !important; } }



/* khối tiêu đề */
.colleague-club .cclub-head{ position:relative; text-align:center; margin-bottom:4.8rem; }
.colleague-club .cclub-title{
  margin:0; text-align:center; text-transform:uppercase;
  font-size:4rem; font-weight:800; line-height:1.28; letter-spacing:.3px;
  color:#23202e;
}
/* phần highlight "Đồng nghiệp nói gì" — theo Figma node 13:10: 2 box lồng nhau,
   mỗi box 1 stroke riêng + bo 8px riêng. Box trong (13:6) fill #cb0b8b + viền 4px;
   box ngoài (13:9) chỉ viền 8px, không nền. Cả 2 viền rgba(203,11,139,.1). */
.colleague-club .cclub-hl{                              /* fill box 13:6 */
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding:calc(.42em + 2px) .4em .28em;   /* top > bottom: canh giữa quang học (chữ in hoa + dấu lệch lên) */
  color:#fff; -webkit-text-fill-color:#fff;            /* chữ trắng */
  border-radius:8px; z-index:0;
  background:#F51E92;                                   /* hồng primary website (đồng bộ box 2light tiêu đề) */
  /* 2 lớp stroke đều strokeAlign:OUTSIDE, chồng lên nhau (như Figma 13:9 + 13:6):
     8px (vẽ vùng 0–8px) + 4px (vẽ vùng 0–4px), cùng rgba(203,11,139,.1).
     Vùng 0–4px có CẢ 2 lớp → opacity cộng dồn ~.19 (đậm); vùng 4–8px chỉ 1 lớp → .10 (nhạt). */
  text-shadow:0px 4px 6px rgba(16,24,40,.03), 0px 12px 16px rgba(16,24,40,.08);  /* Figma drop-shadow chữ */
}
/* vòng ping phía sau box — ripple chạy TRONG dải stroke (box-shadow nở 0→8px rồi mờ) */
.colleague-club .cclub-ping{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:8px;
}
/* tăng spacing 2 dòng tiêu đề: chừa chỗ cho viền kép của box highlight, không đè dòng dưới */
.colleague-club .cclub-title{ line-height:1.5; }
.colleague-club .cclub-rest{ display:inline-block; margin-top:0.8rem; }

/* === Đồng bộ format highlight tiêu đề section theo "Đồng nghiệp nói gì" (.cclub-hl):
   box magenta đặc #cb0b8b + chữ trắng + bo 8px, bỏ viền gạch gradient động.
   Áp cho mọi .sec-com-tt; section Quyền lợi (#quyen_loi) tiêu đề là ảnh nên KHÔNG bị ảnh hưởng. === */
.sec-com-tt .txt-ani-bg::before{
  background:#F51E92 !important; width:100% !important; border-radius:8px !important;
}
.sec-com-tt .txt-ani-bg .txt{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  text-shadow:0 4px 6px rgba(16,24,40,.03), 0 12px 16px rgba(16,24,40,.08) !important;
}
/* tiêu đề "KHÁNH HÙNG LÀ AI": pill "là ai" viết hoa + đồng bộ cỡ chữ với "KHÁNH HÙNG" */
.intro-khanhhung-tt.sec-com-tt .txt-ani-bg .txt{ font-size:inherit !important; text-transform:uppercase !important; }
/* pill "đã bao gồm 253 bài học": in hoa toàn bộ */
.lesson-400 .txt-ani-bg .txt{ text-transform:uppercase !important; }
.sec-com-tt .txt-ani-bg .icon,
.sec-com-tt .txt-ani-bg .ic{ display:none !important; }   /* bỏ hết icon trong box (cả .icon lẫn .ic) */
/* copy hiệu ứng ping/ripple của cclub-hl → box tiêu đề: 2 vòng so le nở 0→8px rồi mờ (màu #F51E92) */
@keyframes ttPing{ 0%{ box-shadow:0 0 0 0 rgba(245,30,146,.5); } 100%{ box-shadow:0 0 0 8px rgba(245,30,146,0); } }
.sec-com-tt .txt-ani-bg.style-border{ overflow:visible !important; }
.sec-com-tt .txt-ani-bg.style-border::after{
  content:"" !important; display:block !important; position:absolute !important; inset:0 !important;
  z-index:-1 !important; border:none !important; background:none !important; border-radius:8px !important;
  animation:ttPing 1.8s cubic-bezier(0,0,.2,1) infinite !important;   /* thay viền gạch động bằng ripple */
}
.sec-com-tt .txt-ani-bg::before{ animation:ttPing 1.8s cubic-bezier(0,0,.2,1) infinite !important; animation-delay:.9s !important; }
@media (prefers-reduced-motion:reduce){
  .sec-com-tt .txt-ani-bg.style-border::after, .sec-com-tt .txt-ani-bg::before{ animation:none !important; }
}

/* cursor + tên học viên lơ lửng 2 bên */
.colleague-club .cclub-cursor{
  position:absolute; z-index:4; display:inline-flex; align-items:center;
  padding:.5rem 1.1rem; border-radius:1.4rem 1.4rem 1.4rem .3rem; color:#fff;
  font-size:1.3rem; font-weight:700; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  /* bồng bềnh + di chuyển theo scroll do GSAP điều khiển (xem script cuối trang) */
}
/* mũi tên cùng màu với pill (kế thừa qua biến --cur) */
.colleague-club .cclub-cursor .cclub-arrow{
  position:absolute; top:-13px; left:-11px; width:19px; height:19px;
  fill:var(--cur); filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
/* Huân Academy: mũi tên ở góc trên-PHẢI → góc nhọn cũng ở trên-phải (TL TR BR BL) */
.colleague-club .cclub-cursor--left{ --cur:#22b07d; left:5%;  top:-.4rem;  background:var(--cur); border-radius:1.4rem .3rem 1.4rem 1.4rem; }
/* mũi tên Huân Academy: lật sang phải, hướng vào tiêu đề */
.colleague-club .cclub-cursor--left .cclub-arrow{ left:auto; right:-11px; transform:scaleX(-1); }
/* Quyết Trần Academy: mũi tên ở góc trên-TRÁI → góc nhọn cũng ở trên-trái */
.colleague-club .cclub-cursor--right{ --cur:#7c0fd1; right:5%; bottom:-1.2rem; background:var(--cur); border-radius:.3rem 1.4rem 1.4rem 1.4rem; }
@keyframes cclubFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ===== Card: video trên cùng → H6 tiêu đề → hồ sơ (avatar 44px) ===== */
.colleague-club .wrap{ justify-content:flex-start; }
.colleague-club .content{ order:0; margin-bottom:1.4rem; }      /* video lên đầu */
/* H6 tiêu đề (tên khóa học) dưới video */
h6.cclub-vtitle{
  margin:0 0 .8rem; font-size:1.9rem; font-weight:700;   /* spacing tới info = 8px */
  line-height:1.35; color:#23202e;
}
/* hồ sơ học viên: avatar 44px + (tên • PRO cùng hàng) + chức vụ */
.colleague-club .info{ --sizeAvt:4.4rem; padding:0; gap:1rem; align-items:center; }
.colleague-club .info-avt{ border-width:.2rem; flex-shrink:0; }
.colleague-club .info-txt{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.colleague-club .info-txt .info-name{ margin:0; }
.colleague-club .info-txt > .tag-list{ margin:0; display:inline-flex; }  /* PRO nằm ngang với tên */
.colleague-club .info-role{
  flex-basis:100%;                         /* chức vụ xuống dòng riêng */
  font-size:1.2rem; font-weight:400; font-style:italic; color:#6a6a78;
  margin:.2rem 0 0;
}
@media (max-width:600px){
  .colleague-club .cclub-cursor{ display:none; }
  .colleague-club .cclub-title{ font-size:2.4rem; }
  .colleague-club .cclub-head{ margin-bottom:3.2rem; }
}

/* ===== Colleagues-another marquee 3 hàng ===== */
.colleagues-another-marquee { overflow: hidden; display: flex; flex-direction: column; gap: 16px; width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.cam-row { overflow: hidden; }
.cam-track { display: flex; width: max-content; gap: 16px; align-items: stretch; }
.cam-track .cam-item { --cam-h: 26.4rem; flex: 0 0 auto !important; width: auto !important; height: var(--cam-h); padding: 0 !important; margin: 0 !important; }
@media (max-width:768px){ .cam-track .cam-item { --cam-h: 18rem; } }
.hall-of-fame .hall-of-fame-content .cam-track .cam-item .wrap { display: inline-block !important; height: 100% !important; width: auto !important; padding: 0 !important; gap: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.hall-of-fame .hall-of-fame-content .cam-track .cam-item .title { display: none !important; }
/* Cố định tỉ lệ ảnh cover 4:3 (ảnh gốc 2000x1500) → chiều rộng thumb tính THẲNG từ chiều cao
   (width = --cam-h * 4/3), KHÔNG suy ra qua aspect-ratio + width:auto.
   Lý do: Safari bỏ qua aspect-ratio khi inline-block bọc <img width:100%> và width:auto,
   rồi lấy chiều rộng GỐC của ảnh (~2000px) → item phình full, sai tỉ lệ, tràn layout.
   Set width tường minh cho kết quả giống hệt Chrome nhưng vá được Safari. */
.hall-of-fame .hall-of-fame-content .cam-track .cam-item .img-thumb { border-radius: 1.2rem !important; overflow: hidden; aspect-ratio: 4 / 3; height: 100% !important; width: calc(var(--cam-h) * 4 / 3) !important; max-width: none !important; display: inline-block !important; vertical-align: top; }
.hall-of-fame .hall-of-fame-content .cam-track .cam-item .img-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block !important; transition: scale 1s; }
.hall-of-fame .hall-of-fame-content .cam-track .cam-item .wrap:hover .img-thumb img { scale: 1.05; }
.cam-ltr .cam-track { animation: cam-scroll-ltr 220s linear infinite; }
.cam-row--3 .cam-track { animation-duration: 220s; }
.cam-rtl .cam-track { animation: cam-scroll-rtl 220s linear infinite; }
@keyframes cam-scroll-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes cam-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   2. Hero lights (SVG wave + meteors blend)
   ============================================================ */
    .banner-receive .banner{ position:relative; }
    /* mobile: clip coin/decor parallax tràn ngang (coin left:100%) gây horizontal scroll */
    @media (max-width:768px){ .banner-receive .banner{ overflow:hidden; } }
    /* bỏ hiệu ứng bản mạch ánh sáng cũ */
    .banner-receive .hero-circuit{ display:none !important; }
    /* ===== Lop background SONG VECTOR (SVG <path> tu sinh): blend soft-light + dap diu dan nhau (GSAP) =====
       z-index:0 -> lop nen sau cung (duoi coins z0 theo thu tu DOM, duoi content z2).
       .banner & .banner-receive khong phai stacking context -> soft-light blend duoc voi nen tim hero. */
    .hero-wave{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
      mix-blend-mode:soft-light; }
    .hero-wave svg{ position:absolute; top:-4%; left:-4%; width:108%; height:108%; display:block; }   /* SVG inline (giu cau truc file), oversize de dap dinh khong lo mep */
    /* Lop SAO BANG cho cac line xeo - blend screen cho sang ro tren nen tim */
    .hero-meteors{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; mix-blend-mode:screen; }
    .hero-meteors svg{ position:absolute; top:-4%; left:-4%; width:108%; height:108%; display:block; }

/* ============================================================
   3. Hall of Fame — twinkle/sparkle
   ============================================================ */
      .hall-of-fame .hall-of-fame-header .img-tt{ display:flex; flex-direction:column; align-items:center; }
      .hall-of-fame .hall-of-fame-header .hof-star{
        display:block; width:16rem; max-width:62%; height:auto; margin:0 auto 1.2rem;
        transform-origin:50% 60%;
        animation:hofStarTwinkle 2.4s ease-in-out infinite;
      }
      @media (max-width:1200px){ .hall-of-fame .hall-of-fame-header .hof-star{ width:12rem; } }
      @media (max-width:576px){ .hall-of-fame .hall-of-fame-header .hof-star{ width:9rem; } }

      /* tiêu đề lấp lánh CÙNG NHỊP 2.4s với ngôi sao */
      .hall-of-fame .hall-of-fame-header .hof-title{ animation:hofTitleTwinkle 2.4s ease-in-out infinite; }
      .hall-of-fame .hall-of-fame-header .hof-title .hof-top{ animation:hofGlit 2.4s ease-in-out infinite; }

      @keyframes hofStarTwinkle{
        0%,100%{ filter:brightness(1) drop-shadow(0 .4rem .9rem rgba(0,0,0,.35)); transform:scale(1); }
        50%{ filter:brightness(1.4) drop-shadow(0 0 1.4rem rgba(255,220,140,.85)); transform:scale(1.07); }
      }
      @keyframes hofTitleTwinkle{
        0%,100%{ filter:drop-shadow(2px 2px 0 #C05C00) brightness(1); }
        50%{ filter:drop-shadow(2px 2px 0 #C05C00) brightness(1.35); }
      }
      @keyframes hofGlit{
        0%,100%{ background-position:center, center; }
        50%{ background-position:26% center, center; }
      }
      @media (prefers-reduced-motion: reduce){
        .hall-of-fame .hall-of-fame-header .hof-star,
        .hall-of-fame .hall-of-fame-header .hof-title,
        .hall-of-fame .hall-of-fame-header .hof-title .hof-top{ animation:none !important; }
      }
      /* background.png cho section đại sảnh — mờ dần phần chân */
      .colleague-success .colleague-success-wrap > .hof-bg{
        position:absolute; left:0; top:0; width:100%; height:165rem; z-index:0; pointer-events:none;
        background:url("/template/assets/images/home/hall-of-fame-bg.png") top center / cover no-repeat;
        mix-blend-mode:soft-light;
        -webkit-mask:linear-gradient(to bottom, #000 0%, #000 50%, transparent 88%);
        mask:linear-gradient(to bottom, #000 0%, #000 50%, transparent 88%);
      }

/* ============================================================
   8. Personalized — redesign
   ============================================================ */
      /* gộp tiêu đề CĂN GIỮA container */
      .personalized .personalized-head{ text-align:center; align-items:center; gap:0 !important; }
      .personalized .personalized-head .sec-com-tt{ text-align:center; justify-content:center; }
      /* 3 dòng tiêu đề liền mạch (bỏ gap 3.2rem) */
      .personalized .personalized-head > .sec-com-tt + .sec-com-tt{
        margin-top:0 !important; display:flex; flex-direction:column; align-items:center; gap:4px;
      }
      /* content: 2 phần đều nhau — text TRÁI, hình PHẢI; spacing tiêu đề -> content = 32px
         align-items:flex-start để text bám sát ngay dưới tiêu đề (không bị center kéo xuống xa) */
      .personalized .personalized-content{ display:flex !important; flex-wrap:nowrap !important; align-items:center; gap:4rem; margin-top:32px; }
      .personalized .personalized-right{ width:auto !important; flex:1 1 0 !important; padding:0 !important; order:1; }
      .personalized .personalized-left{  width:auto !important; flex:1 1 0 !important; padding:0 !important; order:2; }
      @media (max-width:768px){
        .personalized .personalized-content{ flex-wrap:wrap !important; gap:2.4rem; }
        .personalized .personalized-right, .personalized .personalized-left{ flex:1 1 100% !important; order:initial; }
      }
      /* ===== CAN GIUA LAYOUT 1 COT DOC ===== */
      .personalized{ --nhtq-500:#F5851E; }
      .personalized .personalized-content{ flex-direction:column !important; flex-wrap:nowrap !important; align-items:center !important; text-align:center; gap:3.2rem !important; }
      .personalized .personalized-right, .personalized .personalized-left{ flex:0 0 auto !important; width:100% !important; max-width:none !important; }
      .personalized .personalized-right{ order:1 !important; display:flex; flex-direction:column; align-items:center; }
      .personalized .personalized-left{ order:2 !important; }
      .personalized .personalized-right-desc{ text-align:center; max-width:800px; margin-left:auto; margin-right:auto; padding-left:0 !important; padding-right:0 !important; }
      .personalized .personalized-right-desc .txt-host{ color:var(--nhtq-500) !important; }
      @media (max-width:768px){
        .personalized .personalized-right, .personalized .personalized-left{ order:initial !important; }
      }
      /* ===== KHOI FEEDBACK gop 1 dong, in dam, STROKE NHTQ-500 chay quanh lien tuc ===== */
            .personalized .fb-highlight{ position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
        gap:.6rem; font-weight:700; font-size:1.8rem; line-height:1.45; color:#fff;
        padding:1.6rem 2.8rem; border-radius:1.6rem; margin-bottom:12px; }
      .personalized .fb-highlight .fb-accent{ color:var(--nhtq-500); display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap; }
      .personalized .fb-highlight .fb-arrow{ width:2.4rem; height:2.4rem; flex:none; display:inline-block; object-fit:contain; }
      .personalized .fb-stroke{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
      .personalized .fb-stroke rect{ fill:none; }
      .personalized .fb-stroke .fb-run{ stroke:var(--nhtq-500); stroke-width:2; stroke-dasharray:10 8; animation:fb-march 1s linear infinite; }
      @keyframes fb-march{ to{ stroke-dashoffset:-18; } }
      @media (prefers-reduced-motion:reduce){ .personalized .fb-stroke .fb-run{ animation:none; } }
      @media (max-width:768px){ .personalized .fb-highlight{ font-size:1.6rem; padding:1.4rem 2rem; } }
      /* tang height vung gallery + thu hep fade tren/duoi -> ho ro hinh hon (CHI desktop) */
      @media (min-width:769px){
        .personalized .personalized-list{ height:54rem !important; }
        .personalized .personalized-left-inner::after,
        .personalized .personalized-left-inner::before{ height:18% !important; }
      }

/* ============================================================
   9. Ngan section
   ============================================================ */
        .ngan-section{ width:100%; line-height:0; pointer-events:none; margin-bottom:-3px; }
        .ngan-section img{ display:block; width:100%; height:auto; }

/* ============================================================
   10. Data — decor fix
   ============================================================ */
        /* Đã TẢI shape (data-mask.png) từ khanhhung.academy về local (same-origin) -> mask blob
           hoạt động đúng như web gốc (mask qua CDN bị CORS chặn). Icon "?" dùng icon-question.png local. */
        .data .data-decor-inner{
          -webkit-mask-image:url("/template/assets/images/home/data-mask.png") !important; mask-image:url("/template/assets/images/home/data-mask.png") !important;
          -webkit-mask-size:100% 100% !important; mask-size:100% 100% !important;
          -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
          border-radius:0 !important;
        }
        @media (max-width:768px){
          .data .data-decor-inner{
            -webkit-mask-image:none !important; mask-image:none !important; border-radius:.8rem !important;
          }
        }
        /* padding-bottom section = 120px (đang quá xa) */
        .data.sec-com{ padding-bottom:120px !important; background:#580B94 !important; }
        /* tiêu đề section luôn hiện (đề phòng reveal ẩn) */
        .data > .container > .sec-com-tt{ opacity:1 !important; visibility:visible !important; }

/* ============================================================
   11. Staff — head redesign
   ============================================================ */
    /* MONA staff head: căn giữa — box hồng (date) trên, tiêu đề 3 dòng dưới */
    .staff .staff-head-inner{ flex-direction:column !important; align-items:center !important; text-align:center; gap:2.4rem !important; padding:4.8rem 3.2rem !important; }
    .staff .staff-head-left{ align-items:center !important; }
    /* box hồng nhỏ: font 18px bold */
    .staff .staff-head-txt{ font-size:18px !important; font-weight:700 !important; }
    /* bỏ năm "2024" khổng lồ — ngày tháng đã nằm trong box hồng */
    .staff .staff-head-year{ display:none !important; }
    /* tiêu đề 3 dòng, in hoa, căn giữa */
    .staff .staff-head-right{ text-align:center !important; padding-bottom:0 !important; text-transform:uppercase; width:100% !important; max-width:none !important; overflow:visible !important; }
    .staff .staff-head-right br{ display:inline !important; }
    /* dòng "hơn 200+ nhân viên": 80px, chữ TRẮNG (bỏ nổi khối). Brush Vector.svg hồng nằm SAU
       chữ (highlight) và QUẸT CỌ vào (clip-path từ trái) khi scroll tới section. */
    .staff .staff-head-right .stat-line{
      font-size:clamp(22px, 3.4vw, 50px); font-weight:900; line-height:1.28;
      color:#fff; -webkit-text-fill-color:#fff; white-space:nowrap;
      position:relative; z-index:0; display:inline-block; padding:0 .28em; margin:8px 0;
    }
    .staff .staff-head-right .stat-line .count-up{ color:inherit; -webkit-text-fill-color:inherit; }
    .staff .staff-head-right .stat-brush{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:135%; height:1.5em; max-width:none; z-index:-1; pointer-events:none;
    }
    /* chỉ ẩn-chờ-quẹt khi có JS (no-JS thì brush hiện sẵn để chữ trắng đọc được) */
    .staff.js-brush .staff-head-right .stat-brush{ clip-path:inset(0 100% 0 0); }
    .staff.js-brush.brush-in .staff-head-right .stat-brush{
      animation:statBrushSweep .9s cubic-bezier(.22,1,.36,1) .1s forwards;
    }
    @keyframes statBrushSweep{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
    /* staff-stat-brush.svg cloned from source Vector.svg; no extra transform needed */
    @media (prefers-reduced-motion:reduce){
      .staff.js-brush .staff-head-right .stat-brush{ clip-path:inset(0 0 0 0) !important; animation:none !important; }
    }
    /* logo The MONA thay cho chữ "MONA": cao 1.6em; translateY chỉnh cho khỏi lệch dòng */
    .staff .staff-head-right .mona-logo{
      height:1.6em; width:auto; display:inline-block; vertical-align:-0.55em; transform:translateY(-0.12em); margin-right:.4rem;
    }