/* styles.css - CANHOVIP */

/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
html,body{margin:0;padding:0;background:#fff}
body{color:#333}
.no-scroll{overflow:hidden}

/* Header */
.header .top-banner img{width:100%;display:block}
.nav-bar{display:flex;justify-content:space-between;align-items:center;background:#004aad;padding:10px 40px;color:#fff;position:relative}
.logo img{height:40px}
.menu ul{list-style:none;display:flex;gap:20px}
.menu a{color:#fff;text-decoration:none;font-weight:bold}
.actions button{margin-left:10px;padding:6px 14px;border:none;border-radius:4px;cursor:pointer;font-weight:bold}
.btn-dangtin{background:orange;color:#fff}
.btn-dangnhap{background:#fff;color:#004aad}

/* Search bar (section) */
section{padding:40px;background:#fff;margin-bottom:20px}
h2{color:#004aad;margin-bottom:20px;border-left:5px solid #004aad;padding-left:10px}

/* Tin tức */
.tin-tuc-list{display:flex;gap:20px;align-items:stretch}
.tin-left,.tin-center,.tin-right{flex:1;display:flex;flex-direction:column}
.tin-right{justify-content:flex-start}
.tin-right img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.news-items{list-style:none;padding-left:0}
.news-items li{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #eee;font-size:16px;line-height:1.5}
.news-items .num{display:inline-block;background:#e53935;color:#fff;font-weight:bold;border-radius:6px;padding:6px 10px;margin-right:12px;min-width:36px;text-align:center;font-size:14px}

/* Dự án */
.du-an-list{display:flex;gap:20px}
.du-an-list>div{flex:1;background:#f4f4f4;padding:15px;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,.05)}
.du-an-list img{width:100%;border-radius:6px;margin-bottom:10px}

/* Sản phẩm */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:10px}
.product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.05);transition:transform .2s}
.product-card:hover{transform:translateY(-4px)}
.img-wrapper{position:relative;overflow:hidden;border-radius:8px}
.img-wrapper img{width:100%;height:auto;display:block;border-radius:8px}
.badge-left,.badge-right{position:absolute;top:10px;padding:4px 10px;border-radius:20px;font-weight:bold;font-size:13px}
.badge-left{left:10px;background:#0056d6;color:#fff}
.badge-right{right:10px;background:#fff;color:#333;box-shadow:0 0 3px rgba(0,0,0,.2)}
.product-info{padding:10px 15px}
.product-info h3{font-size:16px;font-weight:bold;margin:10px 0}
.product-info p{font-size:14px;color:#444}
.price{color:red;font-weight:bold}
.actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.actions button{margin-right:0;font-size:16px;background:none;border:1px solid #ccc;padding:4px 8px;border-radius:6px;cursor:pointer}
.actions .btn-dangtin{background:#e53935;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:16px;gap:8px}
.actions .btn-dangnhap{background:#fff;color:#004aad;border:2px solid #004aad;border-radius:8px;padding:10px 20px;font-size:16px;gap:8px}
.actions .btn-dangtin:hover,.actions .btn-dangnhap:hover{filter:brightness(.98)}

/* Nhà môi giới */
.nha-moi-gioi{text-align:center;padding:40px 20px;background:#f9f9f9}
.swiper-wrapper{display:flex;justify-content:center;flex-wrap:nowrap;gap:30px;overflow-x:auto;padding:20px 0;scroll-snap-type:x mandatory}
.agent-card{flex:0 0 auto;width:160px;scroll-snap-align:center}
.agent-card img{width:160px;height:160px;border-radius:16px;object-fit:cover;margin-bottom:10px}
.agent-card p{font-weight:bold;margin:0}

/* VIP box */
.vip-info{padding:40px 20px;background:#fff;display:flex;justify-content:center}
.vip-box{max-width:960px;border:1px solid #eee;padding:24px;border-radius:10px;font-size:16px;line-height:1.6;color:#333;background:#f9f9f9}
.vip-box a{color:#007bff;text-decoration:none;font-weight:bold}
.vip-box a:hover{text-decoration:underline}

/* Banner full */
.search-banner-full{position:relative;width:100%;background:transparent;padding:0;margin:0;overflow:hidden}
.search-banner-full .banner-background{position:relative;width:100vw;height:100%;margin-left:calc(-50vw + 50%)}
.search-banner-full .banner-background img{width:100vw;height:auto;display:block;object-fit:cover;border:none;outline:none}

/* Search overlay */
.search-form-overlay{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:90%;max-width:1100px;background:#fff;padding:20px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:10}
.search-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.search-form select,.search-form button{padding:14px 18px;font-size:15px;border:1px solid #ccc;border-radius:8px;min-width:150px}
.search-form button{background:#0044cc;color:#fff;border:none;cursor:pointer;font-size:18px;width:80px}
.search-form button:hover{background:#003399}

/* Footer */
.footer{background:#f8f8f8;color:#333;padding:40px 20px;font-size:14px;border-top:2px solid #004aad}
.footer-container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;max-width:1200px;margin:auto}
.footer-column{flex:1 1 220px;min-width:200px}
.footer-column h4{font-size:16px;margin-bottom:12px;color:#333}
.footer-column ul{list-style:none;padding:0;margin:0}
.footer-column ul li{margin-bottom:8px}
.footer-column ul li a{color:#333;text-decoration:none}
.footer-column ul li a:hover{text-decoration:underline}

/* ========== HAMBURGER & MOBILE MENU ========== */
.nav-panel{display:flex;gap:20px;align-items:center}
.hamburger{display:none;margin-left:auto;width:38px;height:32px;background:transparent;border:0;cursor:pointer}
.hamburger span{display:block;height:3px;background:#fff;margin:6px 0;border-radius:2px}

/* ========== RESPONSIVE ========== */
@media (max-width: 991px){
  .hamburger{display:block}
  .nav-bar{padding:10px 16px}
  .nav-panel{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#004aad;padding:16px 20px;z-index:1000;
    flex-direction:column;align-items:flex-start;gap:16px;
    box-shadow:0 6px 16px rgba(0,0,0,.15)
  }
  .nav-panel.open{display:flex}
  .menu ul{flex-direction:column;gap:14px}
  .menu a{display:block;padding:4px 0;font-size:16px}
  .actions{width:100%;display:flex;gap:12px}
  .actions .btn-dangtin,.actions .btn-dangnhap{flex:1}
  .tin-tuc-list{flex-direction:column}
  .du-an-list{flex-direction:column}
}
@media (max-width: 768px){
  section{padding:20px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .agent-card{width:120px}
  .agent-card img{width:120px;height:120px}
}
@media (max-width: 480px){
  h2{font-size:18px}
  .logo img{height:30px}
  .search-form{flex-direction:column}
  .search-form select,.search-form button{width:100%}
  .product-info h3{font-size:14px}
  .product-info p{font-size:12px}
}

/* ==================== MOBILE TWEAKS (<= 768px) ==================== */

/* (1) Ẩn banner nhỏ phía trên cùng */
@media (max-width: 768px) {
  .top-banner { display: none !important; }
}

/* (2) Thiết kế lại cụm ô tìm kiếm theo ảnh mẫu:
   - Container bo tròn, đổ bóng
   - Các select là "ô" bo tròn, có viền, font lớn
   - Xếp 1 hàng và KÉO NGANG được (scroll)
   - Nút kính lúp xanh dương bo tròn cuối hàng
*/
@media (max-width: 768px) {
  .search-form-overlay {
    position: relative;              /* giữ nguyên overlay */
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 auto;
    padding: 14px;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  .search-form {
    display: flex;
    flex-wrap: nowrap;               /* 1 hàng */
    overflow-x: auto;                /* kéo ngang */
    gap: 12px;
    align-items: stretch;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .search-form select,
  .search-form button {
    flex: 0 0 auto;
    height: 52px;
    border-radius: 16px;
  }
  .search-form select {
    min-width: 220px;                /* ô to dễ chạm */
    padding: 0 16px;
    border: 1.5px solid #d9d9d9;
    background: #fff;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    appearance: none;                /* ẩn caret mặc định */
    background-image:
      linear-gradient(45deg, transparent 50%, #666 50%),
      linear-gradient(135deg, #666 50%, transparent 50%);
    background-position:
      calc(100% - 24px) 20px,
      calc(100% - 18px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }
  .search-form button {
    width: 72px;                     /* ô tròn xanh ở cuối */
    min-width: 72px;
    background: #0b57d0;
    color: #fff;
    border: none;
    font-size: 20px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(11,87,208,0.35);
  }
}

/* (3) "Sản phẩm nổi bật" – chỉ 1 card / hàng trên mobile */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 8px;
  }
  .product-card { border-radius: 16px; }
  .product-info h3 { font-size: 16px; line-height: 1.35; }
  .product-info p { font-size: 13px; }
}

/* --- Center search box on mobile --- */
@media (max-width: 768px) {
  .search-form-overlay{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    /* căn giữa & kích thước gọn */
    width: calc(100% - 32px) !important; /* hai bên 16px */
    max-width: 640px;
    margin: 12px auto 20px auto;         /* giữa màn hình */
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
  }

  /* nếu phần banner dùng layout full-bleed, giữ nguyên hình */
  .search-banner-full .banner-background{
    width: 100% !important;
    margin-left: 0 !important;
  }
}


/* --- Search box mobile: stacked layout --- */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .search-form select,
  .search-form button {
    width: 100% !important;
    min-width: unset !important;
    height: 50px;
    border-radius: 10px;
    font-size: 16px;
  }

  .search-form button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(135deg, #0044cc, #0056d6);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,68,204,0.25);
  }

  .search-form button:hover {
    background: linear-gradient(135deg, #003399, #0044cc);
  }

  /* Cho icon 🔍 + chữ hiển thị */
  .search-form button::before {
    content: " ";
    font-size: 18px;
  }
}


/* ===== FOOTER REDESIGN (desktop + mobile) ===== */
.footer{
  --brand:#004aad;
  --muted:#6b7280;
  background:#f8fafc;
  border-top:3px solid var(--brand);
  padding: 48px 20px 28px;
  color:#1f2937;
  font-size:15px;
}
.footer-container{
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}

/* “card” cảm giác nổi nhẹ */
.footer-column{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

.footer-column img{ display:block; height:34px; margin-bottom:10px; }
.footer-column p{ margin:6px 0; line-height:1.65; color:#374151; }
.footer-column h4{
  font-size:15px; letter-spacing:.3px; color:#111827;
  text-transform: uppercase; margin: 0 0 10px;
}
.footer-column ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-column ul li{
  display:flex; align-items:center; gap:10px; color:#374151;
}
.footer-column a{ color:#111827; text-decoration:none; }
.footer-column a:hover{ color:var(--brand); text-decoration:underline; }

/* gạch phân cách tinh tế */
.footer-container::before{
  content:"";
  grid-column: 1 / -1;
  height:1px;
  background: linear-gradient(to right,transparent,#e5e7eb,transparent);
  margin: -8px 0 8px;
  border-radius:1px;
}

/* bottom bar */
.footer-bottom{
  max-width: 1160px;
  margin: 18px auto 0;
  padding-top: 12px;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--muted); font-size:13px;
  border-top:1px dashed #e5e7eb;
}
.footer-bottom a{ color:var(--muted); text-decoration:none; }
.footer-bottom a:hover{ color:var(--brand); }

/* ===== MOBILE ===== */
@media (max-width: 768px){
  .footer{ padding: 28px 16px 22px; }
  .footer-container{
    max-width: 680px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer-column{
    padding:16px;
    border-radius:12px;
  }
  .footer-column img{ margin:0 auto 10px; }
  .footer-column, .footer-column ul li{ text-align:center; justify-content:center; }
  .footer-bottom{
    max-width:680px;
    flex-direction:column;
    gap:6px;
    text-align:center;
    padding-top:10px;
  }
}


/* ===================== CATEGORY PAGE ===================== */
.cat-page{max-width:1200px;margin:20px auto;padding:0 16px}
.cat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.breadcrumb{color:#6b7280;font-size:14px}
.breadcrumb a{color:#3b82f6;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.cat-head .total{font-size:14px;color:#374151}

/* Filters bar */
.cat-filters{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px 16px 6px;margin:12px 0 24px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.filters-form .row{display:grid;grid-template-columns:repeat(6,1fr) auto;gap:12px;align-items:end}
.filters-form label{display:block;font-size:12px;color:#6b7280;margin-bottom:6px}
.filters-form select{height:44px;border:1px solid #d1d5db;border-radius:10px;padding:0 12px;background:#fff;font-size:14px}
.filters-form .btn-search{height:44px;border:none;border-radius:10px;padding:0 18px;background:linear-gradient(135deg,#0044cc,#0056d6);color:#fff;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 4px 10px rgba(0,68,204,.25);cursor:pointer}
.filters-form .btn-search:hover{background:linear-gradient(135deg,#003399,#0044cc)}
.col-search{min-width:140px}

/* 2-column layout */
.cat-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px}
.cat-title{font-size:20px;color:#0f172a;margin-bottom:14px}

/* Listing card */
.listing-card{display:grid;grid-template-columns:260px 1fr;gap:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin-bottom:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.listing-card .thumb{position:relative;display:block;height:170px;overflow:hidden}
.listing-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.listing-card .badge-left,.listing-card .badge-right{position:absolute;top:10px;padding:5px 10px;border-radius:12px;font-weight:700;font-size:12px}
.listing-card .badge-left{left:10px;background:#0b57d0;color:#fff}
.listing-card .badge-right{right:10px;background:#fff;color:#111;border:1px solid rgba(0,0,0,.06);box-shadow:0 0 4px rgba(0,0,0,.12)}
.listing-card .content{padding:12px 14px}
.listing-card .title{font-size:18px;line-height:1.35;margin:0 0 8px}
.listing-card .title a{color:#111827;text-decoration:none}
.listing-card .title a:hover{color:#0044cc}
.listing-card .meta{color:#475569;font-size:14px;margin:0 0 10px}
.listing-card .price{color:#e11d48;font-weight:700}
.listing-card .footer{display:flex;justify-content:space-between;align-items:center}
.listing-card .agent{display:flex;align-items:center;gap:8px;color:#334155}
.listing-card .agent .avt{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e5e7eb}
.listing-card .actions{display:flex;gap:8px}
.listing-card .actions button{background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:6px 8px;cursor:pointer}
.listing-card .actions button:hover{background:#f8fafc}

/* Sidebar */
.cat-right .widget{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin-bottom:16px}
.cat-right .widget.banner img{width:100%;display:block;border-radius:10px}
.w-title{font-size:16px;color:#0f172a;margin-bottom:10px;border-left:4px solid #004aad;padding-left:8px}
.featured-list{display:grid;gap:10px}
.featured-item{display:grid;grid-template-columns:100px 1fr;gap:10px;text-decoration:none;border:1px solid #eef2f7;border-radius:10px;padding:8px}
.featured-item img{width:100%;height:70px;object-fit:cover;border-radius:8px}
.fi-title{font-size:14px;color:#111827;margin-bottom:6px}
.fi-meta{font-size:13px;color:#475569}
.news-list{display:grid;gap:10px}
.news-item{display:grid;grid-template-columns:90px 1fr;gap:10px;text-decoration:none;color:#111827}
.news-item img{width:100%;height:64px;object-fit:cover;border-radius:8px}
.news-item span{align-self:center}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin:18px 0 8px}
.pagination .page{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#111827;text-decoration:none}
.pagination .page:hover{background:#f3f4f6}
.pagination .active{background:#0044cc;border-color:#0044cc;color:#fff}

/* ============ Responsive ============ */
@media (max-width: 1024px){
  .filters-form .row{grid-template-columns:repeat(3,1fr) auto}
  .cat-grid{grid-template-columns:1fr 320px}
  .listing-card{grid-template-columns:220px 1fr}
}
@media (max-width: 768px){
  .cat-head{flex-direction:column;align-items:flex-start;gap:6px}
  .filters-form .row{grid-template-columns:1fr 1fr;gap:10px}
  .col-search{grid-column: 1 / -1}
  .cat-grid{grid-template-columns:1fr}
  .listing-card{grid-template-columns:130px 1fr}
  .listing-card .thumb{height:110px}
}
@media (max-width: 480px){
  .filters-form .row{grid-template-columns:1fr}
  .listing-card{grid-template-columns:1fr}
  .listing-card .thumb{height:180px}
}

/* ===== CATEGORY filters -> match HOME search box on mobile ===== */
@media (max-width: 768px){

  /* Khung ngoài: giống .search-form-overlay của Home */
  .cat-filters .filters-form{
    width: calc(100% - 24px) !important;   /* 12px mỗi bên */
    max-width: 680px;
    margin: 12px auto 18px !important;
    padding: 14px !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 16px 28px rgba(17,24,39,.12);
  }

  /* Lưới xếp dọc, khoảng cách đều */
  .cat-filters .filters-form .row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch;
  }

  /* Ẩn label cho giống Home (vẫn giữ trong DOM để hỗ trợ screen reader) */
  .cat-filters .filters-form label{
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* Select style: giống ô nhập trên Home */
  .cat-filters .filters-form select{
    width: 100% !important;
    height: 54px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    background: #fff;
    border: 1px solid #dfe3eb !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;
    appearance: none;                 /* iOS/Android */
    -webkit-appearance: none;
  }

  /* Nút tìm kiếm: full width + gradient như Home */
  .cat-filters .filters-form .btn-search{
    width: 100% !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #0044cc, #0056d6) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(0,68,204,.25);
    cursor: pointer;
  }
  .cat-filters .filters-form .btn-search:hover{ filter: brightness(.98); }
  .cat-filters .filters-form .btn-search:active{ transform: translateY(0); box-shadow:none; }

  /* Đảm bảo nút nằm cuối hàng, full width */
  .cat-filters .filters-form .col-search{ grid-column: 1 / -1 !important; }

  /* Cân padding tổng thể trang cho đẹp */
  .cat-page{ padding-left: 0; padding-right: 0; }
}

/* (Tuỳ chọn) Làm khung lọc dính đầu khi cuộn – giống khối nổi */
@media (max-width: 768px){
  .cat-filters{ position: relative; z-index: 20; }
  /* Nếu muốn sticky thật sự:
     .cat-filters{ position: sticky; top: 56px; } 
     -> chỉnh top theo chiều cao navbar của bạn */
}


/* ===== DETAIL PAGE ===== */
.container{max-width:1200px;margin:0 auto;padding:0 16px;}
.dp-breadcrumb{margin:12px 0 8px;color:#6b7280;font-size:14px}
.dp-breadcrumb a{color:#2563eb;text-decoration:none}
.dp-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media(max-width:1024px){.dp-grid{grid-template-columns:1fr}}

.dp-gallery{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.dp-gallery-main{position:relative;overflow:hidden;border-radius:10px}
.dp-gallery-main img{width:100%;display:block;object-fit:cover}
.dp-counter{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;border-radius:16px;padding:4px 8px;font-size:12px}
.dp-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.dp-thumb{border:2px solid transparent;border-radius:8px;padding:0;background:#fff;cursor:pointer}
.dp-thumb.active{border-color:#2563eb}
.dp-thumb img{width:90px;height:64px;object-fit:cover;border-radius:6px;display:block}

.dp-title{font-size:22px;margin:14px 0}
.dp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.q-item{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:12px}
.q-label{font-size:12px;color:#6b7280}
.q-val{font-weight:700;color:#111827;margin-top:4px}
@media(max-width:640px){.dp-quick{grid-template-columns:1fr}}

.dp-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:14px 0}
.dp-section h2{font-size:18px;margin-bottom:10px;color:#0f172a;border-left:4px solid #004aad;padding-left:8px}
.dp-list{margin-left:16px}
.dp-list li{margin:6px 0;line-height:1.6}

.dp-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:768px){.dp-two-col{grid-template-columns:1fr}}
.dp-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.dp-card h3{font-size:16px;margin-bottom:10px}
.dp-spec{list-style:none;margin:0;padding:0}
.dp-spec li{display:flex;justify-content:space-between;border-bottom:1px dashed #eee;padding:8px 0;font-size:14px}
.dp-spec li span{color:#6b7280}

.dp-project{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-top:14px}
.dp-project img{width:100%;border-radius:10px}
.dp-project .btn-line{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid #0044cc;border-radius:8px;color:#0044cc;text-decoration:none}

.dp-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rp-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.rp-card img{width:100%;height:120px;object-fit:cover}
.rp-title{padding:10px;font-weight:600}
@media(max-width:768px){.dp-related{grid-template-columns:1fr 1fr}}

.dp-agents{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px}
.ag-card{flex:0 0 auto;text-align:center}
.ag-card img{width:140px;height:140px;border-radius:14px;object-fit:cover}

.dp-right .dp-agent-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.dp-right .avt{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block}
.dp-right .name{font-weight:700}
.dp-right .online{color:#6b7280;font-size:13px;margin-bottom:10px}
.btn-block{display:block;background:#0b5ed7;color:#fff;text-decoration:none;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.btn-ghost{display:block;border:1px solid #0b5ed7;color:#0b5ed7;text-decoration:none;border-radius:10px;padding:10px 12px}
.dp-widget{margin-top:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.w-title{font-size:16px;margin-bottom:10px}
.w-list{display:flex;flex-direction:column;gap:10px}
.w-item{display:flex;gap:10px;text-decoration:none;color:#111827}
.w-item img{width:86px;height:64px;object-fit:cover;border-radius:8px}
.wi-title{font-weight:600}
.wi-price{color:#e11d48;font-weight:700}

/* ===== DETAIL PAGE (scoped) ===== */
.detail-page .dp-container{max-width:1200px;margin:0 auto;padding:0 16px}

/* breadcrumb */
.detail-page .dp-breadcrumb{margin:12px 0 8px;color:#6b7280;font-size:14px}
.detail-page .dp-breadcrumb a{color:#2563eb;text-decoration:none}

/* grid */
.detail-page .dp-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media(max-width:1024px){.detail-page .dp-grid{grid-template-columns:1fr}}

/* gallery */
.detail-page .dp-gallery{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.detail-page .dp-gallery-main{position:relative;overflow:hidden;border-radius:10px}
.detail-page .dp-gallery-main img{width:100%;display:block;object-fit:cover}
.detail-page .dp-counter{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;border-radius:16px;padding:4px 8px;font-size:12px}
.detail-page .dp-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.detail-page .dp-thumb{border:2px solid transparent;border-radius:8px;padding:0;background:#fff;cursor:pointer;flex:0 0 auto}
.detail-page .dp-thumb.active{border-color:#2563eb}
.detail-page .dp-thumb img{width:90px;height:64px;object-fit:cover;border-radius:6px;display:block}

/* title + quick facts */
.detail-page .dp-title{font-size:22px;margin:14px 0}
.detail-page .dp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.detail-page .q-item{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:12px}
.detail-page .q-label{font-size:12px;color:#6b7280}
.detail-page .q-val{font-weight:700;color:#111827;margin-top:4px}
@media(max-width:640px){.detail-page .dp-quick{grid-template-columns:1fr}}

/* sections */
.detail-page .dp-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:14px 0}
.detail-page .dp-section h2{font-size:18px;margin-bottom:10px;color:#0f172a;border-left:4px solid #004aad;padding-left:8px}
.detail-page .dp-list{margin-left:16px}
.detail-page .dp-list li{margin:6px 0;line-height:1.6}

/* 2 columns card */
.detail-page .dp-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:768px){.detail-page .dp-two-col{grid-template-columns:1fr}}
.detail-page .dp-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.detail-page .dp-card h3{font-size:16px;margin-bottom:10px}
.detail-page .dp-spec{list-style:none;margin:0;padding:0}
.detail-page .dp-spec li{display:flex;justify-content:space-between;border-bottom:1px dashed #eee;padding:8px 0;font-size:14px;gap:12px}
.detail-page .dp-spec li span{color:#6b7280}

/* project box */
.detail-page .dp-project{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-top:14px}
.detail-page .dp-project img{width:100%;border-radius:10px}
.detail-page .dp-project .btn-line{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid #0044cc;border-radius:8px;color:#0044cc;text-decoration:none}

/* related */
.detail-page .dp-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.detail-page .rp-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.detail-page .rp-card img{width:100%;height:120px;object-fit:cover}
.detail-page .rp-title{padding:10px;font-weight:600}
@media(max-width:768px){.detail-page .dp-related{grid-template-columns:1fr 1fr}}

/* agents */
.detail-page .dp-agents{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.detail-page .ag-card{flex:0 0 auto;text-align:center}
.detail-page .ag-card img{width:140px;height:140px;border-radius:14px;object-fit:cover}

/* sidebar */
.detail-page .dp-right .dp-agent-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.detail-page .dp-right .avt{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block}
.detail-page .dp-right .name{font-weight:700}
.detail-page .dp-right .online{color:#6b7280;font-size:13px;margin-bottom:10px}
.detail-page .btn-block{display:block;background:#0b5ed7;color:#fff;text-decoration:none;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.detail-page .btn-ghost{display:block;border:1px solid #0b5ed7;color:#0b5ed7;text-decoration:none;border-radius:10px;padding:10px 12px}
.detail-page .dp-widget{margin-top:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.detail-page .w-title{font-size:16px;margin-bottom:10px}
.detail-page .w-list{display:flex;flex-direction:column;gap:10px}
.detail-page .w-item{display:flex;gap:10px;text-decoration:none;color:#111827}
.detail-page .w-item img{width:86px;height:64px;object-fit:cover;border-radius:8px}
.detail-page .wi-title{font-weight:600}
.detail-page .wi-price{color:#e11d48;font-weight:700}

/* =================== SHOW PAGE – MOBILE-FIRST (SCOPED) =================== */
.detail-page img{max-width:100%;height:auto}

/* Container & grid (mobile mặc định) */
.detail-page .dp-container{max-width:1200px;margin:0 auto;padding:0 14px}
.detail-page .dp-grid{display:grid;grid-template-columns:1fr;gap:18px}

/* Breadcrumb */
.detail-page .dp-breadcrumb{margin:10px 0 6px;font-size:14px;color:#6b7280}
.detail-page .dp-breadcrumb a{color:#2563eb;text-decoration:none}

/* Gallery */
.detail-page .dp-gallery{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:10px;box-shadow:0 3px 10px rgba(0,0,0,.04)}
.detail-page .dp-gallery-main{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10} /* luôn cân ảnh */
.detail-page .dp-gallery-main img{width:100%;height:100%;object-fit:cover}
.detail-page .dp-counter{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;border-radius:16px;padding:3px 8px}
.detail-page .dp-thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.detail-page .dp-thumbs::-webkit-scrollbar{display:none}
.detail-page .dp-thumb{flex:0 0 auto;border:2px solid transparent;border-radius:10px;background:#fff;padding:0;cursor:pointer}
.detail-page .dp-thumb.active{border-color:#2563eb}
.detail-page .dp-thumb img{display:block;width:86px;height:60px;object-fit:cover;border-radius:8px}

/* Title + quick facts */
.detail-page .dp-title{font-size:20px;line-height:1.35;margin:12px 2px 8px}
.detail-page .dp-quick{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:6px}
.detail-page .q-item{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.detail-page .q-label{font-size:12px;color:#6b7280}
.detail-page .q-val{font-weight:700;color:#111827;margin-top:2px}

/* Sections */
.detail-page .dp-section{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin:12px 0}
.detail-page .dp-section h2{font-size:17px;border-left:4px solid #004aad;padding-left:8px;margin:0 0 8px}
.detail-page .dp-list{margin:0 0 0 16px}
.detail-page .dp-list li{margin:6px 0;line-height:1.55;font-size:15px}

/* Spec cards */
.detail-page .dp-two-col{display:grid;grid-template-columns:1fr;gap:12px}
.detail-page .dp-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px}
.detail-page .dp-card h3{font-size:16px;margin:0 0 8px}
.detail-page .dp-spec{list-style:none;margin:0;padding:0}
.detail-page .dp-spec li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #eee;font-size:15px}
.detail-page .dp-spec li:last-child{border-bottom:none}
.detail-page .dp-spec li span{color:#6b7280}

/* Project block */
.detail-page .dp-project{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px}
.detail-page .dp-project img{width:100%;border-radius:12px;aspect-ratio:16/9;object-fit:cover}
.detail-page .dp-project .btn-line{display:inline-block;margin-top:8px;padding:10px 14px;border:1px solid #0044cc;border-radius:10px;color:#0044cc;text-decoration:none}

/* Related projects */
.detail-page .dp-related{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-page .rp-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.detail-page .rp-card img{width:100%;height:110px;object-fit:cover}
.detail-page .rp-title{padding:8px 10px;font-weight:600;font-size:14px}
@media (max-width:360px){.detail-page .dp-related{grid-template-columns:1fr}} /* rất nhỏ -> 1 cột */

/* Agents */
.detail-page .dp-agents{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.detail-page .ag-card{flex:0 0 auto;text-align:center}
.detail-page .ag-card img{width:118px;height:118px;border-radius:12px;object-fit:cover}
.detail-page .ag-card p{font-size:14px;margin:6px 0 0}

/* Sidebar (xuống dưới ở mobile) */
.detail-page .dp-right .dp-agent-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.04)}
.detail-page .dp-right .avt{width:84px;height:84px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block}
.detail-page .dp-right .name{font-weight:700}
.detail-page .dp-right .online{color:#6b7280;font-size:13px;margin-bottom:10px}
.detail-page .btn-block{display:block;background:#0b5ed7;color:#fff;text-decoration:none;border-radius:12px;height:48px;line-height:48px;padding:0 14px;margin-bottom:8px;font-weight:700}
.detail-page .btn-ghost{display:block;border:1px solid #0b5ed7;color:#0b5ed7;text-decoration:none;border-radius:12px;height:48px;line-height:48px;padding:0 14px}
.detail-page .dp-widget{margin-top:14px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px}
.detail-page .w-title{font-size:16px;margin-bottom:10px}
.detail-page .w-list{display:flex;flex-direction:column;gap:10px}
.detail-page .w-item{display:flex;gap:10px;align-items:center;text-decoration:none;color:#111827}
.detail-page .w-item img{width:92px;height:68px;object-fit:cover;border-radius:10px}
.detail-page .wi-title{font-weight:600;font-size:14px}
.detail-page .wi-price{color:#e11d48;font-weight:700}

/* =================== UP FROM 768PX (tablet/desktop) =================== */
@media (min-width: 768px){
  .detail-page .dp-container{padding:0 16px}
  .detail-page .dp-grid{grid-template-columns:2fr 1fr;gap:24px}
  .detail-page .dp-title{font-size:22px}
  .detail-page .dp-quick{grid-template-columns:repeat(3,1fr)}
  .detail-page .dp-project{grid-template-columns:220px 1fr}
  .detail-page .dp-related{grid-template-columns:repeat(3,1fr)}
  .detail-page .ag-card img{width:140px;height:140px;border-radius:14px}
  .detail-page .w-item img{width:86px;height:64px}
}

/* ====== MOBILE HOTFIX for SHOW PAGE (scoped) ====== */
.detail-page *, .detail-page *::before, .detail-page *::after { box-sizing: border-box; }
.detail-page img { max-width: 100%; height: auto; display: block; }

/* Breadcrumb & title nhỏ gọn, tránh vỡ dòng dài */
.detail-page .dp-breadcrumb{ margin:10px 0 6px; font-size:14px; color:#6b7280; }
.detail-page .dp-title{ font-size:20px; line-height:1.35; margin:12px 2px 8px; word-break: break-word; }

/* ---- Gallery: khóa tỉ lệ + reset button iOS ---- */
.detail-page .dp-gallery{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:10px; box-shadow:0 3px 10px rgba(0,0,0,.04) }

/* Fallback cho Safari: giữ tỉ lệ 16:10 bằng ::before */
.detail-page .dp-gallery-main{ position:relative; border-radius:12px; overflow:hidden; }
.detail-page .dp-gallery-main::before{ content:""; display:block; padding-top:62.5%; } /* 16/10 = 62.5% */
.detail-page .dp-gallery-main > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

/* Counter nổi */
.detail-page .dp-counter{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px;
  border-radius:16px; padding:3px 8px;
}

/* Thumbnails: cuộn ngang, không xuống hàng */
.detail-page .dp-thumbs{
  display:flex; gap:10px; margin-top:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.detail-page .dp-thumbs::-webkit-scrollbar{ display:none; }

/* Reset style mặc định của button trên iOS/Safari */
.detail-page .dp-thumb{
  -webkit-appearance:none; appearance:none;
  border:2px solid transparent; background:#fff; padding:0;
  border-radius:10px; cursor:pointer; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.detail-page .dp-thumb:focus{ outline:none; }
.detail-page .dp-thumb.active{ border-color:#2563eb; }

/* Kích thước thumbnail đồng nhất */
.detail-page .dp-thumb img{
  width:92px; height:64px; object-fit:cover; border-radius:8px;
}

/* ---- Quick facts & cards gọn cho mobile ---- */
.detail-page .dp-quick{ display:grid; grid-template-columns:1fr; gap:10px; margin:8px 0 6px; }
.detail-page .q-item{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.detail-page .q-label{ font-size:12px; color:#6b7280; }
.detail-page .q-val{ font-weight:700; color:#111827; margin-top:2px; }

/* Sections, spec list */
.detail-page .dp-section{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; margin:12px 0; }
.detail-page .dp-section h2{ font-size:17px; border-left:4px solid #004aad; padding-left:8px; margin:0 0 8px; }
.detail-page .dp-two-col{ display:grid; grid-template-columns:1fr; gap:12px; }
.detail-page .dp-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; }
.detail-page .dp-spec{ list-style:none; margin:0; padding:0; }
.detail-page .dp-spec li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed #eee; font-size:15px; }
.detail-page .dp-spec li:last-child{ border-bottom:none; }
.detail-page .dp-spec li span{ color:#6b7280; }

/* Related */
.detail-page .dp-related{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:360px){ .detail-page .dp-related{ grid-template-columns:1fr; } }

/* Sidebar dưới mobile */
.detail-page .dp-right .dp-agent-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.04); }
.detail-page .dp-right .avt{ width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto 8px; display:block; }
.detail-page .btn-block, .detail-page .btn-ghost{
  height:48px; line-height:48px; padding:0 14px; border-radius:12px; font-weight:700; display:block;
}
.detail-page .btn-block{ background:#0b5ed7; color:#fff; text-decoration:none; }
.detail-page .btn-ghost{ border:1px solid #0b5ed7; color:#0b5ed7; text-decoration:none; }

/* Tablet/desktop nâng cấp bố cục */
@media (min-width:768px){
  .detail-page .dp-grid{ grid-template-columns:2fr 1fr; gap:24px; }
  .detail-page .dp-related{ grid-template-columns:repeat(3,1fr); }
}

/* ===================== NEWS PAGE (scoped) ===================== */
.news-page img{max-width:100%;height:auto;display:block}
.news-page .np-container{max-width:1200px;margin:0 auto;padding:0 16px}

/* breadcrumb */
.news-page .np-breadcrumb{margin:12px 0 8px;font-size:14px;color:#6b7280}
.news-page .np-breadcrumb a{color:#2563eb;text-decoration:none}

/* HERO */
.news-page .np-hero{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:18px}
.news-page .hero-left{position:relative;border-radius:14px;overflow:hidden;display:block}
.news-page .hero-left img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.news-page .hero-left__caption{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
.news-page .hero-left__caption h1{color:#fff;font-size:22px;margin:0 0 6px}
.news-page .hero-left__caption .meta{color:#e5e7eb;font-size:13px}

.news-page .hero-right{background:#0a4fab;border-radius:12px;color:#fff;padding:14px}
.news-page .hero-right h3{font-size:16px;margin:0 0 10px}
.news-page .hot-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.news-page .hot-list li a{color:#fff;text-decoration:none;font-weight:600;display:block}
.news-page .hot-list .time{display:block;color:#e3e8ff;font-size:12px;margin-top:2px}

/* GRID */
.news-page .np-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}

/* Toolbar (dropdown) */
.news-page .np-toolbar{margin-bottom:10px}
.news-page .dropdown{position:relative;display:inline-block}
.news-page .dropbtn{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px;font-weight:600}
.news-page .dropdown-content{display:none;position:absolute;z-index:10;background:#fff;border:1px solid #e5e7eb;border-radius:10px;min-width:220px;padding:8px;margin-top:6px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.news-page .dropdown-content a{display:block;padding:8px 10px;color:#111827;text-decoration:none;border-radius:8px}
.news-page .dropdown-content a:hover{background:#f3f4f6}
.news-page .dropdown:hover .dropdown-content{display:block}

/* LIST */
.news-page .news-item{display:grid;grid-template-columns:220px 1fr;gap:14px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;margin-bottom:12px}
.news-page .news-item .thumb img{width:100%;height:140px;object-fit:cover;border-radius:10px}
.news-page .news-item .title{font-size:18px;margin:0 0 6px}
.news-page .news-item .title a{color:#111827;text-decoration:none}
.news-page .news-item .time{font-size:12px;color:#6b7280;margin-bottom:6px}
.news-page .news-item .excerpt{color:#374151}

/* SIDEBAR */
.news-page .np-widget{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px}
.news-page .w-title{font-size:16px;margin-bottom:10px}
.news-page .w-list{display:flex;flex-direction:column;gap:10px}
.news-page .w-item{display:flex;gap:10px;text-decoration:none;color:#111827}
.news-page .w-item img{width:96px;height:70px;object-fit:cover;border-radius:10px}
.news-page .wi-title{font-weight:600}
.news-page .wi-time{font-size:12px;color:#6b7280}

/* Load more */
.news-page .np-loadmore{text-align:center;margin:16px 0 24px}
.news-page .btn-more{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid #0044cc;color:#0044cc;text-decoration:none;font-weight:700}

/* MOBILE */
@media (max-width: 992px){
  .news-page .np-hero{grid-template-columns:1fr;gap:12px}
  .news-page .np-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .news-page .np-container{padding:0 12px}
  .news-page .hero-left__caption h1{font-size:18px}
  .news-page .news-item{grid-template-columns:1fr;gap:10px}
  .news-page .news-item .thumb img{height:180px}
}

/* ===== NEWS PAGE (tin tức) ===== */
.news-page{max-width:1200px;margin:0 auto;padding:20px}
.news-hero{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px}
.news-hero .left{position:relative;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.news-hero .left img{width:100%;height:340px;object-fit:cover;display:block}
.news-hero .left h2{font-size:22px;line-height:1.4;padding:14px 16px 4px 16px;color:#0d2e68}
.news-hero .left .time{display:block;color:#667; font-size:13px;padding:0 16px 16px 16px}

.news-hero .right{background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:12px}
.news-hero .right ul{list-style:none;margin:0;padding:0}
.news-hero .right li{border-bottom:1px solid #eef2f7}
.news-hero .right li:last-child{border-bottom:0}
.news-hero .right a{display:block;padding:12px 10px;font-weight:600;color:#0d2e68;text-decoration:none}
.news-hero .right a:hover{color:#1b56d6}

.news-list{display:flex;flex-direction:column;gap:16px}
.news-item{display:grid;grid-template-columns:220px 1fr;gap:16px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06);overflow:hidden}
.news-item img{width:100%;height:150px;object-fit:cover;display:block}
.news-item .info{padding:14px 16px}
.news-item .info h3{margin:0 0 6px}
.news-item .info h3 a{color:#0d2e68;text-decoration:none}
.news-item .info h3 a:hover{text-decoration:underline}
.news-item .time{display:inline-block;font-size:12px;color:#667;margin-bottom:8px}
.news-item p{margin:0;color:#334;line-height:1.6}

/* Sidebar “bài viết nổi bật” nếu có dùng trong view khác */
.hot-sidebar{background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:12px}
.hot-sidebar .w-title{font-size:16px;color:#0d2e68;margin:6px 0 10px 0}
.hot-sidebar .item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #eef2f7}
.hot-sidebar .item:last-child{border-bottom:0}
.hot-sidebar img{width:72px;height:56px;object-fit:cover;border-radius:8px}
.hot-sidebar .title{font-weight:600;color:#0d2e68;line-height:1.4}

/* Mobile */
@media (max-width: 768px){
  .news-page{padding:16px}
  .news-hero{grid-template-columns:1fr}
  .news-hero .left img{height:220px}
  .news-item{grid-template-columns:1fr}
  .news-item img{height:200px}
}


/* ==== TIN TỨC PAGE ==== */
.news-page{max-width:1200px;margin:0 auto;padding:20px}

.news-hero{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:30px}
.news-hero .left{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.news-hero .left img{width:100%;height:340px;object-fit:cover}
.news-hero .left h2{font-size:22px;line-height:1.4;padding:12px 16px;color:#0d2e68}
.news-hero .left .time{display:block;font-size:13px;color:#777;padding:0 16px 16px}

.news-hero .right{background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.news-hero .side-title{font-size:16px;color:#0d2e68;margin-bottom:10px}
.news-hero .right ul{list-style:none;margin:0;padding:0}
.news-hero .right li{border-bottom:1px solid #eef2f7}
.news-hero .right li:last-child{border:0}
.news-hero .right a{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;font-size:14px;color:#333;text-decoration:none}
.news-hero .right a:hover{color:#1b56d6}
.news-hero .right .time{font-size:12px;color:#888;margin-left:12px}
.news-hero .right .dot{width:6px;height:6px;background:#1b56d6;border-radius:50%;display:inline-block;margin-right:8px}

.news-list{display:flex;flex-direction:column;gap:18px;margin-bottom:30px}
.news-item{display:grid;grid-template-columns:220px 1fr;gap:16px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.news-item img{width:100%;height:150px;object-fit:cover}
.news-item .info{padding:12px 14px}
.news-item .info h3{margin:0 0 6px}
.news-item .info h3 a{color:#0d2e68;text-decoration:none}
.news-item .info h3 a:hover{text-decoration:underline}
.news-item .time{font-size:12px;color:#777;margin-bottom:6px;display:block}
.news-item p{margin:0;font-size:14px;color:#444;line-height:1.5}

.hot-sidebar{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.hot-sidebar .w-title{font-size:18px;font-weight:600;color:#0d2e68;margin-bottom:12px}
.hot-sidebar .item{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.hot-sidebar .item:last-child{margin-bottom:0}
.hot-sidebar img{width:72px;height:56px;object-fit:cover;border-radius:8px}
.hot-sidebar .title{font-weight:600;color:#333;display:block;margin-bottom:4px}
.hot-sidebar .title:hover{color:#1b56d6}
.hot-sidebar .time{font-size:12px;color:#888}

/* Responsive */
@media (max-width:768px){
  .news-hero{grid-template-columns:1fr}
  .news-hero .left img{height:220px}
  .news-item{grid-template-columns:1fr}
  .news-item img{height:200px}
}

/* ===== FIX: 2 khối trong .dp-two-col full width trên mobile ===== */
@media (max-width: 768px){
  .detail-page .dp-two-col{
    display: grid;
    grid-template-columns: 1fr;   /* 1 cột */
    gap: 12px;
    margin: 16px 0;
  }
  /* Ép mỗi card chiếm 100%, bỏ mọi margin ngang vô tình còn sót */
  .detail-page .dp-two-col .dp-card{
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Đồng bộ viền/bo góc với "Thông tin mô tả" cho đẹp */
  .detail-page .dp-two-col .dp-card,
  .detail-page .dp-section {
    border-radius: 12px;
  }

  /* Phòng trường hợp left column đặt min/max-width ở nơi khác */
  .detail-page .dp-left{ min-width: 0; }
}

/* === FIX: 2 card trong .dp-two-col full-bleed như "Thông tin mô tả" trên mobile === */
@media (max-width: 768px){
  /* 1 cột, bỏ padding thừa nếu có */
  .detail-page .dp-two-col{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 !important;
    margin: 16px 0;
  }

  /* Phá mọi giới hạn chiều ngang do theme cũ đặt (max-width, margin:auto...) */
  .detail-page .dp-two-col .dp-card{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    border-radius: 12px; /* cho đồng bộ với khối mô tả */
  }

  /* Phòng khi container/left có min/max-width lạ */
  .detail-page .dp-left{ min-width: 0; }
}

/* ===== News Article (detail) ===== */
.news-article{background:#fff}
.news-article .na-wrap{max-width:1200px;margin:0 auto;padding:16px}
.na-breadcrumb{color:#667; margin:6px 0 16px}
.na-breadcrumb a{color:#0a53c1;text-decoration:none}
.na-breadcrumb strong{color:#333}

.na-grid{display:grid;grid-template-columns:2fr 360px;gap:24px}
.na-title{font-size:26px;line-height:1.35;font-weight:800;margin:4px 0 8px}
.na-meta{color:#666;margin-bottom:14px}
.na-meta .dot{margin:0 8px}

.na-hero{margin:12px 0 8px}
.na-hero img{width:100%;border-radius:12px;display:block}
.na-hero figcaption{color:#7b7b7b;font-size:13px;margin-top:6px}

.na-body{display:grid;grid-template-columns:1fr 280px;gap:24px;margin-top:18px}
.na-content{min-width:0}
.na-section{background:#fff;border:1px solid #e9eef5;border-radius:10px;padding:18px;margin-bottom:16px}
.na-h2{font-size:18px;margin:0 0 10px;padding:10px 12px;border-left:6px solid #0a53c1;background:#f6f9ff;border-radius:6px}

.na-toc{background:#f8fafc;border:1px solid #e8eef5;border-radius:10px;padding:14px;height:fit-content}
.na-toc .toc-title{font-weight:700;margin-bottom:8px}
.na-toc ol{margin:0;padding-left:20px}
.na-toc a{text-decoration:none;color:#0a53c1}
.na-toc .toc-banner{width:100%;border-radius:8px;margin-top:12px}

.na-related{margin-top:22px}
.na-rel-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:14px}
.na-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-card{border:1px solid #eceff5;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:#222;display:block}
.rel-card img{width:100%;height:160px;object-fit:cover;display:block}
.rel-info{padding:10px 12px}
.rel-title{font-weight:700}

/* Right column */
.na-right .na-sticky{position:sticky;top:88px}
.na-right .side-banner{width:100%;border-radius:12px;display:block}

/* Responsive */
@media (max-width: 1024px){
  .na-grid{grid-template-columns:1fr}
  .na-body{grid-template-columns:1fr}
  .na-right{display:none}
}
@media (max-width: 640px){
  .na-wrap{padding:12px}
  .na-title{font-size:22px}
  .na-rel-grid{grid-template-columns:1fr 1fr}
  .rel-card img{height:120px}
}