/* ===== CiCC Theme 5.0 — UX Design System ===== */
:root{
  --ux-green:#0f9d58; --ux-green-d:#0b7a43; --ux-green-dd:#073b22;
  --ux-ink:#0d2818; --ux-body:#334155; --ux-muted:#64748b;
  --ux-line:#e6efe9; --ux-bg:#f6fbf8; --ux-card:#ffffff;
  --ux-amber:#ffe082; --ux-radius:18px; --ux-radius-sm:12px;
  --ux-shadow:0 10px 30px rgba(11,122,67,.12);
  --ux-shadow-h:0 18px 44px rgba(11,122,67,.22);
  --ux-ease:cubic-bezier(.22,.61,.36,1);
  --ux-font:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{font-family:var(--ux-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ux-ease),transform .7s var(--ux-ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* Lazy image fade */
img.lz{opacity:0;transition:opacity .6s var(--ux-ease)}
img.lz.loaded{opacity:1}
/* Smooth anchor */
html{scroll-behavior:smooth}
/* Buttons */
.btn-ux{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .25s var(--ux-ease),box-shadow .25s var(--ux-ease);border:0}
.btn-ux--primary{background:linear-gradient(135deg,var(--ux-green),var(--ux-green-d));color:#fff;box-shadow:0 8px 22px rgba(15,157,88,.35)}
.btn-ux--primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,157,88,.45)}
.btn-ux--amber{background:var(--ux-amber);color:var(--ux-green-dd)}
.btn-ux--amber:hover{transform:translateY(-3px)}
.btn-ux--ghost{border:2px solid var(--ux-green);color:var(--ux-green);background:transparent}
.btn-ux--ghost:hover{background:var(--ux-green);color:#fff;transform:translateY(-3px)}
/* Section heading */
.ux-sec{margin:0 auto;max-width:1180px;padding:64px 20px}
.ux-sec__title{font-size:clamp(26px,4vw,38px);font-weight:800;color:var(--ux-ink);text-align:center;margin:0 0 12px;line-height:1.2}
.ux-sec__sub{text-align:center;color:var(--ux-muted);max-width:640px;margin:0 auto 40px;font-size:16px;line-height:1.6}
.ux-eyebrow{display:inline-block;background:rgba(15,157,88,.1);color:var(--ux-green-d);font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:14px}
/* Card chuẩn */
.ux-card{background:var(--ux-card);border:1px solid var(--ux-line);border-radius:var(--ux-radius);overflow:hidden;box-shadow:var(--ux-shadow);transition:transform .3s var(--ux-ease),box-shadow .3s var(--ux-ease)}
.ux-card:hover{transform:translateY(-6px);box-shadow:var(--ux-shadow-h)}
.ux-card__media{position:relative;height:180px;background-size:cover;background-position:center;background-color:#e8f3ec}
.ux-card__badge{position:absolute;top:12px;left:12px;background:rgba(13,40,24,.86);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.ux-card__body{padding:18px 20px 22px}
.ux-card__title{font-size:17px;margin:0 0 8px;line-height:1.35;color:var(--ux-ink)}
.ux-card__title a{color:inherit;text-decoration:none}
.ux-card__title a:hover{color:var(--ux-green)}
.ux-card__desc{color:var(--ux-muted);font-size:14px;line-height:1.55;margin:0 0 14px}
.ux-card__link{color:var(--ux-green);font-weight:700;font-size:14px;text-decoration:none}
/* Grid responsive */
.ux-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
/* Stats */
.ux-stats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ux-stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:16px 22px;min-width:120px;text-align:center;backdrop-filter:blur(4px)}
.ux-stat b{display:block;font-size:26px;font-weight:800;color:#fff}
.ux-stat span{font-size:13px;opacity:.85;color:#fff}
/* Sticky header */
.ux-header{position:sticky;top:0;z-index:50;transition:transform .35s var(--ux-ease),background .3s,box-shadow .3s}
.ux-header.hide{transform:translateY(-100%)}
.ux-header.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.06)}
/* Mobile nav */
.ux-nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.ux-nav-toggle span{display:block;width:24px;height:2px;background:var(--ux-ink);margin:5px 0;border-radius:2px;transition:.3s}
@media(max-width:860px){
  .ux-nav-toggle{display:block}
  .ux-nav{position:fixed;top:0;right:0;height:100vh;width:82%;max-width:340px;background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .35s var(--ux-ease);z-index:60;padding:80px 24px}
  .ux-nav.open{transform:none}
  .ux-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--ux-line);color:var(--ux-ink);text-decoration:none;font-weight:600}
  .ux-nav__overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.3s;z-index:55}
  .ux-nav__overlay.open{opacity:1;visibility:visible}
}
@media(max-width:600px){.ux-grid{grid-template-columns:1fr}.ux-sec{padding:44px 16px}}
/* ===== HEADER (chuẩn hệ sinh thái) ===== */
/* Top-bar: KHÔNG fixed (tránh che main menu). Dùng relative + site-header sticky bên dưới */
.top-bar{background:#0d2818;color:#cfe9d8;font-size:13px;position:relative !important;z-index:40}
.top-bar-inner{width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 24px;flex-wrap:wrap;box-sizing:border-box}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:10px;justify-content:center}
.top-lang{cursor:pointer;opacity:.7}
.top-lang.active{opacity:1;font-weight:700}
.top-lang-sep{opacity:.4}
.top-search-form-inline{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:5px 12px}
.top-search-form-inline input{background:none;border:0;color:#fff;outline:none;width:180px;font-size:13px}
.top-search-form-inline input::placeholder{color:rgba(255,255,255,.5)}
.top-phone{color:#cfe9d8;text-decoration:none;display:flex;align-items:center;gap:5px}
.top-email{color:#cfe9d8;text-decoration:none;display:flex;align-items:center;gap:5px;margin-left:4px}
.top-login-text{color:#cfe9d8;text-decoration:none;opacity:.85}
.top-login-text.top-register{background:var(--ux-green);color:#fff;padding:4px 12px;border-radius:999px;opacity:1}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 2px 18px rgba(0,0,0,.07);transition:transform .35s var(--ux-ease),box-shadow .3s;overflow:hidden}
.header-inner{width:100%;max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;box-sizing:border-box}
.site-header.hide{transform:translateY(-100%)}
.logo img{max-height:44px;width:auto}
.main-nav .nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.main-nav .menu-item>a{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:10px;color:var(--ux-ink);text-decoration:none;font-weight:600;font-size:14px;transition:background .2s,color .2s}
.main-nav .menu-item>a:hover{background:rgba(15,157,88,.1);color:var(--ux-green)}
.nav-arrow{font-size:10px;opacity:.6}
.mega-menu{position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.12);border-radius:0 0 18px 18px;padding:24px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ux-ease)}
.menu-item-has-children{position:relative}
.menu-item-has-children:hover .mega-menu{opacity:1;visibility:visible;transform:none}
.mega-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:24px}
.mega-label{font-weight:800;color:var(--ux-green-d);margin-bottom:10px;font-size:13px}
.mega-col a{display:block;padding:7px 0;color:var(--ux-body);text-decoration:none;font-size:14px;border-bottom:1px solid var(--ux-line)}
.mega-col a:hover{color:var(--ux-green)}
.mega-featured .mega-feat-item{display:flex;gap:10px;align-items:center;padding:10px;background:#f6fbf8;border-radius:12px;margin-bottom:8px;color:var(--ux-ink);text-decoration:none;font-weight:600}
.mega-feat-icon{font-size:22px}
.mega-feat-item small{display:block;font-weight:400;color:var(--ux-muted);font-size:12px}
.mega-all{display:block;text-align:right;color:var(--ux-green);font-weight:700;margin-top:6px}
.header-actions{display:flex;align-items:center;gap:10px}
.btn-header-trial,.btn-header-register{padding:9px 16px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}
.btn-header-trial{background:rgba(15,157,88,.1);color:var(--ux-green-d)}
.btn-header-register{background:var(--ux-green);color:#fff}
.header-user{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ux-ink)}
.header-avatar,.header-avatar-placeholder{width:32px;height:32px;border-radius:50%;background:var(--ux-green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.mobile-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ux-ink);padding:8px}
/* Mobile nav */
.mobile-nav{position:fixed;top:0;right:0;height:100vh;width:84%;max-width:360px;background:#fff;box-shadow:-12px 0 50px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .35s var(--ux-ease);z-index:60;overflow-y:auto;padding:20px 0}
.mobile-nav.open{transform:none}
.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;padding:0 20px 16px;border-bottom:1px solid var(--ux-line);margin-bottom:12px}
.mobile-logo{font-weight:800;color:var(--ux-green-d);text-decoration:none;font-size:18px}
.mobile-close{background:none;border:0;cursor:pointer;font-size:22px;color:var(--ux-muted)}
.mobile-search-form{padding:0 20px 14px}
.mobile-search-input{width:100%;padding:11px 14px;border:1.5px solid var(--ux-line);border-radius:12px;outline:none;font-size:14px}
.mobile-nav-list a{display:block;padding:13px 20px;border-bottom:1px solid var(--ux-line);color:var(--ux-ink);text-decoration:none;font-weight:600}
.mobile-nav-group{padding:12px 20px}
.mobile-nav-label{font-weight:800;color:var(--ux-green-d);font-size:12px;text-transform:uppercase;margin:8px 0}
.mobile-eco{padding:16px 20px;border-top:1px solid var(--ux-line);margin-top:8px}
.mobile-eco-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mobile-eco-links a{color:var(--ux-green-d);text-decoration:none;font-weight:600}
.btn-primary,.btn-outline,.btn-full{display:inline-block;text-align:center;border-radius:12px;text-decoration:none;font-weight:700;padding:13px}
.btn-full{width:100%}
.btn-outline{border:2px solid var(--ux-green);color:var(--ux-green)}
/* Nav desktop: hiện từ 1024px trở lên, thu gọn cho vừa 1280 */
.main-nav .nav-list{gap:2px}
.main-nav .menu-item>a{padding:9px 9px;font-size:13px}
.btn-header-trial,.btn-header-register{padding:8px 13px;font-size:12px}
@media(max-width:1200px){
  .main-nav{display:none}
  .mobile-toggle{display:block}
  .header-actions .btn-header-trial,.header-actions .btn-header-register{display:none}
  .top-bar-center{display:none}
}
/* ===== FOOTER ===== */
.footer{background:#0d2818;color:rgba(255,255,255,.75);padding:56px 0 28px;margin-top:0}
.footer .container{max-width:1200px;margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:32px}
.footer h4{color:#fff;font-size:15px;margin:0 0 14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:color .2s,padding-left .2s}
.footer-links a:hover{color:#34d399;padding-left:5px}
.footer-contact-item{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:12px}
.footer-contact-item svg{flex:0 0 auto;margin-top:2px;color:#34d399}
.tag{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.tag-green{background:rgba(52,211,153,.15);color:#34d399;border:1px solid rgba(52,211,153,.3)}
.tag-orange{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.5)}
.footer-bottom-links{display:flex;gap:18px}
.footer-bottom-links a{color:rgba(255,255,255,.6);text-decoration:none}
.footer-bottom-links a:hover{color:#34d399}
/* Mobile bottom nav active */
#mobile-bottom-nav .nav-item.active{color:#34d399}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;text-align:center}
}
/* ===== OVERFLOW GUARDS (đo bằng chrome thực tế) ===== */
*,*::before,*::after{box-sizing:border-box}
img,video,iframe,table{max-width:100%}
.site-header{overflow:hidden}
.header-inner{width:100%}
.header-actions{flex-shrink:1;min-width:0}
/* single CTDT: ngăn nội dung tràn ngang */
.ctdt-single__content{overflow-wrap:break-word;word-wrap:break-word}
.ctdt-single__content img,.ctdt-single__content video,.ctdt-single__content iframe,.ctdt-single__content table{max-width:100%;height:auto}
.ctdt-single__content *{min-width:0;max-width:100%}
.ctdt-single__body{overflow:hidden;max-width:100%}
.ctdt-single__main{overflow:hidden}
/* card chung: ngăn tràn */
.card,.ux-card,.cs-card{overflow:hidden;min-width:0}
.card *,.ux-card *,.cs-card *{min-width:0}
/* khoa-hoc filter wrap + co width */
/* ===== ECOSYSTEM CROSS-PROMO (Hệ sinh thái CiCC) ===== */
.eco-strip{background:linear-gradient(135deg,#0d2818,#073b22);padding:40px 0;margin-top:0}
.eco-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.eco-strip h4{color:#34d399;font-size:13px;text-transform:uppercase;letter-spacing:2px;margin:0 0 18px;text-align:center;font-weight:700}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eco-card{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(52,211,153,.18);text-decoration:none;color:#fff;transition:transform .3s var(--ux-ease),border-color .3s,background .3s,box-shadow .3s}
.eco-card:hover{transform:translateY(-6px);border-color:#34d399;background:rgba(52,211,153,.1);box-shadow:0 12px 30px rgba(52,211,153,.18)}
.eco-ico{font-size:28px;line-height:1}
.eco-name{font-size:18px;font-weight:800;color:#fff}
.eco-desc{font-size:13px;color:rgba(255,255,255,.65);line-height:1.5}
.eco-card::after{content:"Mở ↗";margin-top:4px;font-size:12px;color:#34d399;opacity:0;transition:opacity .3s}
.eco-card:hover::after{opacity:1}
@media(max-width:768px){.eco-grid{grid-template-columns:1fr}}
/* Inline CTA (cuối bài) */
.eco-cta{background:#f0fdf4;padding:36px 0;margin-top:32px}
.eco-cta-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.eco-cta h4{color:var(--ux-green-d);font-size:20px;margin:0 0 18px;text-align:center;font-weight:800}
.eco-cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eco-cta-card{display:flex;flex-direction:column;gap:5px;padding:20px 18px;border-radius:14px;background:#fff;border:1px solid #bbf7d0;text-decoration:none;color:var(--ux-ink);transition:transform .3s var(--ux-ease),box-shadow .3s,border-color .3s}
.eco-cta-card:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(15,157,88,.14);border-color:var(--ux-green)}
.eco-cta-card .eco-name{font-size:17px;font-weight:800}
.eco-cta-card .eco-desc{font-size:13px;color:var(--ux-muted);line-height:1.5}
@media(max-width:768px){.eco-cta-grid{grid-template-columns:1fr}}
/* Floating ecosystem promo */
.eco-float{position:fixed;right:18px;bottom:84px;z-index:9990;width:260px;max-width:calc(100vw - 36px);background:linear-gradient(135deg,#0d2818,#0f9d58);color:#fff;border-radius:16px;padding:16px 16px 14px;box-shadow:0 14px 40px rgba(0,0,0,.28);transform:translateX(120%);opacity:0;transition:transform .5s var(--ux-ease),opacity .5s;font-size:13px}
.eco-float.show{transform:translateX(0);opacity:1}
.eco-float__close{position:absolute;top:8px;right:10px;background:none;border:0;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;line-height:1}
.eco-float__close:hover{color:#fff}
.eco-float h5{margin:0 0 4px;font-size:15px;font-weight:800}
.eco-float p{margin:0 0 10px;color:rgba(255,255,255,.8);line-height:1.4}
.eco-float a.eco-float__btn{display:inline-block;background:#fff;color:#0f9d58;padding:8px 14px;border-radius:999px;font-weight:700;text-decoration:none;font-size:12px}
.eco-float a.eco-float__btn:hover{background:#e6fbf0}
@media(max-width:560px){.eco-float{bottom:78px}}
.ach-fb{flex:0 1 auto;max-width:100%}