/* =========================================================
   KP FOOTER - FINAL CLEAN
   ========================================================= */

.kp-footer{
  display:block !important;
  width:100% !important;
  background:#06285e !important;
  color:#fff !important;
  margin-top:45px !important;
  box-sizing:border-box !important;
}

.kp-footer *,
.kp-footer *::before,
.kp-footer *::after{
  box-sizing:border-box;
}

/* =========================
   GRID
   ========================= */

.kp-footer__grid{
  width:100%;
  max-width:1400px;
  margin:0 auto;

  display:grid !important;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  column-gap:90px;
  row-gap:30px;
  padding:42px 40px;
  box-sizing:border-box;
}

/* =========================
   BRAND
   ========================= */

.kp-footer__brand{
  display:block;
}

.kp-footer__brand img{
  width:145px;
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
  opacity:.96;
}

.kp-footer p{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.7;
  color:#dce7f7;
}

/* =========================
   TITLE
   ========================= */

.kp-footer h4{
  margin:4px 0 14px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.8px;
}

/* =========================
   GENERAL LINK
   ========================= */

.kp-footer a{
  text-decoration:none;
}

.kp-footer .kp-footer-link{
  display:flex;
  align-items:center;
  width:max-content;
  gap:10px;
  margin:9px 0;
  color:#dce7f7;
  font-size:12px;
}

/* =========================
   MENU ICON
   ========================= */

.kp-footer .kp-link-icon{
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#f2b72b;
  flex:0 0 22px;
}

.kp-footer .kp-link-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* =========================
   CONTACT
   ========================= */

.kp-footer__contact{
  display:block;
}

.kp-footer__contact .kp-contact-row{
  display:flex !important;
  align-items:center !important;
  width:max-content;
  gap:10px;
  min-height:28px;
  margin:6px 0;
  color:#dce7f7;
  font-size:12px;
  text-decoration:none;
}

/* =========================
   PHONE
   ========================= */

.kp-footer .kp-phone-new-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#f2b72b !important;
  font-family:Arial,sans-serif !important;
  font-size:19px !important;
  font-weight:700 !important;
  line-height:22px !important;
  flex:0 0 22px !important;
  box-sizing:border-box !important;
}

/* =========================
   ZALO
   ========================= */

.kp-footer .kp-contact-icon.kp-zalo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-width:24px;
  max-width:24px;
  margin:0;
  padding:0;
  border-radius:50%;
  background:#1264d7;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1;
  flex:0 0 24px;
}

/* =========================
   PRICE
   ========================= */

.kp-footer .kp-contact-icon.kp-price{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-width:24px;
  max-width:24px;
  margin:0;
  padding:0;
  border-radius:50%;
  background:#e6a514;
  color:#fff;
  flex:0 0 24px;
}

.kp-footer .kp-contact-icon.kp-price svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* =========================
   BOTTOM
   ========================= */

.kp-footer__bottom{
  display:block;
  width:100%;
  margin:0;
  padding:12px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.18);
  color:#b8c8df;
  font-size:11px;
  box-sizing:border-box;
}

/* =========================================================
   KP CARD - ẢNH CAO ĐỒNG ĐỀU
   ========================================================= */

#nha-ban .kp-card .kp-card__img{
  height:220px !important;
  min-height:220px !important;
  max-height:220px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

#nha-ban .kp-card .kp-card__img img{
  display:block !important;
  width:100% !important;
  height:220px !important;
  min-height:220px !important;
  max-height:220px !important;
  object-fit:cover !important;
  margin:0 !important;
  padding:0 !important;
}

#nha-ban .kp-card .kp-card__body{
  margin-top:0 !important;
  padding-top:14px !important;
}

/* =========================================================
   KP PRODUCTS - CÂN KHOẢNG TRẮNG
   ========================================================= */

#nha-ban.kp-products{
  padding-bottom:45px !important;
}

#nha-ban.kp-products .kp-products-more{
  margin-top:18px !important;
  margin-bottom:0 !important;
}

/* =========================================================
   KP HERO - ẢNH NỀN FULL CHIỀU NGANG
   Lưu ý: chỉ tác động nếu Hero dùng class .kp-hero
   ========================================================= */

.kp-hero{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* =========================================================
   KP HERO - FULL NỀN NHƯNG KHÔNG CẮT NỘI DUNG
   ========================================================= */

.kp-hero{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

.kp-hero > .container{
  width:100% !important;
  max-width:1400px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Không để nội dung Hero bị ép/cắt */
.kp-hero img{
  max-width:100%;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:750px){
  .kp-footer__grid{
    grid-template-columns:1fr 1fr !important;
    gap:25px;
    padding:35px 20px;
  }

  .kp-footer__brand{
    grid-column:1 / -1;
  }
}

@media(max-width:480px){
  .kp-footer__grid{
    grid-template-columns:1fr !important;
  }

  .kp-footer__brand{
    grid-column:auto;
  }
}
/* =========================================================
   KP MOBILE - GIAO DIỆN THEO MẪU HÌNH SỐ 2
   CHỈ ÁP DỤNG MOBILE
   ========================================================= */

@media (max-width:750px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }


  /* =========================
     HEADER
     ========================= */

  .kp-header,
  header{
    width:100% !important;
  }

  .kp-header .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }


  /* =========================
     HERO
     ========================= */

  .kp-hero{
    width:100% !important;
    min-height:auto !important;
    overflow:hidden !important;
  }

  .kp-hero .container{
    width:100% !important;
    padding:0 !important;
  }

  .kp-hero__content{
    width:100% !important;
    max-width:100% !important;
    padding:28px 20px !important;
    margin:0 !important;
  }

  .kp-hero__image,
  .kp-hero img{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }


  /* =========================
     KHỐI THÔNG TIN HERO
     ========================= */

  .kp-hero__features{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:5px !important;
    margin-top:18px !important;
  }

  .kp-hero__feature{
    min-width:0 !important;
    padding:10px 5px !important;
    text-align:center !important;
  }


  /* =========================
     THỐNG KÊ
     ========================= */

  .kp-hero__stats{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    margin-top:14px !important;
  }


  /* =========================
     NHÀ BÁN NỔI BẬT
     ========================= */

  #nha-ban.kp-products{
    width:100% !important;
    padding-top:28px !important;
    padding-bottom:55px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  #nha-ban.kp-products .kp-products-title{
    margin:0 0 20px !important;
    text-align:center !important;
  }

  #nha-ban.kp-products .kp-products-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin:0 !important;
  }


  /* =========================
     CARD
     ========================= */

  #nha-ban .kp-card{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:12px !important;
  }

  #nha-ban .kp-card .kp-card__img{
    width:100% !important;
    height:125px !important;
    min-height:125px !important;
    max-height:125px !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
  }

  #nha-ban .kp-card .kp-card__img img{
    display:block !important;
    width:100% !important;
    height:125px !important;
    min-height:125px !important;
    max-height:125px !important;
    object-fit:cover !important;
    margin:0 !important;
    padding:0 !important;
  }

  #nha-ban .kp-card .kp-card__body{
    padding:10px !important;
    margin:0 !important;
  }

  #nha-ban .kp-card h3,
  #nha-ban .kp-card .kp-card__title{
    font-size:13px !important;
    line-height:1.35 !important;
    margin:0 0 5px !important;
  }

  #nha-ban .kp-card p{
    font-size:10px !important;
    line-height:1.45 !important;
    margin:3px 0 !important;
  }

  #nha-ban .kp-card .kp-card__price{
    font-size:16px !important;
    margin-top:7px !important;
  }


  /* =========================
     NÚT XEM TẤT CẢ
     ========================= */

  #nha-ban .kp-products-more,
  #nha-ban .kp-products__more,
  #nha-ban .kp-products-cta{
    width:100% !important;
    margin:18px 0 0 !important;
    text-align:center !important;
  }

  #nha-ban .kp-products-more a,
  #nha-ban .kp-products__more a,
  #nha-ban .kp-products-cta a{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:13px 15px !important;
    box-sizing:border-box !important;
  }


  /* =========================
     FOOTER MOBILE
     ========================= */

  .kp-footer{
    width:100% !important;
    margin-top:0 !important;
  }

  .kp-footer__grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr 1fr !important;
    gap:25px 18px !important;
    padding:32px 20px !important;
  }

  .kp-footer__brand{
    grid-column:1 / -1 !important;
  }

  .kp-footer__brand img{
    width:115px !important;
  }


  /* =========================
     FLOATING BUTTONS
     ========================= */

  .kp-floating,
  .kp-float{
    z-index:9999 !important;
  }

  .kp-float{
    width:48px !important;
    height:48px !important;
  }

}


/* =========================================================
   ĐIỆN THOẠI NHỎ
   ========================================================= */

@media(max-width:480px){

  .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .kp-hero__content{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .kp-hero__features{
    gap:4px !important;
  }

  .kp-hero__feature{
    padding:8px 3px !important;
  }

  #nha-ban.kp-products{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #nha-ban.kp-products .kp-products-grid{
    gap:8px !important;
  }

  #nha-ban .kp-card .kp-card__img{
    height:110px !important;
    min-height:110px !important;
    max-height:110px !important;
  }

  #nha-ban .kp-card .kp-card__img img{
    height:110px !important;
    min-height:110px !important;
    max-height:110px !important;
  }

  #nha-ban .kp-card .kp-card__body{
    padding:9px !important;
  }

  #nha-ban .kp-card h3,
  #nha-ban .kp-card .kp-card__title{
    font-size:12px !important;
  }

  #nha-ban .kp-card p{
    font-size:9px !important;
  }

  #nha-ban .kp-card .kp-card__price{
    font-size:15px !important;
  }

}
/* =========================================================
   MOBILE HEADER - SỐ ĐIỆN THOẠI
   ========================================================= */

@media (max-width:750px){

  .kp-header::after{
    content:"099 661 6667\A Gọi / Zalo 24/7" !important;

    position:absolute !important;
    top:50% !important;
    right:54px !important;
    transform:translateY(-50%) !important;

    white-space:pre !important;
    text-align:left !important;

    color:#0066cc !important;

    font-family:Arial,Helvetica,sans-serif !important;

    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.25 !important;

    z-index:999 !important;
  }

}

@media (max-width:480px){

  .kp-header::after{
    right:50px !important;

    font-size:15px !important;
    line-height:1.25 !important;
  }

}
/* =========================================================
   MOBILE - HIỆN SỐ ĐT + ZALO CHO NÚT NỔI
   ========================================================= */

@media (max-width:750px){

  /* NÚT ĐIỆN THOẠI */
  .kp-floating .kp-float-phone{
    position:relative !important;
  }

  .kp-floating .kp-float-phone::before{
    content:"099 661 6667" !important;
    position:absolute !important;
    right:58px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    white-space:nowrap !important;
    background:#fff !important;
    color:#0666cc !important;
    padding:7px 11px !important;
    border-radius:16px !important;

    font-size:14px !important;
    font-weight:700 !important;

    box-shadow:0 2px 10px rgba(0,0,0,.18) !important;
    z-index:9999 !important;
  }


  /* NÚT ZALO */
  .kp-floating .kp-float-zalo{
    position:relative !important;
  }

  .kp-floating .kp-float-zalo::before{
    content:"Zalo" !important;
    position:absolute !important;
    right:58px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    white-space:nowrap !important;
    background:#fff !important;
    color:#1264d7 !important;
    padding:7px 12px !important;
    border-radius:16px !important;

    font-size:14px !important;
    font-weight:700 !important;

    box-shadow:0 2px 10px rgba(0,0,0,.18) !important;
    z-index:9999 !important;
  }

}

/* =========================================================
   KP FOOTER — NỀN XANH FULL MÀN HÌNH
   CHỈ KÉO NỀN RA 2 MÉP — GIỮ NGUYÊN NỘI DUNG BÊN TRONG
   ========================================================= */
.kp-footer{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box !important;
}