root{
  --blue-900:#0f3a5c; --blue-800:#154a74; --blue-700:#1d5d92;
  --blue-50:#f7fbff; --white:#ffffff; --red:#e31e24;
  --text:#102a43; --muted:#5b6b7e; --border:#e6eef7;
  --shadow:0 8px 24px rgba(16,42,67,.08); --container:1200px;
}

/* ===== RESET & BASE ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Poppins',system-ui,Segoe UI,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}

/* ===== TOPBAR (legacy) ===== */
.topbar{background:#fff;border-bottom:1px solid var(--border)}
.topbar-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:70px;height:70px;object-fit:contain}
.brand .name{font-weight:800;color:#0e3d6d;letter-spacing:.3px}
.brand small{display:block;color:#6b8fb1;font-weight:600}
.header-right{display:flex;align-items:center;gap:14px}
.header-hotline{color:var(--red);font-weight:800;font-size:18px;letter-spacing:.2px}
.header-social a{color:#1d5d92;margin-right:8px}

/* ===== NAVBAR (legacy) ===== */
.navbar{background:var(--blue-900);position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;gap:18px;min-height:48px}
.nav a{color:#fff;opacity:.95;font-weight:600}
.nav a:hover{opacity:1;text-decoration:underline}
.mobile-toggle{display:none;margin-left:auto;background:#0e3d6d;color:#fff;border:0;padding:8px 10px;border-radius:6px;font-size:18px}

/* ===== SITE HEADER (new, scoped) ===== */
.site-header{position:sticky; top:0; z-index:50; background:#fff}
.site-header .header-bar{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px;
  align-items:center; padding:8px 12px;
  border-bottom:1px solid #e8eef6;
}
.site-header .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.site-header .brand-logo{height:58px; width:auto; object-fit:contain}
.site-header .brand-text{display:flex; flex-direction:column}
.site-header .brand-name{font:800 18px/1.2 Poppins,system-ui; color:#0f3a5c; letter-spacing:.2px}
.site-header .brand-tag{font:500 12px/1; color:#6b8fb1; font-style:italic}
.site-header .hotline{
  justify-self:center; color:#d10; font-weight:800; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.site-header .header-tools{display:flex; align-items:center; gap:10px; justify-self:end}

/* search */
.search{display:flex; align-items:center; background:#f6f9ff; border:1px solid #dfe8f3; border-radius:999px; overflow:hidden}
.search input{height:34px; padding:0 10px; border:0; background:transparent; outline:none; min-width:200px}
.search button{height:34px; width:38px; border:0; background:transparent; cursor:pointer; color:#5b6b7e}

/* socials + langs */
.socials a{color:#0f3a5c; margin:0 4px; font-size:16px}
.langs img{width:22px; height:14px; object-fit:cover; border:1px solid #e2e8f0; border-radius:2px; margin-left:6px}

/* toggle */
.nav-toggle{display:none; background:#064f9b; color:#fff; border:0; padding:8px 10px; border-radius:8px}

/* mainnav */
.mainnav{background:#064f9b; box-shadow:0 4px 18px rgba(16,42,67,.08)}
.menu{max-width:1200px; margin:0 auto; padding:0 12px; list-style:none;
      display:flex; gap:24px; align-items:center; min-height:44px}
.menu > li > a{color:#fff; font-weight:700; padding:10px 0; display:block}
.menu > li > a:hover{opacity:.9}

/* ===== SUBMENU (unified) ===== */
.has-sub{ position:relative; }
.submenu{
  position:absolute; left:0; top:100%; min-width:240px; list-style:none;
  padding:8px 0; margin:6px 0 0; display:none; z-index:20;
  background:#0f3a5c; border-radius:8px; box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.submenu a{ display:block; padding:10px 14px; color:#fff; text-decoration:none; }
.submenu a:hover{ background:rgba(255,255,255,.08); }
@media (hover:hover){ .has-sub:hover > .submenu{ display:block; } }
@media (max-width:768px){
  .menu{flex-direction:column; gap:0; align-items:stretch; display:none}
  .menu.show{display:flex}
  .submenu{ position:static; margin:0; box-shadow:none; border-radius:0; background:#0c3f7b; }
  .has-sub:hover > .submenu{ display:none; }
  .has-sub.open > .submenu{ display:block; }
  .nav-toggle{display:inline-flex; justify-content:center; align-items:center}
  .site-header .header-bar{grid-template-columns:1fr auto auto; gap:10px}
  .site-header .hotline{display:none}
  .search input{min-width:120px}
}

/* ===== HERO (clean) ===== */
.hero{
  aspect-ratio: 16 / 6;
  height: clamp(220px, 32vw, 520px);
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 991.98px){
  .hero{ aspect-ratio: auto; height: clamp(220px, 45vw, 320px); margin: 0 12px; }
}
.hero .slides{ width:100%; height:100%; overflow:hidden; }
.hero .track{ height:100%; display:flex; transition: transform .6s ease; }
.hero .slide{ flex:0 0 100%; height:100%; position:relative; }
.hero .slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.hero .slide.contain img{ object-fit:contain; background:#fff; padding:16px; }
.hero .arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; border:0; cursor:pointer; z-index:3;
}
.hero .arrow.left{ left:10px; } .hero .arrow.right{ right:10px; }
.hero .dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:8px; z-index:3; }
.hero .dots button{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.5; border:0; }
.hero .dots button.active{ opacity:1; }

/* ===== SECTION TITLES ===== */
.section{padding:28px 0}
.section-title{font:700 22px/1.2 Poppins,system-ui;color:#0e3d6d;text-transform:uppercase;margin:14px 0 12px}
.section-title::after{content:"";display:block;width:54px;height:3px;background:var(--red);border-radius:2px;margin-top:8px}

/* ===== INTRO ===== */
.intro{background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow)}
.intro-inner{padding:12px 14px}
.intro p{color:#2d3f53;margin:0 0 10px}

/* ===== CATEGORY ===== */
.cat-wrap{margin-top:10px}
.cat-head{display:flex;align-items:center;justify-content:space-between;padding:10px;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow)}
.cat-title{background:var(--blue-800);color:#fff;padding:10px 14px;border-radius:6px;font-weight:700;display:inline-flex;gap:8px;align-items:center}
.cat-more{color:#0e3d6d;font-weight:700}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.p-card{background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.p-card:hover{transform:translateY(-2px)}
.p-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.p-caption{display:block;text-align:center;color:#0e3d6d;padding:8px 6px;font-weight:600}

/* ===== PROJECTS ===== */
.proj{margin-top:8px}
.proj-track{display:flex;gap:14px;overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.proj-card{min-width:70%;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);scroll-snap-align:start}
.proj-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.proj-caption{padding:10px 12px;color:#0e3d6d;font-weight:600}

/* ===== NEWS + REVIEWS ===== */
.news-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:20px}
.news-feature{background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:10px}
.news-feature img{width:100%;aspect-ratio:16/9;object-fit:cover}
.news-feature-title{font-weight:700;color:#0e3d6d;padding:10px 12px}
.news-feature-desc{color:var(--muted);padding:0 12px 10px}
.news-list{display:flex;flex-direction:column;gap:8px}
.news-item{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);overflow:hidden}
.news-item img{width:100%;aspect-ratio:4/3;object-fit:cover}
.news-item-text{color:#0e3d6d;font-weight:600;padding-right:8px}
.rv-card{background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);padding:14px}
.rv-item{display:none}.rv-item.active{display:block}
.rv-stars{color:#ffb300;margin:6px 0}
.rv-author{display:flex;align-items:center;gap:10px;font-weight:700;color:#0e3d6d}
.rv-author img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.rv-actions{display:flex;gap:8px;margin-top:10px}
.rv-actions button{background:var(--blue-800);color:#fff;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}

/* ===== PARTNERS ===== */
.partners{background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:8px}
.partners-track{display:flex;gap:18px;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory}
.partner{flex:0 0 140px;height:56px;background:#fff;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;scroll-snap-align:start}
.partner img{max-width:120px;max-height:36px;object-fit:contain}

/* ===== DRAWER (mobile menu) ===== */
.drawer{position:fixed;inset:0;z-index:120;display:none}
.drawer.show{display:block}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s}
.drawer.show .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:#0b2137;color:#eef6ff;border-left:1px solid rgba(255,255,255,.08);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;padding:14px}
.drawer.show .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.drawer-title{font-weight:800;letter-spacing:.3px}
.drawer-close{background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;padding:6px}
.drawer-nav{display:flex;flex-direction:column;margin:8px 0 10px;gap:6px}
.drawer-nav a{padding:12px 10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.drawer-nav a:hover{background:rgba(255,255,255,.1)}
.drawer-block{margin-top:10px}
.drawer-label{font-size:12px;color:#9be7ff;margin:8px 0 6px;text-transform:uppercase;letter-spacing:.4px}
.drawer-hotline{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#03232e;background:linear-gradient(90deg,#22d3ee,#2dd4bf);padding:10px 12px;border-radius:999px}
.drawer-logos{display:flex;gap:8px;flex-wrap:wrap}
.drawer-logos img{height:26px;object-fit:contain;background:#fff;border-radius:6px;padding:4px}

/* ===== BANNER (optional fixed height) ===== */
.banner img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* ===== FOOTER – FULL WIDTH (kept) ===== */
.ft{width:100%;background:#0b2b66;color:#dbeafe;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
.ft .container{width:100%;max-width:none;margin:0;padding:20px 16px;box-sizing:border-box}

.ft-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12);
}
.ft-brand{display:flex;align-items:center;gap:12px}
.ft-brand img{height:56px;width:auto;border-radius:8px;background:#fff;padding:6px}
.ft-brand h3{margin:0;color:#fff;font-size:20px;font-weight:800}
.ft-brand p{margin:0;color:#9fb3ff;font-size:14px}
.ft-hotline{display:inline-flex;align-items:center;gap:8px;background:#0b4d9e;color:#fff;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}

.ft-grid{display:grid;gap:22px;grid-template-columns:repeat(4,1fr);align-items:start}
.ft h4{margin:0 0 12px;color:#fff;font-size:16px;font-weight:800}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{margin:8px 0;font-size:14px;line-height:1.5;display:flex;gap:10px}
.ft-col a{color:#dbeafe;text-decoration:none}
.ft-col a:hover{text-decoration:underline}
.ft-col i{color:#9fbbff;margin-top:3px}

.ft-map{border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.ft-map iframe{width:100%;height:160px;border:0;display:block}
.ft-social{display:flex;gap:10px;margin-top:10px}
.ft-social a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff}
.ft-social a:hover{background:rgba(255,255,255,.2)}

.ft-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:22px;padding:12px 0;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  color:#9fb3ff;font-size:13px;
}
.ft-bottom .ft-mini{display:flex;gap:10px}
.ft-bottom .ft-mini a{color:#9fb3ff}

/* ===== RESPONSIVE (shared) ===== */
@media (max-width:1024px){
  .news-wrap{grid-template-columns:1fr}
}
@media (max-width:992px){
  .ft-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:768px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .news-item{grid-template-columns:100px 1fr}
}
@media (max-width:576px){
  .ft-top{flex-direction:column;align-items:flex-start;gap:10px}
  .ft-hotline{width:100%;justify-content:center}
  .ft-grid{grid-template-columns:1fr;gap:14px}
  .ft-map iframe{height:200px}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:400px){
  .cat-grid{grid-template-columns:1fr}
  .news-item{grid-template-columns:96px 1fr}
}
/* Khung tổng thể mục SẢN PHẨM */
.section.products,
.cat-wrap{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:14px;
}

/* Lưới sản phẩm rõ ràng hơn */
.cat-grid{
  gap:16px;                     /* nới khoảng cách thẻ */
}
@media (min-width: 992px){
  .cat-grid{ grid-template-columns:repeat(4,1fr); }
}

/* Thẻ sản phẩm (card) đóng khung đậm hơn) */
.p-card{
  background:#fff;
  border:1.5px solid #d9e4f2;   /* viền rõ hơn */
  border-radius:10px;
  overflow:hidden;
  box-shadow:none;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.p-card:hover{
  border-color:#0e3d6d;
  box-shadow:0 10px 20px rgba(16,42,67,.08);
  transform:translateY(-2px);
}

/* Ảnh trong thẻ: có đường phân cách với caption */
.p-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#f7fbff;
  border-bottom:1px solid var(--border);
}

/* Caption rõ ràng + khoảng đệm */
.p-caption{
  display:block;
  text-align:center;
  color:#0e3d6d;
  font-weight:700;
  padding:10px 8px;
}

/* (tuỳ chọn) Hàng thông tin phụ: giá / nút */
.p-meta{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 10px 12px;
}
.p-price{ color:#d10; font-weight:800; }
.p-btn{
  background:#0b4d9e; color:#fff; border:0; padding:8px 10px;
  border-radius:8px; cursor:pointer;
}
.p-btn:hover{ filter:brightness(1.06); }
/* === PRODUCT CARDS: đồng đều tuyệt đối === */
.cat-grid{gap:16px}
@media (min-width: 992px){ .cat-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 768px){ .cat-grid{grid-template-columns:repeat(2,1fr)} }

.p-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1.5px solid #d9e4f2;
  border-radius:10px; overflow:hidden;
}

/* Ô ảnh cố định tỉ lệ + chiều cao — ảnh luôn phủ kín */
.p-card img{
  width:100%;
  height:220px;                 /* đồng nhất chiều cao ảnh */
  object-fit:cover;             /* phủ kín không méo */
  display:block;
  background:#f4f8ff;           /* nền khi ảnh tải chậm */
  border-bottom:1px solid var(--border);
}

/* Chữ cố định cao để các card bằng nhau */
.p-caption{
  min-height:48px;              /* giữ chiều cao phần caption */
  display:flex; align-items:center; justify-content:center;
  padding:10px 8px; text-align:center;
  font-weight:700; color:#0e3d6d;
}

/* (tuỳ chọn) viền/hover đẹp hơn */
.p-card:hover{ border-color:#0e3d6d; box-shadow:0 10px 20px rgba(16,42,67,.08); }
/* ==== FIX LỖI ĐÈ Ở HEADER (MOBILE) ==== */

/* Header luôn trên cùng */
.site-header{ position: sticky; top: 0; z-index: 1000; background:#fff; }

/* Bố cục 3 cột: logo | search | nút */
@media (max-width: 480px){
  .site-header .header-bar{
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }

  /* Chỉ giữ logo, ẩn text để khỏi tràn */
  .site-header .brand-text{ display:none; }
  .site-header .brand-logo{ height:40px; width:auto; }

  /* Ẩn bớt thành phần phụ */
  .hotline, .socials, .langs{ display:none; }

  /* Ô tìm kiếm co giãn đúng, không đẩy tràn */
  .search{ flex:1; width:100%; }
  .search input{
    width:100%;
    min-width:0;            /* QUAN TRỌNG: cho phép co lại */
    height:36px;
  }
  .search button{ width:36px; height:36px; }

  /* Nút menu luôn hiện ở cột phải */
  .nav-toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:8px 10px;
  }
}

/* Tablet: gọn hơn một chút */
@media (max-width: 768px){
  .site-header .hotline{ display:none; }
  .site-header .header-bar{ grid-template-columns: auto 1fr auto; }
  .search input{ min-width:120px; }
}

/* Ngăn phần dưới đè lên header khi cuộn/slider dùng position */
.hero, .slides, .track { position: relative; z-index: 1; }
/* === MOBILE POLISH (≤768px) === */
@media (max-width: 768px){
  .container{ padding-inline:12px; }

  .section-title{
    font-size:18px;
    margin:10px 0 8px;
    letter-spacing:.2px;
  }

  /* Khung danh mục sản phẩm */
  .cat-wrap{
    margin-top:12px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    box-shadow:var(--shadow);
  }
  .cat-head{
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f8fbff;
  }
  .cat-title{
    font-size:14px;
    padding:8px 10px;
    border-radius:8px;
    background:var(--blue-800);
    color:#fff;
  }
  .cat-more{
    margin-left:auto;
    font-size:13px;
  }

  /* Lưới → 1 cột; khoảng cách thoáng */
  .cat-grid{
    grid-template-columns:1fr !important;
    gap:12px;
    margin-top:10px;
  }

  /* Thẻ sản phẩm */
  .p-card{
    border:1px solid #e2eaf4;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:none;
    transition:box-shadow .2s, transform .15s;
  }
  .p-card:active{ transform:scale(.995); }  /* cảm giác bấm */

  /* Ảnh to rõ, không méo */
  .p-card img{
    width:100%;
    height:240px;       /* chỉnh 220–260 tùy anh thích */
    object-fit:cover;
    background:#f4f8ff;
    border-bottom:1px solid var(--border);
  }

  /* Caption dễ đọc */
  .p-caption{
    font-size:15px;
    line-height:1.35;
    padding:12px 10px;
    text-align:center;
    color:#0e3d6d;
    font-weight:700;
    min-height:48px;
  }
}
/* FIX "MỜ TRẮNG" Ở KHUNG SẢN PHẨM – ƯU TIÊN CAO */
#sanpham .cat-wrap{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
}

#sanpham .cat-head{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
}

#sanpham .p-card{
  background:#fff !important;
  box-shadow:none !important;
}

#sanpham .p-card img{
  background:transparent !important;   /* bỏ nền xanh nhạt */
  height:240px;                        /* tùy chỉnh 220–260 */
  object-fit:cover;
  border-bottom:1px solid var(--border);
}

/* bảo đảm không có lớp mờ phủ lên */
#sanpham, #sanpham *{
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
}

/* Nếu lỡ còn overlay/backdrop nào mở → tắt thẳng */
.drawer-backdrop{ display:none !important; opacity:0 !important; }
/* Khung xanh rõ cho thẻ sản phẩm */
.p-card,
.product-card,
.card.sp-item {
  border: 2px solid #0b4d9e !important;  /* xanh đậm */
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Ảnh đồng đều */
.p-card img,
.product-card img,
.card.sp-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #e6eef7;
}
/* SẢN PHẨM CUNG CẤP – Ảnh luôn thấy 100%, không bị cắt */
#sanpham .p-card img{
  width: 100%;
  height: 240px !important;        /* chỉnh 220–280 tùy ý */
  object-fit: contain !important;  /* TRỌN ẢNH */
  background: #f6f9ff;             /* lấp khoảng trống (letterbox) */
  padding: 6px;                    /* chừa mép cho viền */
  border: 2px solid #0b4d9e;
  border-radius: 12px;
  box-sizing: border-box;
  border-bottom: 0 !important;     /* bỏ đường kẻ cũ nếu có */
}
@media (max-width:768px){
  #sanpham .p-card img{ height: 260px !important; }
}
/* Ảnh trong mục SẢN PHẨM CUNG CẤP – luôn thấy 100%, viền xanh đủ 4 cạnh */
#sanpham .p-card img{
  width:100%;
  height:240px !important;
  object-fit:contain !important;   /* không cắt ảnh */
  background:#f6f9ff;
  padding:6px;
  border-radius:12px;
  box-sizing:border-box;

  /* ÉP viền xanh cho cả 4 cạnh, đặc biệt cạnh dưới */
  border:2px solid #0b4d9e !important;
  border-bottom-width:2px !important;
  border-bottom-color:#0b4d9e !important;

  /* Tắt mọi viền ảo cũ nếu có */
  box-shadow:none !important;
}

/* Nếu nơi khác từng đặt đường kẻ dưới ảnh → tắt hẳn */
#sanpham .p-card img{ border-bottom:2px solid #0b4d9e !important; }
/* ===== REVIEW BOX – gọn, rõ, sang ===== */
#danhgia .rv-card,
.reviews .rv-card{
  position: relative;
  background:#fff;
  border:1.5px solid #d9e4f2;   /* viền xanh nhạt */
  border-radius:14px;
  box-shadow:0 10px 24px rgba(16,42,67,.08);
  padding:16px 18px;
}

/* Sọc điểm nhấn cạnh trái */
#danhgia .rv-card::before,
.reviews .rv-card::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:4px; background:#0b4d9e; border-radius:14px 0 0 14px;
}

/* Dòng sao + quote */
.rv-stars{ color:#ffb300; margin:4px 0 8px; font-size:18px; letter-spacing:1px }
.rv-quote, .rv-card p{
  color:#2d3f53; margin:0 0 10px; line-height:1.6; font-style:italic;
}
.rv-quote::before{ content:"“"; color:#0b4d9e; font:800 40px/0.6 Poppins; margin-right:6px; vertical-align:middle }

/* Tác giả */
.rv-author{ display:flex; align-items:center; gap:10px; margin-top:10px; font-weight:700; color:#0e3d6d }
.rv-author img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid #eef4ff }

/* Nút điều hướng (nếu có) */
.rv-actions{ display:flex; gap:8px; margin-top:12px }
.rv-actions button{
  background:#0b4d9e; color:#fff; border:0; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.rv-actions button:hover{ filter:brightness(1.06) }

/* Bao khối review bằng 1 khung tổng (nếu muốn) */
#danhgia .reviews-wrap{
  background:#fff; border:1.5px solid #e2eaf4; border-radius:14px; padding:12px;
}

/* Mobile: thở hơn */
@media (max-width:768px){
  #danhgia .rv-card{ padding:14px }
  .rv-author img{ width:46px; height:46px }
}
/* ĐÓNG KHUNG CỘT "ĐÁNH GIÁ CỦA KHÁCH HÀNG" (không đổi HTML) */
.news-wrap > *:last-child{
  background:#fff;
  border:1.5px solid #d9e4f2;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(16,42,67,.08);
  padding:16px;
  position:relative;
}

/* Sọc nhấn xanh bên trái khung */
.news-wrap > *:last-child::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px; background:#0b4d9e; border-radius:14px 0 0 14px;
}

/* Bên trong khung: sao, avatar, nút */
.news-wrap > *:last-child .rv-stars{ color:#ffb300; margin:6px 0 10px; }
.news-wrap > *:last-child .rv-author{ display:flex; align-items:center; gap:10px; font-weight:700; color:#0e3d6d; }
.news-wrap > *:last-child .rv-author img{ width:48px; height:48px; border-radius:50%; border:2px solid #eef4ff; object-fit:cover; }
.news-wrap > *:last-child .rv-actions{ display:flex; gap:8px; margin-top:12px; }
.news-wrap > *:last-child .rv-actions button{ background:#0b4d9e; color:#fff; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; }

@media (max-width:768px){
  .news-wrap > *:last-child{ padding:12px; }
}
/* Desktop: review box chỉ cao theo nội dung, không bị kéo cao */
@media (min-width: 992px){
  .news-wrap{ align-items: start; }            /* ngăn stretch theo trục dọc */
  .news-wrap > *:last-child{
    align-self: start;                          /* item phải tự co theo content */
    height: auto !important;
    max-height: none !important;
  }
}
/* 1) BỎ viền của CỘT PHẢI để không ôm cả hai phần */
.news-wrap > *:last-child{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  align-self: start;            /* desktop: cao theo nội dung */
}

/* 2) Đóng khung riêng cho Ô ĐÁNH GIÁ */
.news-wrap > *:last-child .rv-card{
  position: relative;
  background:#fff;
  border:1.5px solid #d9e4f2;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 6px 16px rgba(16,42,67,.06);
}
.news-wrap > *:last-child .rv-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:#0b4d9e; border-radius:12px 0 0 12px;
}

/* 3) Nhóm TIỆN ÍCH đặt THÀNH KHỐI RIÊNG phía dưới */
.news-wrap > *:last-child .review-extra{
  margin-top:14px;                 /* KHOẢNG CÁCH tách hai ô */
  display:flex; flex-direction:column; gap:12px;
}
.news-wrap > *:last-child .review-extra .aside-card{
  background:#fff;
  border:1px solid #e2eaf4;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 6px 16px rgba(16,42,67,.06);
}

/* 4) Desktop: giữ gọn, không kéo cao theo cột trái */
@media (min-width: 992px){
  .news-wrap{ align-items: start; }
}
/* đặt đúng dưới review */
.news-wrap > *:last-child .review-extra{
  margin-top:12px;
  display:flex; flex-direction:column; gap:12px;
}

.news-wrap > *:last-child .aside-card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow);
}
.news-wrap > *:last-child .aside-card h4{
  margin:0 0 8px; font:800 16px/1.2 Poppins,system-ui; color:#0e3d6d;
}
.news-wrap > *:last-child .aside-card p{ margin:0 0 8px; color:#5b6b7e; font-size:14px }

.aside-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.aside-list a{ color:#0b4d9e; font-weight:600; text-decoration:none }
.aside-list a:hover{ text-decoration:underline }

/* nút dùng lại style chung */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:10px;font-weight:700;border:2px solid transparent;text-decoration:none}
.btn-primary{background:#0b4d9e;color:#fff;border-color:#0b4d9e}
.btn-primary:hover{filter:brightness(1.06)}
.btn-outline{background:#fff;color:#0b4d9e;border-color:#0b4d9e}
.btn-outline:hover{background:#0b4d9e;color:#fff}
.w-full{width:100%;text-align:center}

/* desktop: khung review + extra không kéo cao theo cột trái */
@media (min-width: 992px){
  .news-wrap{ align-items:start; }
  .news-wrap > *:last-child{ align-self:start; }
}
/* ===== Sidebar (cột bên phải Tin tức) – làm gọn, tách ô rõ ===== */

/* 1) Gỡ viền/vệt xanh đang ôm cả cột */
.news-wrap > *:last-child{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  align-self: start;
}
.news-wrap > *:last-child::before{ content: none !important; } /* xóa vệt xanh dọc */

/* 2) Khung ĐÁNH GIÁ (card 1) */
.news-wrap > *:last-child .rv-card{
  background:#fff;
  border:1px solid #e6eef7;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 6px 16px rgba(16,42,67,.06);
  margin-bottom:14px;                 /* tách với khối dưới */
}
/* bỏ sọc nhấn cũ nếu còn */
.news-wrap > *:last-child .rv-card::before{ content:none !important; }

/* 3) Nhóm TIỆN ÍCH (card 2…) */
.news-wrap > *:last-child .review-extra{
  display:flex; flex-direction:column; gap:12px;
}
.news-wrap > *:last-child .review-extra .aside-card{
  background:#fff;
  border:1px solid #e6eef7;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 6px 16px rgba(16,42,67,.06);
}

/* 4) Typo gọn trong các card */
.news-wrap > *:last-child .rv-card h3,
.news-wrap > *:last-child .review-extra h4{ margin:0 0 8px; color:#0e3d6d; }
.news-wrap > *:last-child .rv-stars{ margin:6px 0 8px; color:#ffb300; }
.news-wrap > *:last-child .rv-author{ margin-top:10px; display:flex; gap:10px; align-items:center; font-weight:700; color:#0e3d6d; }
.news-wrap > *:last-child .rv-author img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }

/* 5) Desktop không bị kéo cao theo cột trái */
@media (min-width: 992px){
  .news-wrap{ align-items:start; }
  .news-wrap > *:last-child{ align-self:start; }
}
/* Tách 2 nút "Gọi" và "Gửi email" trong khối Liên hệ nhanh */
.news-wrap > *:last-child .aside-card.cta{
  display: flex;
  flex-direction: column;
  gap: 10px;                 /* khoảng cách giữa các phần tử */
}
.news-wrap > *:last-child .aside-card.cta .btn{
  width: 100%;
}

/* Phòng khi selector khác: luôn chừa mép cho nút đứng ngay sau nút trước */
.cta .btn + .btn{ margin-top: 10px; }
/* Đóng khung phần tin tức */
#tintuc {
    border: 2px solid #ccc;       /* Viền màu xám */
    border-radius: 10px;          /* Bo góc */
    padding: 15px;                /* Khoảng cách bên trong */
    background-color: #fff;       /* Nền trắng */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Đổ bóng nhẹ */
}
/* Đóng khung ảnh phần tin tức */
#tintuc img {
    border: 3px solid #007bff;  /* Viền xanh đậm */
    border-radius: 10px;        /* Bo góc */
    padding: 4px;               /* Khoảng cách giữa viền và ảnh */
    background-color: #fff;     /* Nền trắng cho khung */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Đổ bóng nhẹ */
}
.site-header .header-bar{ position:sticky; top:0; z-index:5000; background:#fff; }
@media (max-width: 992px){
  .mainnav{
    position:fixed; inset:64px 0 0; background:#083874;
    transform:translateX(100%); transition:transform .25s ease; z-index:4000;
  }
  .mainnav.open{ transform:translateX(0); }
  .mainnav .menu{ list-style:none; padding:8px 0; margin:0; }
  .mainnav .menu a{ display:block; padding:12px 14px; color:#fff; text-decoration:none; }
  .mainnav .submenu{ display:none; background:rgba(255,255,255,.06); padding-left:10px; }
  .mainnav .has-sub.open > .submenu{ display:block; }
}
#navToggle{ cursor:pointer; }
/* Đảm bảo header luôn nằm trên cùng */
.site-header{ position: sticky; top:0; z-index: 9999; background:#fff; }
.site-header .header-bar{ position: sticky; top:0; z-index: 10000; background:#fff; }

/* Menu off-canvas cũng ở trên */
.mainnav{ z-index: 9998; }

/* Mọi hero/slider/banner ở dưới header */
.hero, .section-hero, .banner, .slider, .swiper, .swiper-container{
  position: relative; z-index: 1;
}

/* Nếu hero có lớp phủ ::before/::after thì không chặn click */
.hero::before, .banner::before, .slider::before{
  pointer-events: none;
}
/* Ép header luôn click được */
.site-header,
.header-bar,
#navToggle{ position:relative; z-index:2147483647 !important; }

/* Hero không được bắt chuột ở vùng dưới header */
.hero .slides,
.hero .track,
.hero .slide,
.hero .slide img{ pointer-events:none !important; }

/* Nhưng các nút của slider vẫn bấm được */
.hero .arrow,
.hero .dots{ pointer-events:auto !important; }
/* Ưu tiên header và nút menu trên cùng, luôn nhận click */
.site-header,
.header-bar,
#navToggle{
  position: relative;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* Hero không chặn chuột nữa */
.hero .slides,
.hero .track,
.hero .slide,
.hero .slide img{
  pointer-events: none !important;
}
/* Giữ click cho nút mũi tên / chấm */
.hero .arrow,
.hero .dots{
  pointer-events: auto !important;
}
/* KHUNG thẻ bao video/ảnh */
.news-feature{
  display:block;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden; /* để bo góc ăn vào media */
}

/* Áp style cho cả IMG và VIDEO */
.news-feature img,
.news-feature video{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  object-fit:cover; /* bỏ nếu muốn giữ nguyên tỉ lệ */
}
/* Modal đẹp + responsive */
#dlNewsModal {
  width: min(900px, 92vw);
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;              /* tránh tràn góc */
  z-index: 9999;
}
#dlNewsModal::backdrop {         /* nền mờ */
  background: rgba(0,0,0,.45);
}

/* Khung trong modal chiếm tối đa 90% chiều cao */
.dl-news-modal-inner{
  background:#fff;
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Phần nội dung cuộn độc lập */
.dl-news-modal-body{
  padding:18px;
  overflow: auto;
}

/* Ảnh trong modal: không cắt + viền */
.dl-news-modal-thumb{
  box-sizing:border-box;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#fff;
  border:2px solid var(--dl-primary);
  border-radius:8px;
}

/* Ảnh card, bài mới: tránh tràn viền trên mobile */
.dl-news-thumb,
.dl-news-recent-item img{
  box-sizing:border-box;
  display:block;
}
/* Submenu cho mobile: ẩn mặc định, mở có transition */
@media (max-width: 992px){
  .mainnav .submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    display: none;               /* JS sẽ set display:block khi mở */
    background: rgba(255,255,255,.05);
  }
  .mainnav .submenu a{ padding-left: 34px; } /* thụt vào */
  .mainnav .has-sub > a::after, .mainnav .toggle-sub::after{
    content: '▾';
    float: right;
    opacity: .9;
    transform: rotate(0deg);
    transition: transform .2s ease;
  }
  .mainnav .has-sub.open > a::after,
  .mainnav .has-sub.open > .toggle-sub::after{
    transform: rotate(180deg);
  }
}
.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ảnh sẽ phủ toàn bộ khung, không méo hình */
  border-radius: 18px; /* giữ bo tròn khung */
}
.news-feature {
  border: 2px solid #ccc; /* Viền khung */
  border-radius: 8px;     /* Bo góc */
  overflow: hidden;       /* Ẩn phần thừa */
  max-width: 100%;        /* Không vượt quá chiều rộng container */
}

.news-feature video {
  display: block;
  width: 100%;
  height: auto;
}

.news-feature-title {
  padding: 10px;
  background: #f8f8f8;
  font-weight: bold;
  text-align: center;
}
.news-row {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Trái rộng gấp đôi phải */
  gap: 24px;
}

.news-col {
  min-width: 0;
}

.reviews-col {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.reviews-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.reviews-stars {
  color: #f5a623;
  margin: 8px 0;
}

.reviews-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .news-row {
    grid-template-columns: 1fr; /* Mobile thành 1 cột */
  }
}