/* ==========================================================================
   enhance.css — lớp cải tiến UI/UX cho Bê Tông 24h (áp đè, không sửa CSS gốc)
   Áp dụng sau cùng để override. Giữ nguyên nội dung, chỉ chỉnh trình bày.
   ========================================================================== */

/* --- 1. FONT: gốc khai báo Open Sans/Playfair nhưng không load + không fallback
       -> rơi về Times (serif). Font đã được load qua <link>; thêm fallback an toàn. --- */
.slide__content--headings .top-title,
.slide__content--headings .content,
.slide__content--headings { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.home-quote__content,
.home-quote__hightline { font-family: "Playfair Display", Georgia, "Times New Roman", serif; }

/* --- 2. HERO: lớp phủ tối cho chữ trắng dễ đọc --- */
.banner__slider .slide__img { position: relative; }
.banner__slider .slide__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(14,19,24,.66) 0%, rgba(14,19,24,.34) 48%, rgba(14,19,24,.05) 100%);
}
.banner__slider .slide__content { z-index: 2; }
.slide__content--headings .top-title { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.slide__content--headings .content  { text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* --- 3. HEADER: nav đọc được khi đè hero + logo không mất khi header trắng --- */
#top-nav:not(.top-nav-scroll-black) {
  background: linear-gradient(180deg, rgba(12,17,22,.55) 0%, rgba(12,17,22,0) 100%) !important;
}
.top-nav:not(.top-nav-scroll-black) .logo,
.top-nav:not(.top-nav-scroll-black) .logo * { color: #fff; }
/* header đã cuộn: giữ nguyên logo màu gốc (không làm đen/trắng) */

/* --- 4. KHỐI "LIÊN HỆ NGAY": ảnh nền sáng -> lớp phủ tối + chữ trắng cho dễ đọc --- */
.home-contact-now__content{position:relative}
.home-contact-now__content::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,19,24,.76) 0%,rgba(14,19,24,.52) 40%,rgba(14,19,24,.16) 100%)}
.home-contact-now__content>*{position:relative;z-index:1}
.home-contact-now__content-main,
.home-contact-now__content-header,
.home-contact-now__content-sub { color: #fff !important; text-shadow:0 1px 12px rgba(0,0,0,.45); }
.home-contact-now__content-header::after { background-color: #FFD200 !important; }

/* --- 5. NÚT: bỏ tím lạc tông -> màu thương hiệu (vàng + chữ đậm) --- */
.inputForm__button,
button.inputForm__button {
  background: linear-gradient(270deg, #FFBA00 0%, #FFD200 100%) !important;
  color: #1a1e23 !important; border: none !important; font-weight: 700 !important;
  transition: filter .15s ease, transform .05s ease;
}
.inputForm__button:hover { filter: brightness(.96); }
.inputForm__button:active { transform: translateY(1px); }
/* badge ngày tháng ở trang chi tiết: bỏ tím -> navy đồng bộ */
.details__container-wrap-main-image-calendar-my { background: #1f2a37 !important; }

/* --- 6. TIÊU ĐIỂM BÀN PHÍM (accessibility) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #2f6f8f !important; outline-offset: 2px !important; border-radius: 4px;
}

/* --- 7. NÚT NỔI LIÊN HỆ (mobile): Gọi + Zalo, góc trái để không đè widget chat --- */
.enh-fab { position: fixed; left: 14px; bottom: 16px; z-index: 9998; display: flex; flex-direction: column; gap: 10px; }
.enh-fab a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 52px; height: 52px; border-radius: 50%; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
  font-family: "Open Sans", system-ui, sans-serif;
}
.enh-fab a.call { background: #1a7a3c; }
.enh-fab a.zalo { background: #0068ff; font-size: 15px; }
.enh-fab a:hover { filter: brightness(1.05); }
.enh-fab a.call::before { content: "\260E"; font-size: 20px; }
@media (min-width: 992px) { .enh-fab { left: 18px; bottom: 20px; } }

/* --- 8. TOAST thông báo --- */
.enh-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #16202b; color: #fff; padding: 13px 20px; border-radius: 10px; z-index: 10000;
  font: 500 14px/1.5 "Open Sans", system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-width: min(90vw, 440px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center;
}
.enh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.enh-toast b { color: #FFD200; }

/* --- 9. FOOTER nhiều cột chuẩn (thay toàn bộ footer gốc) --- */
footer.enh-footer2{background:#10161c !important;color:#c7cdd4 !important;font-family:"Open Sans",system-ui,sans-serif;
  display:block !important;height:auto !important;min-height:0 !important;text-align:left !important;
  padding:42px 55px 0 !important;margin:0 !important;box-sizing:border-box}
.enh-footer2 .ef-grid{max-width:none !important;width:100% !important;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.6fr;gap:30px 36px;box-sizing:border-box}
.enh-footer2 .ef-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.enh-footer2 h4{font-family:"Open Sans",system-ui,sans-serif;color:#fff;font-size:14.5px;font-weight:700;margin:0 0 6px;text-transform:uppercase;letter-spacing:.03em}
.enh-footer2 a{color:#c7cdd4;text-decoration:none;font-size:14px;line-height:1.5;transition:color .15s}
.enh-footer2 a:hover{color:#FFD200}
.enh-footer2 .ef-col>span{font-size:13.5px;line-height:1.55;color:#aab2bb}
.enh-footer2 b{color:#fff;font-weight:600}
.enh-footer2 .ef-logo{height:40px !important;width:auto !important;object-fit:contain !important;align-self:flex-start;max-width:100%;margin-bottom:6px}
.enh-footer2 .ef-brand p{font-size:13.5px;line-height:1.6;color:#aab2bb;margin:0 0 10px;max-width:340px}
.enh-footer2 .ef-social{display:flex;gap:10px;margin-top:2px;flex-wrap:wrap}
.enh-footer2 .ef-social a{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;font-weight:700;font-size:13px}
.enh-footer2 .ef-social .zalo{background:#0068ff;color:#fff}
.enh-footer2 .ef-social .call{background:#FFD200;color:#16202b}
.enh-footer2 .ef-social a:hover{filter:brightness(1.07)}
.enh-footer2 .ef-bottom{max-width:none !important;width:100% !important;margin:30px auto 0;border-top:1px solid #243040;padding:16px 0 26px;font-size:13px;color:#8c95a1;text-align:center;line-height:1.6;box-sizing:border-box}
@media (max-width:1024px){footer.enh-footer2{padding-left:30px !important;padding-right:30px !important}}
@media (max-width:860px){.enh-footer2 .ef-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.enh-footer2{padding-left:18px !important;padding-right:18px !important}.enh-footer2 .ef-grid{grid-template-columns:1fr;gap:24px}}

/* --- 11. Khối "Về chúng tôi" ở trang chủ: căn giữa dọc, giãn cách cân đối --- */
.home-about__content{justify-content:center !important;padding-top:48px !important;padding-bottom:48px !important;gap:0 !important}
.home-about__content .enh-about-lead{font-size:16px;line-height:1.72;margin:0 0 14px !important;color:#2b333d}
.home-about__content .button-detail-more--home-about{margin-top:30px !important}
.home-about__content .enh-about-lead strong{color:#16202b;font-weight:700}
.home-about__content .enh-about-text{font-size:14.5px;line-height:1.72;color:#5a636e;margin:0 0 22px}
.home-about__content .enh-about-text em{font-style:normal;font-weight:600;color:#e8871e}
.enh-about-highlights{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.enh-about-highlights li{display:flex;gap:12px;align-items:flex-start}
.enh-about-highlights li i{color:#e8871e;font-size:19px;flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:rgba(232,135,30,.1);border-radius:7px}
.enh-about-highlights b{display:block;font-size:14.5px;color:#16202b;font-weight:700;line-height:1.3}
.enh-about-highlights small{display:block;font-size:12.5px;color:#6b7480;line-height:1.45;margin-top:2px}
@media (max-width:600px){.enh-about-highlights{grid-template-columns:1fr;gap:14px}}

/* --- 12. THANH MENU hiện đại: kính mờ khi cuộn + gạch chân động + CTA nổi --- */
/* header dính (đã cuộn): hiệu ứng kính mờ thay cho nền trắng phẳng */
.top-nav.top-nav-scroll-black{
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 4px 26px rgba(16,22,30,.10); border-bottom:1px solid rgba(16,22,30,.06);
  transition:background .3s, box-shadow .3s;
}
/* link menu: chữ rõ nét + gạch chân vàng chạy từ trái khi hover/active */
.top-nav .menu>li>a{position:relative;font-weight:600;transition:color .2s ease}
.top-nav.top-nav-scroll-black .menu>li>a:hover{color:#16202b}
.top-nav .menu>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2.5px;border-radius:3px;
  background:#FFD200;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.top-nav .menu>li>a:hover::after,.top-nav .menu>li>a.active::after{transform:scaleX(1)}
/* bỏ gạch chân cứng cũ của active -> dùng gạch chân động cho đồng nhất */
.top-nav .menu>li>a.active{border-bottom-color:transparent !important}
/* nút CTA "Nhận Báo Giá": bo tròn, đổ bóng, nhấc lên khi hover */
#send-price.btn-sent-price{border-radius:10px !important;box-shadow:0 6px 18px rgba(255,186,0,.34);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease}
#send-price.btn-sent-price:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(255,186,0,.46);filter:brightness(1.03)}

/* --- 10. Vi chỉnh: cuộn mượt, chống tràn ngang --- */
/* --- 13. THẺ BÀI VIẾT (tin tức): ẩn thời gian cũ + layout đều đẹp, chuẩn style 5px-8px --- */
.news__container-post-list .row > [class*="col-"]{display:flex;flex-direction:column}
.news__container-post-item-content-link{display:none !important}
.news__container-post-item{
  height:100%;display:flex;flex-direction:column;
  border-radius:8px !important;overflow:hidden;background:#fff;
  border:1px solid #eaedf2 !important;
  box-shadow:0 1px 3px rgba(16,22,30,.06),0 6px 18px rgba(16,22,30,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.news__container-post-item:hover{
  transform:translateY(-4px);box-shadow:0 10px 24px rgba(16,22,30,.12);
  border-color:#ffd200 !important;
}
.news__container-post-item-picture{
  height:220px;flex:none;overflow:hidden;display:block;position:relative;
}
.news__container-post-item-picture img,
.news__container-post-item-picture:hover img,
.news__container-post-item-picture-img{
  width:100% !important;height:100% !important;object-fit:cover !important;
  border-radius:0 !important;
  transition:transform .5s ease;
}
.news__container-post-item-picture--highlight-img,
.news__container-post-highlights-item .news__container-post-item-picture img{
  border-radius:6px !important;
}
.news__container-post-item:hover .news__container-post-item-picture img{transform:scale(1.06)}
.news__container-post-item-content{
  flex:1;display:flex;flex-direction:column;
  padding:16px 18px 20px !important;
}
.news__container-post-item-content-title{
  display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.35em * 2);line-height:1.35;padding-bottom:0 !important;margin-bottom:10px;
  transition:color .2s ease;
}
.news__container-post-item:hover .news__container-post-item-content-title{color:#e8871e !important}
.news__container-post-item-content-sub{
  display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;line-height:1.55;color:#525F7E;
}

/* Bài viết nổi bật (highlight) trên news.html: giữ bố cục ngang trên desktop */
.news__container-post-highlights-item{
  display:flex !important;flex-direction:row !important;align-items:center;
  height:auto !important;border-radius:8px !important;border:1px solid #eaedf2 !important;
  padding:20px !important;box-shadow:0 4px 20px rgba(16,22,30,.08) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.news__container-post-highlights-item:hover{
  border-color:#ffd200 !important;
}
.news__container-post-highlights-item .news__container-post-item-picture,
.news__container-post-item-picture.news__container-post-item-picture--highlight{
  width:50% !important;height:310px !important;flex:0 0 50% !important;border-radius:6px;
}
.news__container-post-highlights-item .news__container-post-item-content,
.news__container-post-highlights-content{
  width:50% !important;flex:1 1 50% !important;padding:20px 24px 20px 40px !important;justify-content:center;
}
.news__container-post-highlights-item .news__container-post-item-content-title{min-height:0 !important}
@media (max-width:768px){
  .news__container-post-highlights-item{flex-direction:column !important;padding:14px !important}
  .news__container-post-highlights-item .news__container-post-item-picture,
  .news__container-post-item-picture.news__container-post-item-picture--highlight{width:100% !important;height:240px !important;flex:none !important}
  .news__container-post-highlights-item .news__container-post-item-content,
  .news__container-post-highlights-content{width:100% !important;padding:16px 6px 6px !important}
}

/* --- 14. Tin tức magazine: badge chuyên mục, Đọc thêm hover, chips lọc, Xem thêm --- */
.enh-cat{position:absolute;top:12px;left:12px;z-index:2;color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:6px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.25);
  font-family:"Open Sans",system-ui,sans-serif;line-height:1.2}
.enh-readmore{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(0deg,rgba(16,22,30,.9) 0%,rgba(16,22,30,.5) 70%,transparent 100%);
  color:#fff;font-weight:700;font-size:13.5px;padding:16px 16px 12px;text-align:center;
  transform:translateY(101%);transition:transform .3s ease;font-family:"Open Sans",system-ui,sans-serif}
.news__container-post-item:hover .enh-readmore{transform:translateY(0)}
.enh-filterbar{display:flex;flex-wrap:wrap;gap:8px 9px;justify-content:center;margin:0 auto 34px;padding:0 16px;max-width:1060px}
.enh-chip{display:inline-flex;align-items:center;gap:7px;font-family:"Open Sans",system-ui,sans-serif;font-size:13px;font-weight:600;
  padding:6px 7px 6px 15px;border-radius:999px;border:1px solid #e2e6eb;background:#fff;color:#3b434d;cursor:pointer;
  line-height:1;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.enh-chip:hover{border-color:#ffcf4d;color:#16202b;background:#fffdf5;box-shadow:0 2px 8px rgba(16,22,30,.06)}
.enh-chip.active{background:#16202b;border-color:#16202b;color:#fff;box-shadow:0 4px 14px rgba(16,22,30,.18)}
.enh-count{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:19px;padding:0 6px;
  border-radius:999px;background:#eef1f4;color:#6b7480;font-size:11px;font-weight:700;transition:background .18s ease,color .18s ease}
.enh-chip:hover .enh-count{background:#ffe6a6;color:#8a5a00}
.enh-chip.active .enh-count{background:rgba(255,255,255,.22);color:#fff}
.enh-loadmore{display:block;margin:34px auto 0;font-family:"Open Sans",system-ui,sans-serif;font-size:15px;font-weight:700;
  color:#16202b;background:linear-gradient(135deg,#FFD200,#FFB400);border:none;padding:13px 36px;border-radius:8px;
  cursor:pointer;box-shadow:0 6px 18px rgba(255,186,0,.32);transition:transform .15s ease, box-shadow .15s ease}
.enh-loadmore:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,186,0,.42)}

/* --- 15. Khối "Tại sao chọn": icon ngành thay cartoon --- */
.home-choose__item-img{display:flex;justify-content:center}
.home-choose__item-img .enh-choose-ic{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;
  border-radius:24px;background:linear-gradient(135deg,#FFC734,#FF9A00);box-shadow:0 14px 28px rgba(255,150,0,.32);
  transition:transform .25s ease;font-size:38px;color:#fff}
.home-choose__item:hover .enh-choose-ic,.home-choose__item-img:hover .enh-choose-ic{transform:translateY(-6px)}
.home-choose__item-img .enh-choose-ic i,.home-choose__item-img .enh-choose-ic svg{color:#fff !important;fill:#fff !important;height:1em;width:auto}

/* --- 16. Mobile: giảm lề hai bên khối tin tức để dùng gần hết chiều rộng --- */
@media (max-width:740px){
  .news__container-post{padding-left:12px !important;padding-right:12px !important}
  .news__container-post-highlights{padding:16px 12px !important}
  .news__container-post-list .row.g-5,.row.g-5{--bs-gutter-x:1.1rem !important;--bs-gutter-y:1.4rem !important}
  .enh-filterbar{padding:0 10px !important;gap:7px}
  .enh-chip{font-size:12px;padding:5px 6px 5px 12px}
}

/* --- 17. Gallery "Hình ảnh hoạt động" (/about): ảnh thật phủ khung đều --- */
.about__picture-container-item-img{object-fit:cover !important;width:100%;height:100%}

/* --- 18. Chống layout shift (CLS): ảnh thân bài giữ tỉ lệ theo width/height attr
       (gốc ép height:100% làm mất khả năng dự trữ chỗ của trình duyệt) --- */
.details__container-wrap-content p img,
.details__container-wrap-content img { height: auto !important; }

/* --- 19. Mobile: ẩn bong bóng chat tự bung (che nội dung / thanh lọc tin tức).
       Giữ nguyên nút liên hệ nổi để người dùng vẫn gọi/Zalo được. --- */
@media (max-width: 768px){
  .b24-widget-button-popup,
  .b24-widget-button-popup-show { display: none !important; }
}

html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }