/* =============================================================
   LUXE LAYER — Thuận Đức Green
   Lớp nâng cấp LUXURY phủ lên trang chủ (không sửa index.html)
   Bám chuẩn màu logo TDG: xanh #4dae4d · cam #ed7020 · gold tiết chế
   Ưu tiên transform/opacity · cubic-bezier mượt · responsive · a11y
   Nạp SAU style.css + polish.css để override đúng tầng.
   ============================================================= */

:root{
  /* Hệ xanh sâu tạo chiều sâu luxury */
  --lx-green:        #4dae4d;
  --lx-green-d:      #2f7d33;
  --lx-green-dd:     #1e5a24;
  --lx-ink:          #15401c;   /* chữ xanh đậm */
  /* Cam nhấn */
  --lx-orange:       #ed7020;
  --lx-orange-d:     #e0631a;
  /* Gold thanh lịch — DÙNG TIẾT CHẾ */
  --lx-gold:         #ed7020;
  --lx-gold-l:       #f59b56;
  --lx-gold-soft:    rgba(237, 112, 32,.40);
  /* Nền */
  --lx-cream:        #f3f8f1;
  /* Nhịp chuyển động cao cấp */
  --lx-ease:         cubic-bezier(.22,.7,.28,1);
  --lx-ease-out:     cubic-bezier(.16,.84,.32,1);
  --lx-spring:       cubic-bezier(.34,1.4,.5,1);
}

/* =============================================================
   0 · ĐƯỜNG GOLD MẢNH TRANG TRÍ DÙNG CHUNG (qua ::after khi cần)
   ============================================================= */

/* =============================================================
   1 · HERO (#home.hsl) — phủ overlay sâu + glow tiêu đề + CTA shimmer
   ============================================================= */
/* Lớp phủ gradient xanh sâu sang trọng + làm dày chiều sâu ảnh */
#home.hsl .hsl-ov{
  background:
    linear-gradient(90deg, rgba(12,32,14,.94) 0%, rgba(17,45,20,.82) 50%, rgba(20,52,24,.40) 100%),
    linear-gradient(0deg,  rgba(11,28,13,.72), transparent 48%),
    radial-gradient(120% 90% at 88% 18%, rgba(237,112,32,.16), transparent 55%) !important;
}
/* Vệt sáng gold mảnh chạy ngang đỉnh hero (tinh tế) */
#home.hsl .hsl-viewport::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:5;
  background:linear-gradient(90deg,transparent, var(--lx-gold-l) 22%, var(--lx-gold) 50%, var(--lx-gold-l) 78%, transparent);
  opacity:.55; pointer-events:none;
}
/* Khung viền hero ánh gold nhẹ thay vì nâu phẳng */
#home.hsl .hsl-frame{
  border-color:rgba(237, 112, 32,.30) !important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.28);
}
/* Eyebrow: thêm chấm gold dẫn + letter-spacing sang */
#home.hsl .hsl-eyebrow{ color:var(--lx-gold-l) !important; }
#home.hsl .hsl-eyebrow .ln{ background:linear-gradient(90deg,var(--lx-gold),transparent) !important; }
/* Tiêu đề hero: glow rất nhẹ cho nổi trên nền tối */
#home.hsl .hsl-h1{
  text-shadow:0 2px 26px rgba(0,0,0,.5), 0 0 1px rgba(255,255,255,.12) !important;
}
#home.hsl .hsl-h1 .gd{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:#ff9d4d !important; -webkit-text-fill-color:#ff9d4d !important;
  filter:none !important;
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.5) !important;
}
/* Nút CTA hero (gọi hotline): shimmer mạnh hơn + bóng đổ sang + viền gold ẩn */
#home.hsl .hsl-bg{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 14px 34px rgba(224,99,26,.42), 0 2px 0 rgba(255,255,255,.18) inset,
             0 0 0 1px rgba(237, 112, 32,.35) !important;
}
#home.hsl .hsl-bg i{ color:#fff !important; }
#home.hsl .hsl-bg:hover{ transform:translateY(-3px) scale(1.015) !important; }
/* Nút Zalo ghost: hover sang về gold */
#home.hsl .hsl-gh:hover{ border-color:var(--lx-gold) !important; color:var(--lx-gold-l) !important; }
/* Chip hero: viền gold mảnh, nền kính */
#home.hsl .hsl-chip{
  border-color:rgba(237, 112, 32,.30) !important;
  background:rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#home.hsl .hsl-chip i{ color:var(--lx-gold-l) !important; }
/* Dot active về gold thay cam cho điểm nhấn luxury */
#home.hsl .hsl-dot.on{ background:var(--lx-gold) !important; border-color:var(--lx-gold) !important; }

/* =============================================================
   2 · TIÊU ĐỀ SECTION — badge gold thanh lịch + divider + chữ gradient
   ============================================================= */
/* Badge: viên thuốc gold có ánh shimmer chạy qua */
.badge{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(237, 112, 32,.16), rgba(230,200,132,.12)) !important;
  border:1px solid var(--lx-gold-soft) !important;
  color:#c2560e !important;
  box-shadow:0 2px 12px rgba(237, 112, 32,.14);
}
.badge::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); animation:lxBadgeShine 4.5s ease-in-out infinite;
}
@keyframes lxBadgeShine{0%,70%{left:-120%;}100%{left:170%;}}
/* Chấm dẫn của badge (đã có ::before ở polish) → ép tông gold */
.badge::before{ background:linear-gradient(135deg,var(--lx-gold-l),var(--lx-gold)) !important;
  box-shadow:0 0 0 3px rgba(237, 112, 32,.16) !important; }

/* Tiêu đề section: gradient xanh→xanh đậm tinh tế (ghi đè màu phẳng của polish) */
.section-title{
  background:linear-gradient(116deg, var(--lx-green) 0%, var(--lx-green-d) 52%, var(--lx-green-dd) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
/* Tiêu đề trên nền XANH/tối → giữ trắng để đọc rõ */
.stats .section-title, .cta-section .section-title, .origin-section .section-title,
[style*="background:#4dae4d"] .section-title{
  background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important;
}
/* Divider: gradient cam→gold bo tròn + ánh sáng */
.divider{
  background:linear-gradient(90deg, var(--lx-orange), var(--lx-gold)) !important;
  box-shadow:0 1px 8px rgba(237, 112, 32,.35);
}

/* --- TYPOGRAPHY editorial: thang cỡ + giãn chữ chuẩn tạp chí cao cấp --- */
.section-title{
  font-size:clamp(1.9rem, 3.4vw, 2.85rem) !important;
  font-weight:900 !important;
  line-height:1.12 !important;
  letter-spacing:-.015em !important;
}
.section-subtitle{
  font-size:clamp(1rem, 1.25vw, 1.1rem) !important;
  line-height:1.7 !important;
  color:#5d7257 !important;
  max-width:660px; margin-left:auto !important; margin-right:auto !important;
  letter-spacing:.1px;
}
.badge{
  letter-spacing:.6px !important; text-transform:uppercase;
  font-size:.74rem !important; font-weight:800 !important;
}

/* --- NHỊP SECTION editorial: nền xen kẽ tinh tế + đường gold mảnh phân khối --- */
/* Khu sản phẩm & kiến thức = nền kem rất nhạt cho khác biệt với khối trắng */
#products{
  background:linear-gradient(180deg,#ffffff 0%, var(--lx-cream) 100%) !important;
  position:relative;
}
#kien-thuc{
  background:linear-gradient(180deg, var(--lx-cream) 0%, #ffffff 100%) !important;
  position:relative;
}
/* Đường gold mảnh thanh lịch ở đầu mỗi khối lớn */
#products::before, #kien-thuc::before, #projects::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--lx-orange),var(--lx-gold)); opacity:.85;
}
/* Section header: thoáng hơn để nhịp editorial dễ thở */
.section-header.center{ margin-bottom:8px; }
.section-header .section-subtitle{ margin-top:14px; }

/* =============================================================
   3 · KHU SẢN PHẨM (.pcat2-*) — 3 thẻ CAO CẤP, ĐẦY ĐẶN, EDITORIAL
   Mục tiêu: 3 thẻ nhưng "đắt" & lấp đầy chiều ngang, không trống.
   Ảnh cao hơn (3/4) + overlay editorial + caption hiện ra hover.
   ============================================================= */
/* Lưới rộng & thoáng hơn để 3 thẻ phủ đẹp chiều ngang */
.pcat2-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:30px !important;
  max-width:1180px; margin-left:auto; margin-right:auto;
  margin-top:18px !important;
}
.pcat2-card{
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 14px 40px rgba(20,48,24,.12), 0 3px 10px rgba(20,48,24,.06) !important;
  transition:transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease) !important;
  will-change:transform;
}
/* Ảnh CAO hơn (chân dung nhẹ) cho cảm giác đầy đặn, sang */
.pcat2-img{ position:relative; aspect-ratio:4/5 !important; }
/* CHỈ lớp ảnh nền mới phủ full; tag & caption KHÔNG bị rule .pcat2-img>span ép full size */
.pcat2-img > span:not(.pcat2-tag):not(.pcat2-cap){
  transition:transform .85s var(--lx-ease) !important;
}
.pcat2-img > .pcat2-tag, .pcat2-img > .pcat2-cap{
  width:auto !important; height:auto !important;
}
.pcat2-img > .pcat2-cap{ left:0 !important; right:0 !important; width:auto !important; }
/* Overlay editorial: tối dần phía đáy để chữ trắng luôn nổi */
.pcat2-img::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,38,16,0) 30%, rgba(13,33,15,.30) 62%, rgba(11,28,13,.82) 100%);
  transition:opacity .5s var(--lx-ease); opacity:.96;
}
.pcat2-card:hover .pcat2-img::after{ opacity:1; }

/* Tag góc trên (vd "Bán chạy nhất") — viên cam gold sang */
.pcat2-tag{
  position:absolute; z-index:3; top:16px; left:16px;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,var(--lx-orange),var(--lx-orange-d));
  box-shadow:0 6px 18px rgba(224,99,26,.42), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.pcat2-tag::before{
  content:"\f005"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.66rem;
}

/* CAPTION editorial chồng lên đáy ảnh — luôn có tên, mô tả + CTA trượt lên khi hover */
.pcat2-cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:9px;
  color:#fff; pointer-events:none;
}
.pcat2-cap-name, .pcat2-cap-desc{ display:block; }
.pcat2-cap-name{
  font-size:1.16rem; font-weight:900; line-height:1.2; letter-spacing:.2px;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.pcat2-cap-name::before{
  content:""; display:block; width:30px; height:3px; margin-bottom:12px; border-radius:3px;
  background:linear-gradient(90deg,var(--lx-gold-l),var(--lx-gold));
  box-shadow:0 1px 6px rgba(237, 112, 32,.5);
}
.pcat2-cap-desc{
  font-size:.9rem; line-height:1.5; font-weight:500; color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  /* Mặc định hé một phần — mở rộng khi hover (desktop) */
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s var(--lx-ease), opacity .45s var(--lx-ease), margin .55s var(--lx-ease);
  margin-top:-4px;
}
.pcat2-cap-go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--lx-gold-l);
  max-height:0; opacity:0; overflow:hidden; transform:translateY(6px);
  transition:max-height .55s var(--lx-ease), opacity .45s var(--lx-ease), transform .5s var(--lx-ease);
}
.pcat2-cap-go i{ transition:transform .4s var(--lx-ease); }
/* Hover: mở mô tả + CTA, nâng thẻ, ảnh zoom, viền gold */
.pcat2-card:hover{
  transform:translateY(-12px) !important;
  box-shadow:0 38px 70px rgba(20,48,24,.26), 0 0 0 1.5px var(--lx-gold-soft) !important;
}
.pcat2-card:hover .pcat2-img > span{ transform:scale(1.08) !important; }
.pcat2-card:hover .pcat2-cap-desc{ max-height:120px; opacity:1; margin-top:0; }
.pcat2-card:hover .pcat2-cap-go{ max-height:30px; opacity:1; transform:none; }
.pcat2-card:hover .pcat2-cap-go i{ transform:translateX(5px); }

/* Thanh tên dưới (giữ lại): tinh gọn, vệt gold mảnh khi hover */
.pcat2-bar{ position:relative; padding:16px 16px 16px 22px !important; }
.pcat2-bar::before{
  content:""; position:absolute; top:0; left:22px; right:22px; height:2px;
  background:linear-gradient(90deg,transparent,var(--lx-gold),transparent);
  opacity:0; transition:opacity .5s var(--lx-ease);
}
.pcat2-card:hover .pcat2-bar::before{ opacity:.95; }
/* Nút (+): xoay + đổi gold khi hover */
.pcat2-card:hover .pcat2-plus{
  transform:rotate(90deg) scale(1.06) !important;
  background:linear-gradient(135deg, var(--lx-gold-l), var(--lx-gold)) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(237, 112, 32,.5) !important;
}

/* =============================================================
   4 · CÔNG TRÌNH (.proj-card) & KIẾN THỨC (.kbv-card) — hover đồng bộ
   ============================================================= */
.proj-card{
  border-radius:20px !important;
  transition:transform .42s var(--lx-ease), box-shadow .42s var(--lx-ease) !important;
}
.proj-card .proj-img{ transition:transform .7s var(--lx-ease) !important; }
.proj-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 28px 56px rgba(20,48,24,.24), 0 0 0 1.5px var(--lx-gold-soft) !important;
}
.proj-card:hover .proj-img{ transform:scale(1.08) !important; }
/* Overlay công trình: thêm chút chiều sâu xanh */
.proj-overlay{
  background:linear-gradient(to top, rgba(15,38,16,.94) 0%, rgba(15,38,16,.30) 52%, transparent 100%) !important;
}
.proj-label{ color:var(--lx-gold-l) !important; }

/* Kiến thức card */
#kien-thuc .kbv-card{
  transition:transform .42s var(--lx-ease), box-shadow .42s var(--lx-ease), border-color .42s var(--lx-ease) !important;
}
#kien-thuc .kbv-card:hover{
  transform:translateY(-9px) !important;
  box-shadow:0 26px 52px rgba(20,48,24,.20), 0 0 0 1.5px var(--lx-gold-soft) !important;
  border-color:transparent !important;
}
#kien-thuc .kbv-card:hover .kbv-media img{ transform:scale(1.09) !important; }
#kien-thuc .kbv-cta{
  box-shadow:0 12px 30px rgba(47,125,51,.34), 0 0 0 1px rgba(237, 112, 32,.30) inset !important;
}

/* =============================================================
   5 · VỀ TDG (#about) — ảnh CEO khung gold + nâng nhẹ
   ============================================================= */
#about{
  background:linear-gradient(180deg, var(--lx-cream) 0%, #ffffff 100%) !important;
  position:relative;
}
/* Đường gold mảnh đầu section */
#about::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:72px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--lx-orange),var(--lx-gold)); opacity:.9;
}
#about .why-grid > div:last-child > div{
  transition:transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease) !important;
  border-color:var(--lx-gold-soft) !important;
}
#about .why-grid > div:last-child > div:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px rgba(20,48,24,.24) !important;
}

/* =============================================================
   6 · LIÊN HỆ (#contact) — nền sang, form glass bo lớn, input glow
   ============================================================= */
#contact.contact{
  position:relative;
  background:
    radial-gradient(60% 80% at 12% 8%, rgba(77,174,77,.10), transparent 60%),
    radial-gradient(50% 70% at 92% 90%, rgba(237,112,32,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--lx-cream) 100%) !important;
}
/* Form: bo góc lớn + đổ bóng sâu + viền gold mảnh + thanh gold trên đỉnh */
#contact .contact-form{
  border-radius:26px !important;
  border:1px solid var(--lx-gold-soft) !important;
  box-shadow:0 30px 70px rgba(20,48,24,.16), 0 2px 8px rgba(20,48,24,.06) !important;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#fcfdfb) !important;
}
#contact .contact-form::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--lx-green), var(--lx-orange) 60%, var(--lx-gold));
}
/* Input focus: viền xanh sáng + glow */
#contact .form-control{
  border-radius:14px !important;
  transition:border-color .3s var(--lx-ease), box-shadow .3s var(--lx-ease), background .3s var(--lx-ease) !important;
}
#contact .form-control:focus{
  border-color:var(--lx-green) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(77,174,77,.14), 0 6px 18px rgba(47,125,51,.12) !important;
}
/* Nút submit: shimmer quét qua + nâng */
#contact .form-submit{
  position:relative; overflow:hidden;
  border-radius:50px !important;
  background:linear-gradient(100deg, var(--lx-orange-d), var(--lx-orange)) !important;
  box-shadow:0 12px 30px rgba(224,99,26,.38), 0 0 0 1px rgba(237, 112, 32,.30) inset !important;
}
#contact .form-submit::after{
  content:""; position:absolute; top:0; left:-120%; width:45%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); animation:lxSweep 3.6s ease-in-out infinite;
}
@keyframes lxSweep{0%,62%{left:-120%;}100%{left:170%;}}
#contact .form-submit:hover{ transform:translateY(-3px) !important; }
/* Contact-item: hover viền gold + icon ánh */
#contact .contact-item{
  border-radius:16px !important;
  transition:transform .3s var(--lx-ease), box-shadow .3s var(--lx-ease), border-color .3s var(--lx-ease) !important;
}
#contact .contact-item:hover{
  transform:translateX(6px) translateY(-2px) !important;
  border-color:var(--lx-gold-soft) !important;
  box-shadow:0 16px 34px rgba(20,48,24,.12) !important;
}
#contact .contact-item-icon{
  background:linear-gradient(135deg,#f1f8ef,#e7f2e3) !important;
  box-shadow:inset 0 0 0 1px rgba(237, 112, 32,.22);
}

/* =============================================================
   7 · FOOTER — tinh chỉnh sang, link hover gold, viền gold mảnh đỉnh
   ============================================================= */
footer{
  position:relative;
  background:linear-gradient(180deg, #1e5a24 0%, #143f1a 55%, #0c2410 100%) !important;
}
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent, var(--lx-gold) 30%, var(--lx-gold-l) 50%, var(--lx-gold) 70%, transparent);
  opacity:.6;
}
.footer-heading{
  position:relative;
  border-bottom-color:rgba(237, 112, 32,.18) !important;
}
.footer-heading::after{
  content:""; position:absolute; left:0; bottom:-1px; width:34px; height:2px;
  background:linear-gradient(90deg,var(--lx-gold),transparent);
}
.footer-link{ transition:color .25s var(--lx-ease), padding-left .25s var(--lx-ease) !important; }
.footer-link::before{ color:var(--lx-gold) !important; }
.footer-link:hover{ color:var(--lx-gold-l) !important; padding-left:5px !important; }
.footer-social:hover{ background:linear-gradient(135deg,var(--lx-gold),var(--lx-gold-l)) !important; }

/* =============================================================
   8 · NÚT CHUNG (.btn) — shimmer tinh tế cho primary/accent
   ============================================================= */
.btn-primary, .btn-accent{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-accent::after{
  content:""; position:absolute; top:0; left:-130%; width:42%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .6s var(--lx-ease-out); pointer-events:none;
}
.btn-primary:hover::after, .btn-accent:hover::after{ left:170%; }

/* =============================================================
   9 · SCROLL-REVEAL (đi cùng luxe.js) — trạng thái trước khi vào màn hình
   ============================================================= */
.reveal, .reveal-up, .reveal-zoom, .reveal-left, .reveal-right{
  opacity:0; will-change:transform,opacity;
  transition:opacity .8s var(--lx-ease-out), transform .8s var(--lx-ease-out);
}
.reveal-up{   transform:translateY(42px); }
.reveal{      transform:translateY(28px); }
.reveal-left{ transform:translateX(-46px); }
.reveal-right{transform:translateX(46px); }
.reveal-zoom{ transform:scale(.9); }
.reveal.is-in, .reveal-up.is-in, .reveal-zoom.is-in,
.reveal-left.is-in, .reveal-right.is-in{
  opacity:1; transform:none;
}

/* =============================================================
   10 · DẢI CON SỐ (counter) — đặt class .lx-stats để chèn vào index
   ============================================================= */
.lx-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  max-width:1080px; margin:6px auto 0; padding:0 4px;
}
.lx-stat{
  position:relative; text-align:center; padding:30px 18px 26px;
  background:linear-gradient(180deg,#ffffff,#f7fbf5);
  border:1px solid rgba(20,48,24,.07);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(20,48,24,.07);
  transition:transform .42s var(--lx-ease), box-shadow .42s var(--lx-ease), border-color .42s var(--lx-ease);
  overflow:hidden;
}
.lx-stat::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:2px;
  background:linear-gradient(90deg,transparent,var(--lx-gold),transparent);
  opacity:0; transition:opacity .42s var(--lx-ease);
}
.lx-stat:hover{
  transform:translateY(-6px);
  border-color:var(--lx-gold-soft);
  box-shadow:0 24px 48px rgba(20,48,24,.16);
}
.lx-stat:hover::before{ opacity:.9; }
.lx-stat-ic{
  width:48px; height:48px; margin:0 auto 14px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  background:linear-gradient(135deg,#e7f2e3,#f1f8ef); color:var(--lx-green-d);
  box-shadow:inset 0 0 0 1px rgba(237, 112, 32,.20);
}
.lx-stat-num{
  font-size:clamp(2rem,3.4vw,2.9rem); font-weight:900; line-height:1; letter-spacing:-.02em;
  background:linear-gradient(120deg, var(--lx-green) 0%, var(--lx-green-d) 60%, var(--lx-orange) 130%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lx-stat-num .lx-suf{ -webkit-text-fill-color:var(--lx-orange); color:var(--lx-orange); }
.lx-stat-label{ margin-top:8px; font-size:.86rem; font-weight:700; color:#5e7656; letter-spacing:.2px; }

/* =============================================================
   11 · TILT (đi cùng luxe.js) — chỉ thêm transition mượt, JS set biến
   ============================================================= */
.lx-tilt{ transition:transform .25s var(--lx-ease); transform-style:preserve-3d; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:900px){
  .lx-stats{ grid-template-columns:repeat(2,1fr); gap:14px; }
  /* Tablet: 2 cột, gap vừa */
  .pcat2-grid{ grid-template-columns:repeat(2,1fr) !important; gap:20px !important; }
  .pcat2-img{ aspect-ratio:4/5 !important; }
}
@media(max-width:520px){
  .lx-stats{ grid-template-columns:repeat(2,1fr); gap:11px; }
  .lx-stat{ padding:22px 10px 20px; border-radius:16px; }
  .lx-stat-ic{ width:42px; height:42px; font-size:1.1rem; margin-bottom:10px; }
  /* Mobile: 1 cột, ảnh thấp hơn cho gọn; KHÔNG có hover → mô tả + CTA LUÔN HIỆN */
  .pcat2-grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .pcat2-img{ aspect-ratio:16/11 !important; }
  .pcat2-cap{ padding:18px 18px 20px; }
  .pcat2-cap-desc{ max-height:120px !important; opacity:1 !important; margin-top:0 !important; }
  .pcat2-cap-go{ max-height:30px !important; opacity:1 !important; transform:none !important; }
  .pcat2-card:hover{ transform:translateY(-6px) !important; }
  .proj-card:hover, #kien-thuc .kbv-card:hover{ transform:translateY(-6px) !important; }
  /* Giảm biên độ reveal trên mobile cho mượt */
  .reveal-up{ transform:translateY(26px); }
  .reveal-left{ transform:translateX(-24px); }
  .reveal-right{ transform:translateX(24px); }
}

/* =============================================================
   A11Y · TÔN TRỌNG prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up, .reveal-zoom, .reveal-left, .reveal-right{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .badge::after, #contact .form-submit::after,
  .btn-primary::after, .btn-accent::after,
  #home.hsl .hsl-viewport::after{ animation:none !important; }
  .lx-tilt{ transform:none !important; }
  *{ scroll-behavior:auto; }
}