/* ==========================================================================
   home.css — nâng cấp giao diện THỬ NGHIỆM riêng cho trang Tổng quát
   Chỉ index.html nạp file này. Xoá 1 dòng <link> trong index.html để gỡ bỏ
   toàn bộ thay đổi và quay lại giao diện gốc, không ảnh hưởng trang khác.
   ========================================================================== */

:root{
  --font-display:'Noto Sans','Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'Noto Sans','Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

h1,h2,h3{letter-spacing:-.01em;}

.hl{color:var(--seal);}
.hero .hl{color:#6FC1F0;}

/* ---------- hero 2 cột: chữ | minh hoạ ---------- */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,600px) 1fr; gap:48px; align-items:stretch;
}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; max-width:340px; margin:0 auto 8px; height:280px;}
}
.hero-visual{position:relative; height:100%;}
.hero-illustration{width:100%; height:auto; display:block;}

.hero-stat-card{
  position:absolute; left:-20px; bottom:-22px;
  background:rgba(15,27,36,0.94); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.14); border-radius:16px;
  padding:18px 20px; display:grid; gap:14px; min-width:192px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
@media (max-width:520px){
  .hero-stat-card{position:static; margin-top:16px; left:auto; bottom:auto;}
}
.hero-stat-card .stat-row{display:flex; align-items:center; gap:12px;}
.hero-stat-card .stat-icon{
  width:36px; height:36px; border-radius:10px; background:rgba(0,150,255,.16);
  color:#6FC1F0; display:flex; align-items:center; justify-content:center; flex:none;
}
.hero-stat-card .stat-icon .icon{width:18px; height:18px;}
.hero-stat-card .stat-num{font-family:var(--font-display); font-size:19px; font-weight:700; color:#F5FAFF; line-height:1.15;}
.hero-stat-card .stat-label{font-size:11px; color:#AEB8C2; margin-top:1px;}

/* an-tam layout + sidebar */
.container-wide{max-width:1440px;}

.home-layout{display:grid; grid-template-columns:1fr 280px; gap:28px; align-items:start;}
@media (max-width:1080px){
  .home-layout{grid-template-columns:1fr;}
}
.home-main{display:flex; flex-direction:column; min-width:0;}
.home-block{margin-top:80px;}
.home-block:first-child{margin-top:0;}

.sidebar-baiviet{position:sticky; top:140px;}
.sidebar-baiviet h3{
  font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px;
}
.sidebar-baiviet-list{display:grid; gap:16px;}
.sidebar-baiviet-item{
  display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:var(--ink);
  padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
}
.sidebar-baiviet-item img{width:64px; height:64px; object-fit:cover; border-radius:8px; flex:none; display:block;}
.sidebar-baiviet-item span{font-size:13.5px; font-weight:600; line-height:1.4;}
.sidebar-baiviet-item:hover{border-color:var(--seal);}
.sidebar-baiviet-item:hover span{color:var(--seal);}
@media (max-width:1080px){
  .sidebar-baiviet{position:static; margin-top:28px;}
}