/*
Theme Name: Flatsome-child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE. ***************/

/* ===== Heading + meta + main image ===== */
.project-title{font-weight:800;margin:0 0 8px}
.project-meta{color:#666;font-size:14px}.project-meta .sep{margin:0 6px}
.project-main-image img{border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.08)}

/* ===== Gallery Strip (Dải ảnh cuộn ngang) ===== */
.project-thumbs-wrap{margin-bottom:20px}
.project-thumbs{
  display:flex;gap:12px;overflow-x:auto;
  padding:10px 2px 6px;margin-top:10px;
  scrollbar-width:none;-ms-overflow-style:none
}
.project-thumbs::-webkit-scrollbar{display:none}
.project-thumbs .thumb-item{
  position:relative;flex:0 0 auto;width:190px;height:120px;
  border-radius:10px;overflow:hidden;cursor:pointer;
  text-decoration:none!important;border:0!important;
  box-shadow:0 4px 12px rgba(0,0,0,.1)
}
.project-thumbs .thumb-frame{display:block;width:100%;height:100%}
.project-thumbs .thumb-frame img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease
}
.project-thumbs .thumb-item:hover .thumb-frame img{transform:scale(1.03)}
/* CSS cho .count-more và .hidden-item đã được chuyển sang functions.php để quản lý logic opacity */

/* ===== Thanh 'Thông tin công trình' (SBS) – Code Mới 4 cột đều & Fix màu ===== */
/* Khung chung vẫn bo góc + overflow hidden */
.sbs-info{margin:16px 0 18px;border-radius:12px;overflow:hidden}

/* Thanh đầu đen */
.sbs-info__head{background:#111;padding:14px 10px;text-align:center}
.sbs-info__title{color:#fff;font-weight:800;line-height:1.3 !important;}
.sbs-info__subtitle{color:#fff;font-weight:700;margin-top:6px}

/* Lưới 4 cột đều nhau */
.sbs-info__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:12px;
  background:#135688 !important; /* MÀU XANH FIX */
}

/* Mỗi ô là 1 card nhỏ */
.sbs-info__item{
  display:flex; gap:12px; align-items:center;
  padding:14px 16px;
  background:#ddd !important; /* MÀU XÁM FIX */
  border-radius:10px;
  min-height:64px;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}

/* Icon pill */
.sbs-ic{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:rgba(255,255,255,.35);
  color:#000;
}
.sbs-ic svg{width:22px;height:22px;display:block}

/* Text */
.sbs-info__label{font-size:13px;font-weight:800;color:#000;line-height:1.2}
.sbs-info__value{font-size:13px;color:#000;line-height:1.2;margin-top:2px}

/* Nút cataloge */
.sbs-info__cta{text-align:center;background:#fff;padding:10px}
.btn-cataloge{display:inline-block;background:#111;color:#fff;padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.btn-cataloge:hover{opacity:.9}

/* Hover nhẹ cho desktop */
@media (hover:hover){
  .sbs-info__item{transition:transform .15s ease, box-shadow .15s ease}
  .sbs-info__item:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
}

/* ===== Related cards ===== */
.project-related{margin-top:36px}
.project-related .section-title{font-weight:800;margin-bottom:16px}
.rel-card{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:12px;height:100%;display:flex;flex-direction:column}
.rel-img{display:block}
.rel-frame{display:block;position:relative;width:100%;padding-top:66.666%;overflow:hidden;border-radius:10px}
.rel-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rel-title{font-size:16px;margin:10px 0 8px;font-weight:700}
.rel-meta{display:flex;flex-wrap:wrap;gap:12px;color:#4a4a4a;font-size:13px}
.rel-meta .meta-item{display:flex;align-items:center;gap:6px}
.rel-meta .meta-item svg{width:14px;height:14px}


/* Ẩn gallery Gutenberg trong nội dung (vì đã có strip) */
.entry-content .wp-block-gallery{display:none}

/* ===== LightGallery tối ưu (chuẩn SBS) ===== */
.lg-backdrop{background:rgba(0,0,0,.96)!important;z-index:99998!important}
.lg-container,.lg-outer{z-index:99999!important}
.lg-counter{color:#fff!important;font-size:15px!important;top:12px!important;left:20px!important}
.lg-toolbar{background:transparent!important}
.lg-object{object-fit:contain!important}

/* Tidy arrows */
.lg-next, .lg-prev{
  width: 44px; height: 44px;
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border-radius: 12px;
  box-shadow: none !important;
  opacity: .85;
  transition: opacity .2s, transform .2s;
}
.lg-prev{ left: 12px; }
.lg-next{ right: 12px; }
.lg-next:hover, .lg-prev:hover{ opacity: 1; }
.lg-next:active, .lg-prev:active{ transform: translateY(-50%) scale(.98); }
.lg-next .lg-icon, .lg-prev .lg-icon{
  font-size: 22px; line-height: 44px; color: #fff;
}

/* Ẩn mọi nút nổi khi LightGallery mở (giữ nguyên) */
body.lg-on .social-fixed,
body.lg-on .floating-buttons,
body.lg-on .hotline-phone-ring,
body.lg-on .zalo-chat-widget,
body.lg-on .chatbot-widget,
body.lg-on .contact-right,
body.lg-on .button-contact,
body.lg-on .button-contact-vr,
body.lg-on [class*="zalo"],
body.lg-on [class*="hotline"],
body.lg-on [class*="contact"],
body.lg-on [class*="social"]{
  display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 849px){
  .sbs-info__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
  .sbs-info__item{min-height:56px}
  .project-thumbs .thumb-item{width:46vw;height:28vw}

  /* ẨN ẢNH THỨ 3, 4, 5 (vì JS trong functions.php đã chuyển +N từ 5 sang 2) */
  .project-thumbs .thumb-item:nth-child(3),
  .project-thumbs .thumb-item:nth-child(4),
  .project-thumbs .thumb-item:nth-child(5){
    display: none !important;
  }
}

@media (max-width: 640px){
  .lg-next, .lg-prev{ width: 36px; height: 36px; border-radius: 10px; }
  .lg-next .lg-icon, .lg-prev .lg-icon{ font-size: 18px; line-height: 36px; }
  .lg-prev{ left: 8px; } .lg-next{ right: 8px; }
}

/* ===== Form SBS Sidebar (Giữ nguyên) ===== */
.sbs-form{background:#fff;border:2px solid #135688 !important;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);overflow:hidden}
.sbs-form__head{margin:0;background:#111;color:#FFF !important;text-align:center;font-weight:800;padding:12px;border-bottom:2px solid #135688 !important}
.sbs-form__body{padding: 8px !important}

.sbs-form p{margin:0 0 12px}
.sbs-form input[type="text"],
.sbs-form input[type="tel"],
.sbs-form input[type="email"],
.sbs-form textarea{
  width:100%;border:2px solid #f1f1f1;background:#f7f7f7;border-radius:10px;
  height:44px;line-height:42px;padding:0 12px;font-size:14px;outline:none;
}
.sbs-form textarea{height:90px;line-height:1.4;resize:vertical;padding:10px 12px}
.sbs-form input:focus, .sbs-form textarea:focus{border-color:#FFB800;background:#fff}

.sbs-form__group{margin-bottom:10px}
.sbs-form__label{display:block;font-weight:700;margin-bottom:6px}
.sbs-form .wpcf7-list-item{display:block;margin:6px 0}
.sbs-form .wpcf7-list-item label{display:flex;align-items:center;gap:8px;cursor:pointer}
.sbs-form input[type="checkbox"]{transform:translateY(1px)}

.sbs-form__submit{text-align:center;margin-top:8px}
.sbs-form input[type="submit"]{
  background:#FFB800;color:#111;font-weight:800;border:0;border-radius: 8px!important;
  padding: 8px 8px !important;width:100%;cursor:pointer;transition:filter .2s, transform .05s ease;
  box-shadow:0 2px 0 #e6a900, 0 8px 18px rgba(0,0,0,.08);
}
.sbs-form input[type="submit"]:hover{filter:brightness(.95)}
.sbs-form input[type="submit"]:active{transform:translateY(1px)}

/* Lỗi & trạng thái */
.sbs-form .wpcf7-not-valid{border-color:#ff6b6b;background:#fff}
.sbs-form .wpcf7-not-valid-tip{color:#c0392b;font-size:12px;margin-top:4px}
.sbs-form .wpcf7-response-output{margin:10px 0 0;border-radius:10px;border:2px solid #FFB800}

/* fix lỗi màu  */
.sbs-info__item {
    display: flex;
	background: #ddd !important;}
.sbs-info__title {
    line-height: 1.3 !important;
}

/* ==== CF7: Ngân sách 2 cột, ô dạng card ==== */
.sbs-form [data-name="your-budget"] .wpcf7-form-control{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.sbs-form [data-name="your-budget"] .wpcf7-list-item{
  margin:0 !important;
}

.sbs-form [data-name="your-budget"] .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 0px;
    background: #fff;
    border: 2px solid #e9e9e9;
    border-radius: 10px;
    line-height: 1.3;
    cursor: pointer;
    min-height: 48px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

/* Checkbox to hơn chút cho dễ bấm */
.sbs-form [data-name="your-budget"] input[type="checkbox"]{
  width:18px; height:18px;
}

/* Hover */
@media (hover:hover){
  .sbs-form [data-name="your-budget"] .wpcf7-list-item label:hover{
    border-color:#ffc93c;
  }
}

/* Trạng thái ĐÃ CHỌN */
.sbs-form [data-name="your-budget"] .wpcf7-list-item label:has(input:checked) {
    background: #13568800;
    box-shadow: 0 0 0 1px #135688 inset;
    font-weight: 700;
}

/* Mobile: về 1 cột */
@media (max-width: 480px){
  .sbs-form [data-name="your-budget"] .wpcf7-form-control{
    grid-template-columns: 1fr;
  }
}
.project-thumbs .thumb-item.count-more .thumb-frame img{
    filter: brightness(1)!important; /* Khôi phục độ sáng */
    opacity: 1!important; /* ĐÃ CHUYỂN VỀ 100% OPACITY */
    transition:transform .25s;
}