/*
Theme Name: Flatsome Child
Description: Optimized child theme CSS (typography scale, tokens, responsive, popup)
Author: UX Themes (customized)
Template: flatsome
Version: 3.0
*/

/* =========================
   DESIGN TOKENS / GLOBAL SCALE
   ========================= */
:root{
  /* Colors */
  --brand:#b52828;
  --brand-dark:#ab1016;
  --accent:#e19175;
  --accent-2:#f1ba79;
  --primary:#1f419b;
  --text:rgba(29,29,31,.87);
  --text-dim:rgba(29,29,31,.72);
  --muted:#e6e8e7;
  --muted-2:#ededed;

  /* Radii */
  --radius-1:4px;
  --radius-2:10px;
  --radius-3:12px;

  /* Spacing */
  --space-1:5px;
  --space-2:10px;
  --space-3:15px;
  --space-4:20px;
  --space-5:30px;
  --container-pad:50px;

  /* Font-size scale (desktop default) */
  --fs-body:16px;
  --fs-h1:38px;
  --fs-h2:30px;
  --fs-h3:24px;
  --fs-h4:20px;
  --fs-h5:18px;
  --fs-h6:16px;
}

/* Tablet scale */
@media (max-width: 991.98px){
  :root{
    --fs-body:15.5px;
    --fs-h1:34px;
    --fs-h2:28px;
    --fs-h3:22px;
    --fs-h4:18px;
  }
}
/* Mobile scale */
@media (max-width: 575.98px){
  :root{
    --fs-body:15px;
    --fs-h1:28px;
    --fs-h2:24px;
    --fs-h3:20px;
    --fs-h4:17px;
    --fs-h5:16px;
    --fs-h6:15px;
  }
}

/* =========================
   BASE TYPOGRAPHY & LINKS
   ========================= */
html,body{
  font-family:"Montserrat",sans-serif;
  font-weight:500;
  font-size:var(--fs-body);
  line-height:1.8;
  color:var(--text);
}
a:hover{ color:#464646; text-decoration:none; }

/* Focus: giữ cho keyboard, tránh tắt toàn cục */
*:focus{ outline:none; }
@media (hover:hover){
  *:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
}

/* =========================
   LAYOUT
   ========================= */
section,.section{ padding: var(--container-pad) 0; }
section ul{ margin-left: 20px; }

/* Tables */
table tr td:first-child{ width:20% !important; }
table tr td{ font-size:15px; color:var(--text); }

/* Back-to-top */
.back-to-top.button.icon{ background-color:var(--brand); color:#fff; }
.back-to-top.button.icon:hover{ border-color:#fff; }

/* Flickity nav */
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow{
  background-color:var(--brand); border-color:var(--brand);
}

/* =========================
   TYPOGRAPHY (HEADINGS)
   ========================= */
h1,h2,h3,h4,h5,h6,
.section-title .title,.entry-title,.widget-title,
.ux-heading,.title,.page-title,.heading-font{
  font-weight:700;
  line-height:1.25;
  color:#111;
  text-transform:none;
}

/* Sizes from variables */
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); font-weight:600; }
h5{ font-size:var(--fs-h5); font-weight:600; }
h6{ font-size:var(--fs-h6); font-weight:600; }

/* Tiêu đề phụ */
.title-main{ position:relative; padding-left:20px; margin-bottom:15px; font-size:20px; font-weight:600; }
h3.title-main:before{
  content:""; position:absolute; left:0; top:50%; margin-top:-7px; width:0; height:0;
  border-top:15px solid transparent; border-right:14px solid rgba(0,0,0,.06); border-bottom:0 solid transparent;
}

/* Sidebar title + nhãn cắt chéo */
.title-sidebar{ position:relative; font-weight:700; margin-bottom:20px; }
.title-sidebar span{
  font-weight:700; line-height:22px; font-size:18px; text-transform:uppercase; display:inline-block;
  background:#fff; color:#1a1a1a; padding:4px 17px 4px 21px; position:relative; z-index:2;
}
.title-sidebar span:before{
  content:""; position:absolute; left:0; top:50%; margin-top:-7px; width:0; height:0;
  border-top:15px solid transparent; border-right:14px solid rgba(0,0,0,.06); border-bottom:0 solid transparent;
}
.title-sidebar:after{
  content:""; position:absolute; top:50%; left:0; margin-top:-6px; width:100%; height:10px; z-index:1;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZXMuY29tL3hhcC8xLjAvc1R5cGVTZXJ2aWNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNDg1RUU4M0Y3NzUxMUU3Qjg1N0IxNEEzNDdFMjA1NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNDg1RUU4NEY3NzUxMUU3Qjg1N0IxNEEzNDdFMjA1NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk86A7EAAAASSURBVHjaYmBgYLBgIAgAAgwAB88AOccVbLsAAAAASUVORK5CYII=) transparent;
  transition:.35s cubic-bezier(.39,.58,.57,1);
}


/* Box & text helpers */
.box-text{ padding:10px 0; }
.box-text h3{ text-transform:uppercase; display:block; color:var(--accent); font-weight:700;  font-size: 1.1rem; }

.title-news{
  font-family:"Montserrat",sans-serif; font-weight:700; line-height:1.6;
  color:var(--brand); font-size:14px; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Project title lines */
.title-project{ position:relative; display:inline-block; font-size:22px; margin-bottom:15px; }
.title-project span{ padding:0 28px; line-height:40px; font-weight:700; font-size:22px; }
.title-project:before,.title-project:after,
.title-project span:before,.title-project span:after{
  position:absolute; content:""; background-color:var(--accent-2);
}
.title-project:before,.title-project span:before{ height:1px; width:50px; top:0; left:0; }
.title-project:after,.title-project span:after{ width:1px; height:15px; top:0; left:0; }

/* Post meta */
.post-meta{ padding:5px 0; margin-bottom:10px; border-bottom:1px solid var(--muted-2); }
.meta-date{ font-size:13px; }
.meta-date i{ margin-right:5px; }

/* Sidebar items */
.content-sidebar h5{
  font-weight:700; color:var(--text); font-size:14px; text-transform:capitalize;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.content-sidebar p{font-weight: 300; font-size:14px; line-height:1.4; margin-bottom:0; }
.content-sidebar .image{ padding:0; }
.content-sidebar .image img{ max-height:80px; }
.content-sidebar .item{ border-bottom:1px dotted var(--muted-2); padding:10px 0; }
.content-sidebar .fa:before{ margin-top:4px; font-size:13px; }


/* Breadcrumb */
.breadcrumb,.sb_breadcrumb{ margin-bottom:0; }
.sb_breadcrumb li{ margin-bottom:0; }

/* Sliders / sections */
.slider-main,.activity,.slider-company{ background:var(--muted); }
.aboutus .box-image{ border:1px solid var(--brand); padding:3px; }
.aboutus p,.news p{ font-size:14px; }
.news p{
  line-height:1.8; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.activity .item{
  padding:5px; background:#fff; box-shadow:0 2px 8px 0 rgb(0 0 0 / 10%); border:1px solid rgba(151,151,151,.25);
  transition:box-shadow .3s; margin:0 0 20px; text-align:center; position:relative;
}
.projects .item{ padding:10px; text-align:center; }


/* Dots */
.slider-nav-light .flickity-page-dots .dot,
.slider-nav-light .flickity-page-dots .dot.is-selected{ background-color:var(--brand); }

/* Footer */
.footer{
  padding:30px 0; background:#e9ecef; background-repeat:repeat-x; background-position-y:bottom; background-attachment:fixed;
}
.footer h4{ color:var(--accent); font-weight:700; margin-bottom:20px; }
.footer p,.footer .link-project h5{ font-size:16px; margin-bottom:7px; }
.footer .logo img{ width:200px; }
.absolute-footer{ background-color:var(--primary)!important; color:#fff; }

/* Form blocks */
.box-mail{
  max-width:600px; margin:0 auto; padding:15px 5px 5px; border-radius:5px; background:#e4e4e4; box-shadow:0 2px 8px 0 rgb(0 0 0 / 10%);
}
.box-mail1{
  max-width:600px; margin:0 auto; padding:5px; border-radius:5px;
  background-image:linear-gradient(180deg,#001327 44%,#002752 100%); box-shadow:0 2px 8px 0 rgb(0 0 0 / 10%);
}
.frm-mail{ background-image:url('assets/images/bg-mail.jpg'); background-attachment:fixed; }
.frm-mail1{ margin-top:0; background-attachment:fixed; }
.form-mail{
  background-image:linear-gradient(180deg,#001327 44%,#002752 100%); 
  text-align:center; 
  margin:0 auto; 
  padding:5px 0px;
}
.form-mail .title{ text-transform:uppercase; color:#e60808; font-size:20px; font-weight:500; }
.form-mail label{ color:#fff; }
.form-mail input{ height:42px; border-radius:0; border:0; box-shadow:none; }
.form-mail p{ text-align:center; font-weight:500; font-size:15px; line-height:1.4; }

.wpcf7 form .wpcf7-response-output{ 
  margin:0; 
  padding:0; 
  color:#ffffff; 
  border:0; text-align:center; }
.content-popup-vr input.wpcf7-form-control.wpcf7-submit{ border-radius:0; }

/* CTA submit */
.wpcf7-form-control.wpcf7-submit{
  display:block; 
  margin:5px auto; 
  height:45px; 
  background-color:#FF0000!important; 
  border:0px solid var(--brand-dark)!important; 
  color:#fff!important;
  font-weight:600; text-transform:uppercase; 
  border-radius:var(--radius-1); 
  transition:filter .2s ease;
}
.wpcf7-form-control.wpcf7-submit:hover{ filter:brightness(.93); }

/* Hình ảnh trong CTA */
.cta-img img{ max-width:100%; height:auto; display:block; margin:0 auto 20px; }

/* Form khối mini */
.frm-mail0{
  background-image:linear-gradient(180deg,#001327 44%,#002752 100%);
  border-radius:15px; box-shadow:0 10px 20px rgba(0,0,0,.4);
  padding:20px; max-width:400px; margin:auto; color:#fff; font-family:sans-serif;
}
.cta-banner{ width:100%; border-radius:10px; margin-bottom:15px; display:block; }
.cta-content input{
  width:100%; padding:12px; margin-bottom:12px; border-radius:5px; border:none; font-size:16px;
}
.cta-content button{
  width:100%; background-color:#ff0000; color:#fff; font-weight:700; border:none; padding:14px; font-size:18px; border-radius:6px; cursor:pointer;
}
.cta-content .note{ font-size:13px; color:#fff; margin-top:10px; text-align:center; }

/* Thanh toán */
.thanhtoan img{ width:90%; }

/* Phone label */
.phone-vr-circle-fill,.phone-vr-img-circle{ z-index:2; }
#phone-vr span{
  background:linear-gradient(90deg,#f98d2a,#e60808); position:absolute; left:55px; top:28px;
  padding:2px 15px 0 20px; z-index:1; border-radius:0 20px 20px 0; color:#fff; font-weight:700; border:2px solid var(--brand-dark);
}

/* =========================
   POPUP CTA (gọn)
   ========================= */
/* Ẩn mặc định */
.rh-popup-cta{
  display: none !important;
  position: fixed; inset: 0; z-index: 9999;
  padding: 20px;
}

/* Khi mở mới bật grid + căn giữa */
.rh-popup-cta.is-open{
  display: grid !important;
  place-items: center;
}


.rh-popup-cta .popup-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.rh-popup-cta .popup-box{
  position:relative; 
  z-index:1;
  width:min(90vw,450px); 
  max-height:90vh; 
  overflow:auto;
  padding:15px; 
  border:2px solid #fff; 
  border-radius:var(--radius-3);
  background-image:linear-gradient(180deg,#001327 44%,#002752 100%);
  box-shadow:0 0 10px rgba(0,0,0,.5);
  animation:fadeIn .3s ease both;
}
.rh-popup-cta .popup-close{ position:absolute; top:10px; right:16px; font-size:26px; font-weight:700; color:#fff; cursor:pointer; }
@keyframes fadeIn{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
@media (max-width:400px){ .rh-popup-cta .popup-box{ width:95%; padding:5px; } }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:575.98px){
  table tr td:first-child{ width:30% !important; }
  #logo-footer img{ width:150px; margin:0 auto 20px; }
  .footer h4{ font-size:85%; }
  .footer p,.footer .link-project h5{ font-size:90%; }
  .copyright-footer{ font-size:11px; }
  .title-project{ font-size:16px; }
  .slider-main{ padding:0 !important; }
  .slider-box{ width:100%; padding:0; }
  .slick-dots{ display:none !important; }
  #slider{ margin-bottom:0; }

  /* Headings đã scale qua :root nên không cần lặp lại */
}
@media (max-width:767.98px){
  .title-main{ font-size:20px; }
  h3.title-main:before{ border-top:13px solid transparent; margin-top:-8px; }
  .title-project span{ padding:0 20px; font-weight:700; font-size:18px; }
}
@media (max-width:991.98px){
  section,.section{ padding:30px 0 !important; }
  .slider-main .content{ display:flex; flex-direction:column-reverse; }
  .slider-main .content .news{ margin-bottom:20px; }
  .aboutus .title-main,.slider-main .content .title-main{ margin-top:20px; }
  .row-slider .flickity-prev-next-button{ display:none; }
  .thanhtoan img{ width:100%; }
}

/* =========================
   BUTTON/CTA RIÊNG
   ========================= */
.btn-readmore{ background-color:var(--brand); color:#fff; padding:5px 15px; border-radius:var(--radius-1); }
.btn-readmore:hover{ color:#fff; }

.rh-popup-trigger{
  font-size:16px;
  display:block; 
  margin:10px auto; 
  text-align:center; 
  font-weight:700;
  color:#fff; 
  text-shadow:0 0 10px rgba(0,0,0,.3);
  background-image:linear-gradient(159deg,#011329 0%,#224064 100%);
  border:2px solid #fff; 
  border-radius:var(--radius-2);
  box-shadow:5px 9px 14px -1px rgba(0,0,0,.5);
  padding:10px 30px; 
  position:relative; 
  padding-left:30px;
}
/* PC giữ nguyên radius 10px */
.rh-popup-trigger{ border-radius:999px; }
/* Mobile: bo tròn hơn */
@media (max-width:575.98px){ 
  .rh-popup-trigger
  { 
    border-radius:999px; } }

.main_pt.active{
                display:none;
            }
            .custom-form{
                display:flex;
                flex-wrap:wrap;
            }
            .custom-form>.wpcf7-form-control-wrap{
                width: 75%;
            }
            .custom-form .wpcf7-submit{
                border-radius:0 3px 3px 0!important;
            }
            .custom-form .wpcf7-text{
                background-color:#fff!important;
                border-radius:3px 0 0 3px!important;
            }
            .wpcf7-spinner{
                display:none;
            }
            .popup_note{
                font-size: 13px;
                line-height: 1.5;
                font-weight: 300;
                color: #fff;
                padding: 10px 0;
                margin: 0 auto 20px;
                max-width: 310px;
                text-align: center;
            }
            .sub_pt{
                display:none;
            }
            .sub_pt.active {
                display: block;
                background: linear-gradient(90deg, #9d121deb 0%, #cf1421d6 100%);
                width: 380px;
                position: fixed;
                top: 25%;
                right: 0;
                z-index: 99;
                transform: translateY(-50%);
                border: 2px solid #fff;
                border-radius: 8px 0 0 8px;
            }
            .popup_pt_2 .icon_pt{
                -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            .popup_pt_2 {
                color: #fff;
                font-size: 20px;
                position: relative;
                padding: 20px 22px 16px;
            }
            .popup_icon {
                cursor: pointer;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(90deg, #d91d2b 0%, #c31a27 100%);
                border-width: 2px 2px 2px 2px;
                border-color: #fff;
                border-style: solid;
                padding: 5px 8px;
                border-radius: 8px 8px 0px 0px;
            }
            .popup_pt_2 .popup_icon.icon_c {
                top: 50%;
                left: -25px;
                transform: translateY(-50%) rotate(270deg);
                padding: 15px 10px;
                border-radius: 5px;
                position: absolute;
            }
            .popup_pt_1 {
                background-color: var(--colorBlack);
                color: var(--colorWhite);
                font-size: 13px;
                padding: 5px 10px;
                white-space: nowrap;
                position: relative;
            }
            .popup_text{
                color:#fff;
                font-weight:bold
            }
            .icon_pt{
                width: 16px;
                height: 12px;
                border-top: rgba(0,0,0,0);
                border-left: 8px solid rgba(0,0,0,0);
                border-right: 8px solid rgba(0,0,0,0);
                border-bottom: 12px solid #fff;
            }
            .popup_pt_2 small {
                font-size: 13px;
            }
            .popup_pt_2 .popup_text {
                color: #fff;
                font-weight: bold;
                font-size: 20px;
            }
            .main_pt {
                position: fixed;
                top: 25%;
                right: -90px;
                -webkit-transform: rotate(270deg);
                -ms-transform: rotate(90deg);
                transform: rotate(270deg);
                -ms-transform-origin: left bottom;
                z-index: 99;
                cursor: pointer;
                background: linear-gradient(90deg, #d91d2b 0%, #c31a27 100%);
                border: 2px solid #fff;
                border-radius: 10px 10px 0px 0px;
            }
  @media screen and ( max-width: 767px ) {
                                        .sub_pt.active {
                                            width: 350px;
                                        }}
/* Căn giữa thẻ small trong popup form */
.form-pt .crm-form small {
  display: block;         /* đảm bảo xuống hàng */
  text-align: center;     /* căn chữ giữa */
  margin-top: 10px;       /* khoảng cách phía trên */
  font-size: 13px;        /* cỡ chữ gọn */
  color: #fff;            /* màu chữ (tuỳ chỉnh) */
  opacity: 0.85;          /* nhẹ hơn để không lấn át form */
}


/* Tiêu đề popup dùng class thuần */
/* FIX desktop: popup title */
.rh-popup-cta .popup-box .form-mail .popup-title{
  display:block !important;
  font-family:"Prompt", sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  color:#fcf0b7 !important;
  text-align:center !important;
  line-height:1.35 !important;
  font-size:22px !important;  /* PC */
  margin:0 0 10px !important;
}

/* Mobile */
@media (max-width:575.98px){
  .rh-popup-cta .popup-box .form-mail .popup-title{
    font-size:18px;
    line-height:1.4;
  }
}
.popup-title-footer{
  display:block !important;
  font-family:"Prompt", sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  color:#fcf0b7 !important;
  text-align:center !important;
  line-height:1.35 !important;
  font-size:22px !important;  /* PC */
  margin:0 0 10px !important;
  
}

/* Mobile */
@media (max-width:575.98px){
  .rh-popup-cta .popup-box .form-mail .popup-title{
    font-size:18px;
    line-height:1.4;
  }
}
/* ====== Section Tổng quan dự án ====== */
.gt-overview{  
  color: var(--muted-2);
  padding: var(--space-5) 0;
}
.gt-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Heading */
.gt-heading {
  display: flex;
  justify-content: flex-start;  /* đẩy nội dung sang trái */
  margin-bottom: var(--space-4);
}

.gt-heading img {
  max-width: 100%;
  width: 420px;
  height: auto;
}


/* Grid thông số */
.gt-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.gt-item{
  flex-wrap: var(--flex-wrap);
    justify-content: var(--justify-content);
    align-items: var(--align-items);
    align-content: var(--align-content);
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    align-self: auto
}
.gt-item img{
  width: 42px; height: 42px; object-fit: contain;
}
.gt-item p{
  margin:0; line-height:1.45;
  font-size: var(--fs-body);
  color: var(--muted-2);
}
.gt-item p strong{
  display:block;
  font-size: var(--fs-h5);
  color: var(--muted-2);
}
.gt-item p span{
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--accent-2);
}

/* Divider line */
.gt-item::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background: rgba(255,255,255,.18);
}
@media (min-width: 992px){
  .gt-item:nth-child(-n+4)::after,
  .gt-item:nth-child(n+5):nth-child(-n+8)::after{
    left: 44px;
  }
}

/* Media + Form */
.gt-media-row{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
  margin-top: var(--space-4);
}
.gt-media img{
  width: 100%; 
  height:auto; 
  display:block;
  border-radius: var(--radius-3);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
/* Giữ style chung như ảnh cũ */
.gt-media .gt-media-el,
.gt-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-3);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  object-fit: cover; /* video không bị méo khi container hẹp */
}

/* Đảm bảo iframe có chiều cao tự tính theo tỷ lệ (giữ “cảm giác” như ảnh landscape) */
.gt-media iframe.gt-media-el {
  aspect-ratio: 16/9; /* đổi thành 4/3 hay 3/2 nếu muốn giống ảnh cũ hơn */
  border: 0;
}

/* Nếu muốn cố định tỷ lệ chung cho cả video & ảnh để luôn khớp, bật thêm: */
/*
.gt-media {
  --gt-media-ratio: 16/9;
  aspect-ratio: var(--gt-media-ratio);
}
.gt-media .gt-media-el { height: 100%; }
*/


/* Form tạm */
.gt-form .frm-mail1{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-3);
  padding: var(--space-4);
  text-align:center;
  color: var(--muted-2);
}
.gt-form .popup-title{
  font-size: var(--fs-h4);
  font-weight:700;
  margin-bottom: var(--space-3);
  color: var(--muted-2);
}
.gt-form .cta-img img{
  max-width:220px;
  margin:0 auto var(--space-3);
  display:block;
}
.gt-form small{
  display:block;
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  opacity:.85;
}

/* Responsive */
@media (max-width: 991px){
  .gt-grid{ grid-template-columns: repeat(2,1fr); }
  .gt-media-row{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
  .gt-grid{ grid-template-columns: 1fr; }
  .gt-heading img{ max-width: 75%; }
}
/* ====== LỚP NỀN (full như bg1) ====== */
.gt-overview-wrap{
  margin-top: -50px;
  position: relative;
  isolation: isolate;           /* tạo stacking context riêng, an toàn cho overlay */
  width: 100%;
  padding: var(--space-5) 0;    /* dời padding ra lớp ngoài để overlay phủ đúng */
}

/* Ảnh nền + overlay */
.gt-overview-wrap::before{
  content:"";
  position: absolute;
  inset: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;                   /* nằm dưới nội dung */
}

.gt-overview-wrap::after{
  content:"";
  position: absolute;
  z-index: 0;                   /* overlay trên ảnh nhưng dưới nội dung */
}

/* ====== LỚP NỘI DUNG ====== */
.gt-overview{
  position: relative;
  z-index: 1;                   /* nằm trên overlay */
  color: var(--muted-2);
}

.gt-container{
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width:768px){
  .gt-container{ max-width: 1200px; }
}

/* ====== LAYOUT ẢNH + FORM ====== */
.gt-media-row{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--space-2);
  align-items: stretch;
}

/* Ảnh */
.gt-media{
  border-radius: var(--radius-2);
  overflow: hidden;
  height: 100%;
}
.gt-media > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Form box (đồng bộ class bạn đang dùng) */
.gt-form-gt{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-radius: var(--radius-2);
  padding: var(--space-3);
  background-image: url('https://rhland.com.vn/wp-content/themes/flatsome-child/assets/uxGT/Rectangle-10.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100%;
}

.form-pt{ display: flex; flex-direction: column; gap: var(--space-1); }

/* Cao tối thiểu để hai cột cân mắt trên desktop */
@media (min-width: 992px){
  .gt-media, .gt-form-gt{ min-height: 440px; }
}

/* Mobile */
@media (max-width: 991px){
  .gt-media-row{ grid-template-columns: 1fr; }
  .gt-media, .gt-form-gt{ min-height: unset; height: auto; }
  .gt-media > img{ height: auto !important; object-fit: contain; }
}

/* ====== TYPO intro (giữ lại các rule bạn đã có) ====== */
.elementor-widget-container .rh-intro{
  margin-top: 10px;
  display:flex; flex-direction:column; gap:10px;
  color: var(--text, rgba(29,29,31,.87));
}
.elementor-widget-container .rh-intro.rh-intro--text-only .rh-text{
  margin-top: 10px;
  display:grid; row-gap:8px;
  max-width: 900px;
}
.rh-title,.rh-sub{ margin:0; font-family:"Prompt",sans-serif; line-height:1.3; font-size:26px; }
.rh-title{ font-weight:800; color:#993300; }
.rh-sub{ font-weight:600; color:#c78e71; }
@media (max-width:575.98px){ .rh-title,.rh-sub{ font-size:20px; } }
.rh-body,.rh-end{ margin:0; font-size: var(--fs-body,16px); line-height:1.75; color: var(--text, rgba(29,29,31,.87)); }
.rh-body{ margin-top:6px; }
.rh-end{ margin-top:8px; font-weight:700; padding:10px 0 0; border-style:solid; border-width:1px 0 1px 0; }
.rh-intro.rh-intro--dark .rh-title{ color:#993300; }
.rh-intro.rh-intro--dark .rh-sub,
.rh-intro.rh-intro--dark .rh-body,
.rh-intro.rh-intro--dark .rh-end{ color: rgba(255,255,255,.9); }

.rh-container {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.rh-image {
  flex: 0 0 300px; /* chiều rộng khung hình */
  max-width: 40%;
}

.rh-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.rh-text {
  flex: 1;
}

/* Responsive: mobile xuống hàng */
@media (max-width: 767.98px) {
  .rh-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .rh-image {
    max-width: 80%;
    margin-bottom: 16px;
  }
  .rh-text {
    text-align: left;
  }
}





/* 1) Tạo khoảng hở 20px phía trên cho block giới thiệu */
.rh-intro{
  margin-block-start: 20px;   /* tương đương margin-top */
}

/* 2) Nếu là phần tử đầu tiên trong vùng chứa -> chống margin collapse */
.rh-intro:first-child{
  margin-block-start: 0;
  padding-block-start: 20px;  /* nhìn như hở trên 20px */
}

/* 3) Xoá khoảng cách thừa bên trong (bạn đang set 10px ở .rh-text) */
.rh-intro .rh-text{
  margin-top: 0 !important;
}

/* 4) (Giữ nguyên layout & kiểu chữ của bạn) */
.rh-title,
.rh-sub{
  margin:0;
  font-family:"Prompt", sans-serif;
  line-height:1.3;
  font-size:26px;             /* PC */
}
@media (max-width:575.98px){
  .rh-title, .rh-sub{ font-size:20px; }  /* Mobile */
}
.rh-title{ font-weight:800; color:#993300; }
.rh-sub  { font-weight:600; color:#c78e71; }

.rh-body, .rh-end{
  margin:0;
  font-size:var(--fs-body,16px);
  line-height:1.75;
  color:var(--text, rgba(29,29,31,.87));
}
.rh-body{ margin-top:6px; }
.rh-end { margin-top:8px; font-weight:700; }
/* --- TỔNG THỂ SECTION DỰ ÁN --- */
.projects {
    padding: 50px 0;
    position: relative;
    background-color: #f7f7f7;
}
.projects .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.projects .title-main {
    
}

/* --- TÙY CHỈNH SLIDER --- */
.project-swiper {
    padding-bottom: 20px; /* Thêm không gian cho slider */
}

/* --- GIAO DIỆN MỖI DỰ ÁN (ITEM) --- */
.projects .item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%; /* Giúp các item cao bằng nhau */
}
.projects .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.projects .box-image {
    padding-bottom: 75%; /* Tỷ lệ ảnh 4:3 */
    position: relative;
    height: 0;
}
.projects .box-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.projects .box-text {
    padding: 15px;
}
.projects .box-text h3 {
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.projects .box-text p.address {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.projects .box-text a {
    text-decoration: none;
    color: inherit;
}

/* --- MŨI TÊN ĐIỀU HƯỚNG SLIDER --- */
.project-swiper .swiper-button-next,
.project-swiper .swiper-button-prev {
    color: #007bff; /* Màu mũi tên */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.project-swiper .swiper-button-next:after,
.project-swiper .swiper-button-prev:after {
    font-size: 18px; /* Kích thước icon mũi tên */
    font-weight: bold;
}

/* NÚT XEM TẤT CẢ */
.project-actions {
  color: #cf1c29; important
    text-align: left;
    margin-top: 10px;
}
.btn-view-all {
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -.022em;
    display: inline-block;
    text-align: center;
    color: #c02038;
}
.btn-view-all:hover {
    background-color: #0056b3;
}
/* Không cho trang kéo ngang */
html, body { overflow-x: hidden; }

/* Ẩn hoàn toàn phần vượt ra của slider */
.project-swiper { overflow: hidden; }

/* (tuỳ chọn) nếu còn trượt ngang vì phần tử khác */
.projects, .projects .container { overflow: hidden; }

/* Giữ slide đúng kích thước trong khung */
.projects .item { height: 100%; }

/* Sửa lỗi cú pháp CSS ở nút xem tất cả */
.project-actions {
  color: #cf1c29 !important;
  text-align: left;
  margin-top: 10px;
}

/* LĨNH VỰC HOẠT ĐỘNG */
.services-block {
  padding: 50px 0;
  text-align: center;
}

.section-title {
  font-size: 28px;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-item {
  background: #fff;
  border-radius: 12px;
  padding: 25px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.service-item:hover {
  transform: translateY(-6px);
}

.service-icon {
  margin-bottom: 15px;
}

.service-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.service-desc {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
/*END LĨNH VỰC HOẠT ĐỘNG */

/*ƯU ĐÃI ĐẦU SITE */
.monthly-offers {
  background: linear-gradient(135deg, #f9f9f9, #fff);
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  margin-bottom: 40px;
}
.monthly-offers .offers-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #d32f2f;
  text-transform: uppercase;
}
.monthly-offers .offers-title .new {
  background: #ff4081;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 16px;
  margin-left: 8px;
}
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.offer-item {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: center;
  transition: all 0.3s ease;
}
.offer-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.offer-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.offer-text {
  font-size: 16px;
  color: #333;
}
.offer-text strong {
  color: #d32f2f;
}
.rank-math-notice,
.rank-math-upgrade-notice,
.rank-math-advanced-stats,
.rm-notice {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
 .info-blocks .blocks {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .info-blocks .block {
      flex: 1;
      background: #1A2E59; /* Màu nền */
      padding: 20px;
      border-radius: 8px;
      text-align: left;
      min-width: 280px;
      line-height: 1.6;
      font-size: 15px;
      color: #fff; /* Chữ màu trắng */
    }

    /* Mobile: thả xuống dọc */
    @media (max-width: 768px) {
      .info-blocks .blocks {
        flex-direction: column;
      }
    }

/* RH - Location block */
.rh-location-block { 
  padding: 48px 0; 
  background-image: url(https://rhland.com.vn/wp-content/themes/flatsome-child/assets/bg/_default/bg-2.png);
  background-size: cover;
}
.rh-location-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 520px; /* trái linh hoạt, phải cố định để map giữ tỉ lệ */
gap: 32px;
align-items: start;
column-gap: 40px;
}

/* Left */
.rh-location-title {
font-size: 22px;
margin: 6px 0 8px;
font-weight: 700;
color: #0f2a4a;
}
.rh-location-sub {
color: #4b5563;
margin: 0 0 20px;
}

/* List */
.rh-location-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
row-gap: 20px;
}
.rh-location-list li {
display: flex;
align-items: flex-start;
gap: 18px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(15,42,74,0.06);
}
.rh-location-list li:last-child { border-bottom: none; padding-bottom: 0; }

.icon-wrap{
width: 56px;
height: 56px;
flex: 0 0 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(10,132,163,0.06);
}
.icon-wrap img{ width: 36px; height: auto; display:block; }

/* text part */
.rh-location-list .title{
font-weight: 700;
color: #0f2a4a;
font-size: 15px;
margin-bottom: 4px;
}
.rh-location-list .desc{
color: #6b7280;
font-size: 14px;
line-height: 1.45;
}

/* Right: map */
.rh-location-right {
display: flex;
align-items: center;
justify-content: center;
}
.rh-map{
width: 100%;
max-width: 520px;
height: auto;
border-radius: 14px;
box-shadow: 0 18px 50px rgba(8,31,63,0.18);
display: block;
object-fit: cover;
border: 6px solid rgba(255,255,255,1); /* optional white frame */
}

/* ========== Responsive ========== */
/* Tablet: map hơi nhỏ, 2 cột cân bằng hơn */
@media (max-width: 1024px){
.rh-location-inner {
grid-template-columns: 1fr 420px;
gap: 24px;
}
.rh-map { max-width: 420px; }
}

/* Mobile: stack dọc (map trên hoặc dưới tùy chọn) */
/* Default: map trên, content dưới (thả dọc) */
@media (max-width: 640px){
.rh-location-inner {
grid-template-columns: 1fr;
}
.rh-location-right { order: -1; margin-bottom: 18px; } /* map appears first */
.rh-location-list li { gap: 12px; }
.icon-wrap { width: 48px; height: 48px; flex: 0 0 48px; }
.rh-location-block { padding: 28px 0; }
}

/* Small adjustments: reduce padding for narrow screens */
@media (max-width: 420px){
.rh-location-inner { padding: 0 12px; }
.rh-location-title { font-size: 18px; }
.rh-location-list .title { font-size: 14px; }
}
.rh-location-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 cột trên PC */
  gap: 20px 40px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.rh-location-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px;
}

.rh-location-list li .icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.rh-location-list li .icon-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}

.rh-location-list li .text .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
}

.rh-location-list li .text .desc {
  font-size: 14px;
  color: #555;
  margin-top: 4px;
}

@media (max-width: 767px) {
  .rh-location-list {
    grid-template-columns: 1fr; /* Mobile thành 1 cột */
    gap: 16px;
  }
}