/*
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.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/}

/* 1. SETUP LƯỚI GRID VÀ ÉP LẤP ĐẦY KHOẢNG TRỐNG */
.galleryphuongnam.row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; 
    grid-auto-rows: 220px; 
    gap: 10px;
    grid-auto-flow: dense !important; /* Quan trọng: Tự động nhặt ảnh lấp vào các lỗ hổng */
}

/* Xóa bỏ định dạng dòng/cột rườm rà mặc định của Flatsome */
.galleryphuongnam.row::before,
.galleryphuongnam.row::after { display: none !important; }

/* 2. KHÓA TAY JAVASCRIPT CỦA FLATSOME */
.galleryphuongnam .col {
    position: relative !important; /* Vô hiệu hóa absolute của Flatsome */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 100% !important; 
    width: 100% !important;
    padding: 0 !important; 
    margin: 0 !important; 
    height: 100% !important;
}

.galleryphuongnam .col-inner, 
.galleryphuongnam .box, 
.galleryphuongnam .box-image { 
    height: 100% !important; 
    margin: 0 !important;
}

/* 3. BO GÓC & HIỆU ỨNG ẢNH */
.galleryphuongnam .box-image { 
    border-radius: 12px !important; 
    overflow: hidden !important; 
}

.galleryphuongnam .box-image img {
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    transition: transform 0.4s ease;
}

.galleryphuongnam .box:hover .box-image img { 
    transform: scale(1.05); 
}

/* 4. LOGIC SO LE CHO DESKTOP (CHU KỲ 12 ẢNH) */
@media (min-width: 850px) {
    /* Block 1 */
    .galleryphuongnam .col:nth-child(12n + 1) { 
        grid-column: span 2; 
        grid-row: span 2; 
    } 
    .galleryphuongnam .col:nth-child(12n + 5) { 
        grid-column: span 2; 
    } 

    /* Block 2 (Đảo ngược) */
    .galleryphuongnam .col:nth-child(12n + 10) { 
        grid-column: span 2; 
        grid-row: span 2; 
    } 
    .galleryphuongnam .col:nth-child(12n + 12) { 
        grid-column: span 2; 
    } 
}

/* 5. RESPONSIVE CHO MOBILE & TABLET */
@media (max-width: 849px) {
    .galleryphuongnam.row {
        grid-template-columns: repeat(2, 1fr) !important; 
        grid-auto-rows: 180px;
    }
    
    .galleryphuongnam .col:nth-child(12n + 1),
    .galleryphuongnam .col:nth-child(12n + 5),
    .galleryphuongnam .col:nth-child(12n + 10),
    .galleryphuongnam .col:nth-child(12n + 12) {
        grid-column: span 2;
    }
    
    .galleryphuongnam .col:nth-child(12n + 1),
    .galleryphuongnam .col:nth-child(12n + 10) {
        grid-row: span 1; 
    }
}

.dinhdong-horizontal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Màu nền vàng đồng */
  background: linear-gradient(135deg, #e6c57a 0%, #c19b48 50%, #dfb768 100%);
  border-radius: 8px;
  padding: 15px 30px;
  width: 100%;
  box-sizing: border-box;
  
  color: #1a1a1a;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  gap: 20px;
}

.dinhdong-horizontal-cta .cta-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.dinhdong-horizontal-cta .cta-text {
  text-align: left;
}

.dinhdong-horizontal-cta .cta-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 4px;
  color: #111;
}

.dinhdong-horizontal-cta .cta-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.dinhdong-horizontal-cta .cta-middle {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #111;
  white-space: nowrap;
}

.dinhdong-horizontal-cta .cta-btn {
  display: inline-block;
  background-color: #1a1a1a;
  color: #e6c57a;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.dinhdong-horizontal-cta .cta-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

/* Responsive: Tự động xếp dọc trên màn hình điện thoại (dưới 768px) */
@media (max-width: 768px) {
  .dinhdong-horizontal-cta {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
  }
  .dinhdong-horizontal-cta .cta-left {
    flex-direction: column;
    text-align: center;
  }
  .dinhdong-horizontal-cta .cta-text {
    text-align: center;
  }
}
@font-face {
    font-family: 'Philosopher-Local';
    src: url('/wp-content/themes/flatsome-child/assets/font/Philosopher-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



/* Áp dụng cho tiêu đề công ty Đình Đông */
h3.home span {
    font-family: 'Philosopher-Local', sans-serif !important;
}

.banner p {
    margin-bottom: 10px!important;
    margin-top: 10px!important;
    padding: 0;
}
.h4thicong{margin-bottom:-9px !important}

/* Khống chế độ rộng của khung tìm kiếm */
.header-bottom .header-search-form {
    max-width: 250px; /* Bạn có thể tăng giảm con số này cho vừa ý */
    margin-left: auto; /* Đẩy khung tìm kiếm sang sát mép phải */
}

/* Tạo khoảng cách giữa menu và khung tìm kiếm */
.header-bottom .flex-col.main-menu-col {
    flex: 1; /* Để menu chiếm không gian trung tâm, đẩy search ra xa */
}
/* Chỉ áp dụng cho màn hình từ 992px trở lên (PC) */
@media (min-width: 992px) {
    #masthead.header-main {
        position: relative !important;
    }




/* 1. Xóa sạch TẤT CẢ đường kẻ mặc định của Flatsome trên mọi thiết bị */
.hke.section-title-container,
.hke .section-title,
.hke .section-title-main,
.hke .section-title-normal {
    border-bottom: none !important;
    border-top: none !important;
}

.hke .section-title::after,
.hke .section-title::before,
.hke .section-title-main::after,
.hke .section-title-main::before,
.hke .section-title-normal::after,
.hke .section-title-normal::before {
    display: none !important;
    content: none !important;
}

/* 2. Cấu hình khung và đẩy đường kẻ xích lên gần chữ hơn */
.hke.section-title-container {
    position: relative !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important; /* Chỉnh số này nhỏ lại nếu muốn xích lên sát chữ hơn nữa */
    margin-bottom: 15px !important;
}

/* 3. Hiển thị DUY NHẤT đường kẻ vàng gradient */
.hke.section-title-container::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 180px !important; /* Độ dài đường kẻ */
    height: 1px !important;
    background: linear-gradient(
        to right,
        transparent 0%,
        #b6914a 20%,
        #e2c07d 50%,
        #b6914a 80%,
        transparent 100%
    ) !important;
}
    #masthead.header-main::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 73% !important;
        height: 1px !important;
        background: linear-gradient(
            to right,
            transparent 0%,
            #b6914a 20%,
            #e2c07d 50%,
            #b6914a 80%,
            transparent 100%
        ) !important;
    }
}

#top-bar.header-top {
    position: relative !important;
}

#top-bar.header-top::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 70% !important;
    height: 1px !important;
    background: linear-gradient(
        to right,
        transparent 0%,
        #b6914a 20%,
        #e2c07d 50%,
        #b6914a 80%,
        transparent 100%
    ) !important;
}
/* Layout ngang: nút bên trái, hotline bên phải */
.dong-phat-header-contact {
    display: flex !important;
    flex-direction: row !important;        /* Nằm ngang */
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-width: 280px;
}

/* Nút TƯ VẤN NGAY */
.tuvanngay-header {
    background: linear-gradient(180deg, #0158DE 0%, #073D92 100%) !important;
    border: none !important;
    border-radius: 5px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    height: 40px !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.tuvanngay-header span {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
}

/* Hotline bên phải */
.hotline-header-box {
    display: flex !important;
    flex-direction: column !important;     /* Tiêu đề trên, số dưới */
    align-items: flex-start !important;
    line-height: 1.2 !important;
}

.title-hotline {
    display: block !important;
    font-size: 10px !important;
    color: #000 !important;
    opacity: 0.8;
    margin-bottom: 2px !important;
}

.number-hotline {
    display: block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #002045 !important;
    white-space: nowrap !important;
}
/* Tối ưu hóa class .bgf (Footer) */
.bgf {
    /* 1. Màu nền xanh đen nằm dưới cùng */
    background-color: #0D233C !important; 
    
    /* 2. Hình ảnh nổi hoàn toàn lên trên màu nền */
    background-image: url('https://thicongdahoacuong.com.vn/wp-content/uploads/2026/05/bgf.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important; 
    background-position: center center !important;
    
    position: relative;
    color: #ffffff;
}

.xemthemsp{
    font-family: "Oswald", sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}
/* ====== 1. KHUNG ROW MÀU XANH NAVY SANG TRỌNG ====== */
.camket-blue-row {
    background: linear-gradient(135deg, #0b2038, #112a46) !important; /* Xanh Navy chuyển màu nhẹ */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(11, 42, 70, 0.15); /* Bóng đổ cho khối */
    margin-top: 20px;
    margin-bottom: 40px;
    
    /* Ép các cột cao bằng nhau */
    display: flex !important; 
    flex-wrap: wrap;
    align-items: stretch !important;
}

/* ====== 2. XỬ LÝ CÁC CỘT (COL) ====== */
.camket-blue-row > .col {
    display: flex !important; 
    padding-bottom: 0 !important; 
}

.camket-blue-row > .col > .col-inner {
    width: 100%;
    height: 100%;
    padding: 50px 5px 50px 5px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08); /* Viền dọc mờ tinh tế phân cách 4 cột */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Ẩn viền ở cột cuối cùng */
.camket-blue-row > .col:last-child > .col-inner {
    border-right: none;
}

/* Hover cột hơi sáng lên và nhích nhẹ */
.camket-blue-row > .col > .col-inner:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-3px);
}

/* ====== 3. CHỮA LỖI ICON BOX & ĐỔI MÀU CHỮ ====== */
.camket-blue-row .icon-box {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    gap: 15px; 
    width: 100% !important;
}

/* Kích thước Icon */
.camket-blue-row .icon-box-img {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    flex-shrink: 0 !important; 
    margin: 0 !important;
}

.camket-blue-row .icon-box-text {
    flex: 1 !important; 
    padding: 0 !important;
    text-align: left !important; 
}

/* Tiêu đề Cam kết -> Đổi sang Vàng Gold */
.camket-blue-row .icon-box-text h3, 
.camket-blue-row .icon-box-text h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #cba153 !important; /* VÀNG GOLD SANG TRỌNG */
    margin-bottom: 6px !important;
    text-transform: uppercase;
    line-height: 1.4 !important;
}

/* Mô tả chi tiết -> Đổi sang Trắng Xám dễ đọc trên nền tối */
.camket-blue-row .icon-box-text p {
    font-size: 13px !important;
    color: #e0e6ed !important; 
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ====== 4. RESPONSIVE (TABLET & MOBILE) ====== */
@media (max-width: 1024px) {
    .camket-blue-row > .col {
        width: 50% !important; /* Xuống 2 cột trên Tablet */
    }
    .camket-blue-row > .col > .col-inner {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Kẻ thêm viền ngang */
    }
    .camket-blue-row > .col:nth-child(2n) > .col-inner {
        border-right: none; /* Xóa viền dọc ở cột 2 và 4 */
    }
    .camket-blue-row > .col:nth-last-child(-n+2) > .col-inner {
        border-bottom: none; /* Xóa viền ngang ở 2 cột cuối */
    }
}

@media (max-width: 768px) {
    .camket-blue-row > .col {
        width: 100% !important; /* Xuống 1 cột trên Mobile */
    }
    .camket-blue-row > .col > .col-inner {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .camket-blue-row > .col:last-child > .col-inner {
        border-bottom: none !important; /* Xóa viền đáy của cột cuối cùng */
    }
}



/* ====== 6. CHUYỂN DẠNG TRƯỢT (SWIPE) TRÊN MOBILE ====== */
@media (max-width: 768px) {
    /* Ép các cột nằm trên 1 hàng ngang và bật cuộn */
    .quytrinh-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory; /* Bắt thẻ tự hít vào giữa */
        -webkit-overflow-scrolling: touch; /* Mượt mà trên iOS */
        padding-bottom: 20px; /* Chừa không gian dưới đáy cho bóng đổ (box-shadow) */
        justify-content: flex-start !important; /* Ép canh trái để cuộn */
        margin-left: -15px; /* Ép tràn lề trái màn hình */
        margin-right: -15px; /* Ép tràn lề phải màn hình */
        padding-left: 15px; 
    }
    
    /* Ẩn thanh cuộn mặc định cho đẹp */
    .quytrinh-row::-webkit-scrollbar {
        display: none; 
    }

    /* Thiết lập kích thước từng Box */
    .quytrinh-box {
        flex: 0 0 85% !important; /* Box chiếm 85% màn hình, chừa 15% để ló box tiếp theo */
        max-width: 85% !important;
        scroll-snap-align: center; /* Khi vuốt, box sẽ tự động khựng lại ở giữa màn hình */
    }
    
    /* Ẩn toàn bộ mũi tên chỉ đường trên Mobile */
    .quytrinh-box::after {
        display: none !important;
    }
}
/* ====== 6. CHUYỂN DẠNG TRƯỢT FULL 100% TRÊN MOBILE ====== */
@media (max-width: 768px) {
    .quytrinh-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; 
        
        padding-top: 35px !important; 
        padding-bottom: 25px !important; 
        margin: 0 !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        gap: 0; /* Cho các khối trượt nối tiếp nhau mượt mà */
    }
    
    .quytrinh-row::-webkit-scrollbar {
        display: none; 
    }

    .quytrinh-box {
        /* Chiếm trọn 100% màn hình */
        flex: 0 0 100% !important; 
        max-width: 100% !important;
        scroll-snap-align: center; 
        
        /* Chừa lề an toàn để viền card không dán sát vào viền điện thoại */
        padding-left: 15px !important; 
        padding-right: 15px !important; 
    }

    /* Tắt cái bẩy 7.5vw ở phiên bản trước */
    .quytrinh-box:first-child {
        margin-left: 0 !important;
    }
    .quytrinh-box:last-child {
        margin-right: 0 !important;
    }
    
    .quytrinh-box::after {
        display: none !important;
    }
}


/* ====== 1. XỬ LÝ KHUNG HIỂN THỊ (CARD) ====== */
/* mới */
/* Trạng thái mặc định */
.quytrinh-box .col-inner {
    position: relative;
    background: #ffffff;
    border: 1px solid #eef2f5; 
    border-bottom: 4px solid #0F223B; 
    border-radius: 12px;
    padding: 50px 15px 15px !important; 
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    height: 100%; 
    display: flex;
    flex-direction: column;
    margin-top: 25px !important;
	border-color: #0F223B;
    
    /* ĐÃ SỬA: Chuyển thành visible để không bị cắt phần số nhô lên */
    overflow: visible !important; 
}

/* Trạng thái lướt chuột (Hover) */
.quytrinh-box .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(11, 61, 145, 0.12);
    border-color: #d4a017;
    border-bottom: 4px solid #d4a017; 
}

/* ====== 2. XỬ LÝ VÒNG TRÒN SỐ ====== */
.quytrinh-number {
    position: absolute;
    top: -25px; /* Đẩy lên đè giữa viền trên */
    left: 50%;
    transform: translateX(-50%);
    width: 50px !important; 
    height: 50px !important;
    background: #112a46;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin: 0 !important; 
}

/* Reset margin cho thẻ p, h1, h2, h3 mặc định của Flatsome Text */
.quytrinh-number p, 
.quytrinh-number span, 
.quytrinh-number h1, .quytrinh-number h2, .quytrinh-number h3, .quytrinh-number h4 {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}

/* ====== 3. TIÊU ĐỀ & MÔ TẢ ====== */
.quytrinh-title {
    margin-bottom: 8px !important;
}

.quytrinh-title p, 
.quytrinh-title span, 
.quytrinh-title h1, .quytrinh-title h2, .quytrinh-title h3, .quytrinh-title h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #112a46 !important;
    text-transform: uppercase;
    margin: 0 !important;
}

.quytrinh-desc {
    margin-bottom: 15px;
    flex-grow: 1; /* Tự giãn để đẩy thẻ Image bên dưới xuống đáy */
}

.quytrinh-desc p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 !important;
}

/* ====== 4. HÌNH ẢNH TRONG CỘT ====== */
/* Đảm bảo ảnh luôn nằm dưới cùng và bo góc */
.quytrinh-box .img-inner {
    margin-top: auto; 
    border-radius: 8px;
    overflow: hidden;
}

/* ====== 5. MŨI TÊN KẾT NỐI (CHỈ TRÊN PC) ====== */
@media (min-width: 1025px) {
    .quytrinh-box::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -15px; /* Nằm ngay giữa khe hở mặc định của Flatsome Row */
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        background-color: #112a46;
        border-radius: 50%;
        z-index: 10;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
        background-size: 18px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
    
    /* Tự động ẩn mũi tên ở cột cuối cùng của hàng */
    .quytrinh-box:last-child::after {
        display: none !important;
    }
}

.my-ripple-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #004a8c; /* Có thể đổi mã màu hex này theo ý thích */
    z-index: 9999999;
    pointer-events: none;
    /* Trạng thái mặc định: vòng tròn tàng hình */
    clip-path: circle(0% at 50% 50%);
}



/* 1. Tắt lớp nền mờ mặc định của Flatsome khi hover ảnh */
.hieuungduongke3:hover .img-inner img {
  opacity: 1 !important; 
}

/* 2. Đảm bảo img-inner là gốc tọa độ */
.hieuungduongke3 .img-inner {
  position: relative !important;
  overflow: hidden !important; 
}

/* 3. Tạo thẻ giả để vẽ khung */
.hieuungduongke3 .img-inner::before,
.hieuungduongke3 .img-inner::after {
  content: '' !important;
  position: absolute !important;
  z-index: 99 !important; /* Đẩy lên 99 để chắc chắn đè lên trên mọi lớp ảnh/overlay */
  pointer-events: none !important;
  transition: all .5s ease-out 0s !important;
  
  /* CỰC KỲ QUAN TRỌNG: Fix nét bị hụt bên phải VÀ xóa lớp sương trắng ở giữa */
  display: block !important;
  width: auto !important; 
  height: auto !important; 
  background: transparent !important; 
}

/* 4. Nét dọc (trái, phải) */
.hieuungduongke3 .img-inner::before {
  top: 10px !important;
  bottom: 10px !important;
  left: 20px !important;
  right: 20px !important;
  border-right: 1px solid #fff !important;
  border-left: 1px solid #fff !important;
  transform: scaleY(0) !important;
}

/* 5. Nét ngang (trên, dưới) */
.hieuungduongke3 .img-inner::after {
  top: 20px !important;
  bottom: 20px !important;
  left: 10px !important;
  right: 10px !important;
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
  transform: scaleX(0) !important;
}

/* 6. Hiệu ứng Hover - Rê chuột bung viền */
.hieuungduongke3:hover .img-inner::before {
  transform: scaleY(1) !important;
}

.hieuungduongke3:hover .img-inner::after {
  transform: scaleX(1) !important;
}

/* 1. Tắt lớp nền mờ mặc định của Flatsome khi hover ảnh */
.hieuungduongke2:hover .box-image img {
  opacity: 1 !important; 
}

/* 2. Đảm bảo box-image là gốc tọa độ */
.hieuungduongke2 .box-image {
  position: relative !important;
  overflow: hidden !important; 
}

/* 3. Tạo thẻ giả để vẽ khung */
.hieuungduongke2 .box-image::before,
.hieuungduongke2 .box-image::after {
  content: '' !important;
  position: absolute !important;
  z-index: 99 !important; /* Đẩy lên 99 để chắc chắn đè lên trên mọi lớp ảnh/overlay */
  pointer-events: none !important;
  transition: all .5s ease-out 0s !important;
  
  /* CỰC KỲ QUAN TRỌNG: Fix nét bị hụt bên phải VÀ xóa lớp sương trắng ở giữa */
  display: block !important;
  width: auto !important; 
  height: auto !important; 
  background: transparent !important; 
}

/* 4. Nét dọc (trái, phải) */
.hieuungduongke2 .box-image::before {
  top: 10px !important;
  bottom: 10px !important;
  left: 20px !important;
  right: 20px !important;
  border-right: 1px solid #fff !important;
  border-left: 1px solid #fff !important;
  transform: scaleY(0) !important;
}

/* 5. Nét ngang (trên, dưới) */
.hieuungduongke2 .box-image::after {
  top: 20px !important;
  bottom: 20px !important;
  left: 10px !important;
  right: 10px !important;
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
  transform: scaleX(0) !important;
}

/* 6. Hiệu ứng Hover - Rê chuột bung viền */
.hieuungduongke2:hover .box-image::before {
  transform: scaleY(1) !important;
}

.hieuungduongke2:hover .box-image::after {
  transform: scaleX(1) !important;
}

/* Đảm bảo box ngoài cùng có position relative để làm gốc tọa độ */
.hieuungduongke .box {
  position: relative !important;
  overflow: hidden !important; 
}

/* Đổi từ .box-image.image-cover sang .box */
.hieuungduongke .box::before,
.hieuungduongke .box::after {
  content: '' !important;
  position: absolute !important;
  z-index: 10 !important; /* Tăng z-index để chắc chắn nó đè lên ảnh */
  pointer-events: none !important;
  transition: all .5s ease-out 0s !important;
}

/* Nét dọc (trái, phải) */
.hieuungduongke .box::before {
  top: 10px !important;
  bottom: 10px !important;
  left: 20px !important;
  right: 20px !important;
  border-right: 1px solid #fff !important;
  border-left: 1px solid #fff !important;
  transform: scaleY(0) !important;
}

/* Nét ngang (trên, dưới) */
.hieuungduongke .box::after {
  top: 20px !important;
  bottom: 20px !important;
  left: 10px !important;
  right: 10px !important;
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
  transform: scaleX(0) !important;
}

/* Hiệu ứng Hover */
.hieuungduongke .box:hover::before {
  transform: scaleY(1) !important;
}

.hieuungduongke .box:hover::after {
  transform: scaleX(1) !important;
}



#n2-ss-2 {
    border-radius: 20px !important;
    overflow: hidden !important;
}
/* Tên công ty */
.cty {
    font-size: 28px !important;
    font-weight: bold !important;
    line-height: 1.2;
    margin-bottom: 5px;
    text-align: center !important; /* Căn giữa chữ */
    display: block; 
	padding-top:3px;
	color: #D4C6A4;
}

/* Chữ mô tả bên dưới */
.chuduoicty {
    font-size: 16.2px !important;
    color: #ffffff;
    display: block;
}
/* Áp dụng font Oswald cho nút bấm cụ thể */
.button.primary.is-small.buttompn {
    font-family: "Oswald", sans-serif !important;
    text-transform: uppercase !important; /* Viết hoa giống menu Unita */
    font-weight: 500 !important;
    letter-spacing: 0.5px !important; /* Độ hở giữa các chữ cho đẹp */
}

/*hieuunglogo*/

@keyframes shine-cycle {
  0% {
    -webkit-mask-position: 100% 0; 
    mask-position: 100% 0;
    opacity: 0;
  }
  2% {
    opacity: 1; 
  }
  20% {
    -webkit-mask-position: -100% 0; 
    mask-position: -100% 0;
    opacity: 1;
  }
  22% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }
  40% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    opacity: 1;
  }
  42% {
    opacity: 0; 
  }
  100% {
    -webkit-mask-position: 100% 0; 
    mask-position: 100% 0;
    opacity: 0;
  }
}






#logo {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

#logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://thicongdahoacuong.com.vn/wp-content/uploads/2026/05/trang.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0) 100%);

  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;

  opacity: 0;
  pointer-events: none;

  animation: shine-cycle 10s linear infinite;
}





/* Ẩn tiêu đề đi trước khi lướt tới */
.sanpham {
    opacity: 0; 
}

/* Class này sẽ được JS gọi ra khi lướt tới, kết hợp hiệu ứng co giãn */
.sanpham.hien-len-day-thun {
    opacity: 1 !important;
    animation: hieuUngDayThun 1s both;
}

/* Khung hình chuyển động y chang thư viện Animate.css */
@keyframes hieuUngDayThun {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}
.container.section-title-container.sanpham {
    margin-bottom: -20px;
}
.product_meta>span {
    border-top: none }

.btn-tuvan-zalo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Khoảng cách giữa icon và chữ */
    background-color: #0B9048; /* Màu xanh chuẩn của Zalo */
    color: #ffffff !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-tuvan-zalo:hover {
    background-color: #0052cc; /* Màu tối hơn khi rê chuột */
    transform: translateY(-2px); /* Hiệu ứng nảy lên nhẹ */
    box-shadow: 0 6px 12px rgba(0, 104, 255, 0.3); /* Đổ bóng */
}
form.cart {
    display: none;
}

/* Sửa lại class bao ngoài cho khớp với HTML trong ảnh image_b30e9d.jpg */
.hotline-wrapper {
    display: flex !important;
    align-items: center !important; 
    text-decoration: none !important;
    gap: 12px; 
}

/* Giữ nguyên hiệu ứng rung lắc của bạn */
.hotline-icon img {
    width: 33px;
    height: auto;
    display: inline-block !important; /* Đổi từ block sang inline-block */
    vertical-align: middle;
    animation: rung-lac-icon 0.3s infinite alternate;
}

.hotline-content {
    display: flex;
    flex-direction: column; 
    line-height: 1.2; 
}

.hotline-title {
    font-size: 14px;
    color: black; 
    font-weight: 500;
    font-family: "Oswald", sans-serif !important;
}

.hotline-number {
    font-size: 18px;
    font-weight: 800;
    animation: nhay-do-xanh 0.8s infinite;
}

/* Keyframes giữ nguyên như cũ */
@keyframes nhay-do-xanh {
    0% { color: black; }
    50% { color: #F8B03A; }
    100% { color: black; }
}

@keyframes rung-lac-icon {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}
/* hết dien thoai*/

/* nut mua hang*/

/* 
   1. TẮT HOÀN TOÀN HIỆU ỨNG "THỤT THÒ" CỦA KIỂU NORMAL
*/
   
.product-small.box-normal .box-text {
    position: relative !important;
    transform: translateY(0) !important; 
    opacity: 1 !important;               
    visibility: visible !important;
    height: auto !important;
    padding-bottom: 12px !important;
}

.product-small.box-normal:hover .box-text {
    transform: translateY(0) !important; 
}


.product-small .add-to-cart-grid, 
.product-small .price-wrapper {
    display: none !important;
}


.hsv-btn-group-opt {
    display: flex !important;
    gap: 6px !important;
    margin-top: 8px !important;
    width: 100% !important;
}

.hsv-btn-group-opt .hsv-btn {
    flex: 1 !important;
    background-color: #007d3c !important; /* Xanh lá đậm */
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 8px 0 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: 0.3s ease !important;
}

.hsv-btn-group-opt .hsv-btn:hover {
    background-color: #005a2b !important; 
}

.hsv-btn-group-opt {
    display: flex !important;
    gap: 6px !important;
    margin-top: 10px !important; 
    width: 100% !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 99 !important;
}

.title-wrapper {
    height: auto !important;
    max-height: none !important;
}
/* Ép 2 nút thành 2 hàng trên mobile */
@media (max-width: 767px) {
    /* Tìm đến cái class bọc ngoài 2 nút mà bạn đang đặt là .hsv-btn-group-opt */
    .hsv-btn-group-opt {
        display: flex !important;
        flex-direction: column !important; /* Xếp theo cột dọc */
        gap: 10px !important; /* Khoảng cách giữa 2 nút */
    }

    /* Ép mỗi nút chiếm 100% chiều ngang */
    .hsv-btn-group-opt .hsv-btn {
        width: 100% !important;
        flex: 0 0 100% !important; 
        margin-left: 0 !important; /* Xóa margin nếu có */
        margin-right: 0 !important;
    }
}
/* Tắt tính năng kéo ảnh/link của trình duyệt để Slider Sản Phẩm lướt mượt bằng chuột */
.flickity-slider a, 
.flickity-slider img {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}

/* hết mua hang*/

/* Làm to Tiêu đề sản phẩm, in đậm và in hoa */
.product-title a {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #333 !important;
    display: block;
    margin-bottom: 5px !important;
}

.hsv-mo-ta-ngan {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    text-align: left;
    
  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
   
    text-transform: none !important;
    font-weight: normal !important;
}

.box-text {
    text-align: left !important;
}



/* hết chữ sản phẩm */

.has-shadow .box-text {
        height: 129px;
}


/* gellery bo goc */
.galleryvietphat .col-inner,
.galleryvietphat .box-image,
.galleryvietphat .image-cover {
    border-radius: 15px !important; /* Bạn có thể tăng giảm số 15px này để độ cong ưng ý nhất */
    overflow: hidden !important;
    border: none !important;
}
/* end bo goc */




/* 1. TẮT TÍNH NĂNG XẾP ẢNH BẰNG JAVASCRIPT CỦA FLATSOME */
.galleryvietphat.row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 15px !important;
    height: auto !important; /* Xóa chiều cao ảo do JS tính toán */
}

/* Ép các cột bỏ tọa độ absolute, quay về xếp theo Grid */
.galleryvietphat .gallery-col {
    position: relative !important; 
    left: auto !important; 
    top: auto !important;
    width: 100% !important; 
    max-width: 100% !important;
    padding: 0 !important; /* Bỏ khoảng cách mặc định để dùng gap của grid */
    margin: 0 !important;
}

/* 2. CHIA TỶ LỆ CỘT LỆCH NHAU (VÒNG LẶP VÔ HẠN CHO MỌI SỐ LƯỢNG ẢNH) */
/* Cứ mỗi chu kỳ 6 ảnh sẽ lặp lại tỷ lệ này */

/* Hàng lẻ (Ảnh 1, 2, 3 - Ảnh 7, 8, 9...): Tỷ lệ 5 - 4 - 3 */
.galleryvietphat .gallery-col:nth-child(6n + 1) { grid-column: span 5; }
.galleryvietphat .gallery-col:nth-child(6n + 2) { grid-column: span 4; }
.galleryvietphat .gallery-col:nth-child(6n + 3) { grid-column: span 3; }

/* Hàng chẵn (Ảnh 4, 5, 6 - Ảnh 10, 11, 12...): Tỷ lệ 3 - 4 - 5 */
.galleryvietphat .gallery-col:nth-child(6n + 4) { grid-column: span 3; }
.galleryvietphat .gallery-col:nth-child(6n + 5) { grid-column: span 4; }
.galleryvietphat .gallery-col:nth-child(6n + 6) { grid-column: span 5; }

/* 3. XÓA TỶ LỆ GỐC CỦA FLATSOME, ÉP CHIỀU CAO VÀ BO GÓC */
.galleryvietphat .col-inner,
.galleryvietphat .box-image {
    padding-top: 0 !important; /* Xóa cái padding-top: 60% gây thò thụt */
    height: 250px !important; /* Chiều cao cố định cho tất cả ảnh */
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Chống méo ảnh */
.galleryvietphat img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}







/* Ép khối Grid phải ẩn hoàn toàn trên Mobile (Sửa lỗi xung đột Flatsome) */
@media (max-width: 767px) {
    .galleryvietphat,
    .galleryvietphat.row,
    .galleryvietphat .row {
        display: none !important;
    }
}

/* Ép khối Grid ẩn hoàn toàn trên Mobile và khi xoay ngang (Tablet) */
@media (max-width: 849px) {
    .galleryvietphat,
    .galleryvietphat.row,
    .galleryvietphat .row {
        display: none !important;
    }
}






/* het gellery */







.form-flat input:not([type=submit]), .form-flat select, .form-flat textarea {
    background-color: white;
    border-color: rgba(0, 0, 0, .09);
    border-radius: 99px;
    box-shadow: none;
    color: currentColor !important;
    border: solid 1.5px black;
}
.form-flat .button.icon {
    background-color: #D0B179 !important;
    border-color: transparent !important;
    box-shadow: none;
    color: white !important;
}
.flex-row.relative {
    width: 250px;
}

/*
ngăn
 */
.ngan {
    display: inline-block; /* Để nó nằm cùng hàng với chữ */
    vertical-align: middle; /* Căn giữa so với dòng chữ */
    width: 1px;
    height: 40px; /* Độ cao vạch kẻ */
    margin: 0 15px; /* Khoảng cách 2 bên vạch kẻ */
    /* Hiệu ứng Gradient mờ dần 2 đầu như bạn muốn */
    background: linear-gradient(to bottom, transparent, #fff 50%, transparent);
    opacity: 0.7;
    /* KHÔNG dùng position: absolute hay right: 0 ở đây nữa */
}





.nav-spacing-xlarge>li {
    margin: 0px 13px 0px 80px;
}



.marquee-container {
  overflow: hidden; /* Ẩn phần chữ dư ra ngoài */
  white-space: nowrap; /* Không cho chữ xuống dòng */

  color: white;
  padding: 10px 10px;
	border-radius:0px 20px 0px 20px
}

.marquee-text {
  display: inline-block;
  padding-left: 100%; /* Bắt đầu từ ngoài cùng bên phải */
  animation: marquee 25s linear infinite; /* Chạy liên tục */
}

/* Định nghĩa chuyển động */
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}




/* 1. Phần tạo thanh gạch chân bên dưới */
.product-small.box:after, 
.mh-col-shadow > .col-inner:after, 
.post-item > .col-inner:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: right;
    transition: transform .5s ease-in-out;
    transform: scaleX(0);
    /* Đã sửa từ màu primary sang màu của bạn */
    background: #0B9048 !important; 
}

/* 2. Hiệu ứng khi di chuột (hover) vào: Thanh gạch chạy từ trái sang */
.product-small.box:hover:after, 
.mh-col-shadow:hover > .col-inner:after, 
.post-item:hover > .col-inner:after {
    transform-origin: left;
    transform: scaleX(1);
}

/* 3. Hiệu ứng Shine (Ánh sáng quét qua ảnh) - Giữ nguyên như cũ */
.box-image:hover::before, 
.post-item:hover .box-image::before, 
.img:hover .img-inner::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% { left: 125%; }
}

@keyframes shine {
    100% { left: 125%; }
}

.box-image::before, 
.img .img-inner::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}



/* 1. Ép hàng chứa 2 cột phải có độ cao bằng nhau */
.row.row-divided {
    display: flex !important;
    flex-wrap: wrap;
}

/* 2. Ép các cột (col) giãn ra hết cỡ theo chiều dọc */
.row.row-divided > .col {
    display: flex;
    flex-direction: column;
}

/* 3. Làm cho khối màu trắng bên trong (border) tự động lấp đầy chiều cao của cột */
#post-list, 
.post-sidebar.col {
    flex-grow: 1; /* Đây là lệnh quan trọng nhất để kéo dài cột ngắn bằng cột dài */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 7px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 30px; /* Khoảng cách dưới cho đẹp */
}

/* Đảm bảo nội dung bên trong không bị dính sát đáy nếu cột được kéo dài */
#post-list > div, 
.post-sidebar.col > aside {
    flex-grow: 1;
}