html {
  font-size: 14px;
  margin:0;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/*/////////Header Trang Chủ/////////*/

.hotline-shake {
    display: inline-block;
    color: #f39c12; /* Màu cam giống line phân cách của bạn */
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.3s ease;
    animation: shake-animation 0.8s infinite; /* Hiệu ứng lắc */
}

.hotline-shake:hover {
    color: #ffffff;
    animation: none; /* Dừng lắc khi rê chuột vào */
}

@keyframes shake-animation {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}


/*////////////NavBar Layout Trang chủ //////////*/


/* Style cho nút Tư vấn - Bản nhỏ gọn màu cam */
.nav-tu-van {
    border: 2px solid #f39c12 !important; /* Khung màu cam Hotline */
    color: #f39c12 !important; /* Chữ màu cam */
    border-radius: 6px; /* Bo góc nhẹ cho thanh thoát */
    margin-left: 10px;
    font-weight: bold !important;
    line-height: 1 !important;
    /* Giảm padding để khung nhỏ lại */
    padding: 6px 14px !important;
    display: inline-block;
    font-size: 0.9rem; /* Giảm nhẹ size chữ nếu muốn gọn hơn nữa */
    animation: shake-light 2s infinite;
}

/* Hiệu ứng lắc nhẹ tinh tế */
@keyframes shake-light {
    0%, 100% {
        transform: rotate(0deg);
    }

    10%, 30%, 50% {
        transform: rotate(-2deg);
    }

    20%, 40%, 60% {
        transform: rotate(2deg);
    }

    70%, 90% {
        transform: rotate(0deg);
    }
}

/* Hiệu ứng khi rê chuột vào */
.nav-tu-van:hover {
    /* Thay bằng màu cam sữa rất nhạt */
    background-color: #fff3e0 !important;
    /* Giữ chữ màu đen để dễ đọc trên nền nhạt */
    color: black !important;
    /* Giữ nguyên khung màu cam đậm để định hình nút */
    border-color: #f39c12 !important;
    animation: none;
    transition: all 0.3s ease;
    /* Đổ bóng nhẹ nhàng hơn */
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
}

/* Mặc định cho điện thoại */
.masthead {
    height: 300px; /* Chiều cao cố định cho mobile */
}


/* Tạo lớp phủ tối cho ảnh nền */
.custom-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Độ mờ 40%, bạn có thể chỉnh 0.5 nếu muốn tối hơn */
    z-index: 1; /* Nằm dưới lớp chữ (z-index: 2) */
}

/* Hiệu ứng cho chữ rực rỡ hơn trên nền xám xi măng */
.site-heading h1 {
    font-size: 4.5rem;
    letter-spacing: 2px;
    color: #ffffff !important;
}

.subheading {
    font-size: 1.5rem;
    color: #f8f9fa !important;
    opacity: 1 !important; /* Đảm bảo chữ không bị mờ */
}
/* Mặc định cho điện thoại (màn hình nhỏ) */
.navbar-brand img {
    max-height: 35px !important; /* Logo nhỏ lại một chút để không chiếm chỗ Menu */
}



/* Khi lên màn hình Laptop/Desktop (từ 992px trở lên) */
@media (min-width: 1180px) {
    .navbar-brand img {
        max-height: 55px !important; /* Logo to ra cho sang trọng */
    }
    .masthead {
        height: 80vh !important; /* Chiếm 80% chiều cao màn hình laptop */
        padding: 15rem 0; /* Tăng khoảng cách đệm trên dưới */
    }
    .site-heading h1 {
        font-size: 5rem !important; /* Trả về kích thước chuẩn khi xem trên Laptop */
    }

    .site-heading .subheading {
        font-size: 1.5rem !important;
    }
}
    /* Thiết lập cho tiêu đề chính */
    .site-heading h1 {
        /* Chữ sẽ tự động co giãn từ 8% đến 12% chiều ngang màn hình */
        font-size: 10vw !important; 
        white-space: nowrap; /* Ép chữ CHƯƠNG WINDOW luôn nằm trên 1 dòng */
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    /* Tinh chỉnh cho Slogan bên dưới */
    .site-heading .subheading {
        font-size: 3.5vw !important; /* Slogan cũng co giãn theo tỉ lệ */
        display: block;
        width: 90%; /* Giới hạn chiều ngang để không sát mép màn hình */
        margin: 0 auto;
    }

/* Thiết lập riêng cho Tablet (iPad) */
@media (min-width: 768px) and (max-width: 1180px) {
    .site-heading h1 {
        /* Giảm nhẹ kích thước để vừa với chiều ngang iPad đứng */
        font-size: 3.5rem !important;
        white-space: normal !important; /* Cho phép xuống dòng nếu cần để không bị bể */
        line-height: 1.1;
    }
    .navbar-brand .title {
        display: inline-block !important; /* Ép hiển thị trên phone */
        font-size: 0.9rem; /* Thu nhỏ chữ */
        max-width: 150px; /* Giới hạn độ dài để không đè nút Menu */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .site-heading .subheading {
        font-size: 1.2rem !important;
        width: 80%; /* Thu hẹp lại một chút để cân đối */
        margin: 0 auto;
    }
    /* Thu nhỏ khoảng cách giữa các mục Menu trên iPad */
    #mainNav .nav-link {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Thu nhỏ ô tìm kiếm để nhường chỗ cho Menu */
    .search-box input {
        width: 120px !important;
    }
}
     

@media (min-width:300px) and (max-width:1180px){

    /* Đổi màu chữ "Menu" và viền nút bấm */
    .navbar-toggler {
        color: #ffffff !important; /* Chuyển chữ "Menu" sang trắng */
        border-color: rgba(255, 255, 255, 0.5) !important; /* Đổi màu viền nút */
        padding: 0.5rem 0.8rem;
    }

        /* Đổi màu biểu tượng Font Awesome bên trong nút */
        .navbar-toggler i {
            color: #ffffff !important;
        }

    /* Trường hợp bạn dùng biểu tượng mặc định của Bootstrap (navbar-toggler-icon) */
    .navbar-toggler-icon {
        filter: invert(1) brightness(100%); /* Hiệu ứng đảo ngược màu sang trắng */
    }

}






/* Chỉ kích hoạt hiệu ứng hover trên màn hình máy tính */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Xóa khoảng cách để chuột di chuyển mượt mà */
        visibility: visible;
        opacity: 1;
        transition: all 0.3s ease;
    }

    /* Hiệu ứng mờ dần (optional) */
    .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }
}
/* Hiển thị mũi tên dropdown */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Tùy chỉnh menu thả xuống */
.dropdown-menu {
    border-radius: 8px;
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0085a1; /* Màu chủ đạo của theme */
}

/* Hiệu ứng khi di chuột trên Desktop */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
@media (max-width: 1180px) {
    .nav-menu {
        display: none;
    }
    /* Ẩn menu ngang */
    .menu-hamburger {
        display: block;
    }
    /* Hiện nút Menu như ở hình 820px */
}


.hero-section {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('your-image.jpg');
    background-size: cover;
    min-height: 600px; /* Đảm bảo đủ khoảng trống cho text */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tông màu xám xi măng & Trắng sứ */
:root {
    --glass-bg: rgba(108, 117, 125, 0.6);
    --main-text: #2c3e50;
    --accent: #f39c12;
}

/* Navbar mờ ảo kiểu iPhone */
#mainNav.fixed-top {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease;
    color:white;
}

/* Fix lỗi logo và chữ bị sát mép */
.navbar-brand img {
    height: 45px !important;
    width: auto;
    object-fit: contain;
}

/* TIÊU ĐỀ CHÍNH: Dùng clamp để chữ tự nhỏ lại trên mobile mà không nhảy dòng */
.site-heading h1 {
    font-size: clamp(1.8rem, 8vw, 4.5rem) !important;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}

.site-heading .subheading {
    font-size: clamp(0.9rem, 3vw, 1.4rem) !important;
    font-weight: 300 !important;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* Lớp phủ cho ảnh banner sâu và chuyên nghiệp hơn */
.custom-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}
/* Áp dụng cho mọi trạng thái của Navbar */
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-brand {
    color: #ffffff !important; /* Luôn giữ màu trắng */
    opacity: 1 !important;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.3); /* Giúp chữ nổi bật hơn trên nền xám */
    transition: color 0.3s ease;
}

    /* Hiệu ứng khi di chuột (Hover) */
    #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
        color: #f39c12 !important; /* Đổi sang màu vàng cam khi hover cho sang */
    }

/* Xử lý riêng cho trạng thái cuộn lên của theme Clean Blog */
#mainNav.is-fixed .nav-link,
#mainNav.is-visible .nav-link {
    color: #ffffff !important;
}


/*///////PRODUCT///////*/


.product-container{
    padding-top:100px;
}
/* 1. KHUNG TỔNG THỂ: Giữ nền trắng để ảnh nổi bật */
.product-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(108, 117, 125, 0.2) !important; /* Viền xám định hình khung */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
}
/*hiện 2 dòng chữ của ảnh nổi bật*/
.product-title-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Cho phép hiện 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3rem; /* Đảm bảo các Card luôn bằng chiều cao nhau */
}
/* 2. BODY CARD: Thêm màu sắc nhẹ nhàng khi CHƯA HOVER */
.product-card .card-body {
    /* Màu xám xi măng cực nhạt, tạo chiều sâu so với nền trang */
    background-color: #f8f9fa !important; 
    padding: 1.5rem !important;
    border-top: 1px solid rgba(108, 117, 125, 0.1); /* Đường kẻ mờ ngăn cách với ảnh */
    transition: background-color 0.4s ease;
}

/* 3. KHI HOVER: Đổi màu body sang trắng để tạo hiệu ứng "bừng sáng" */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: #f39c12 !important; /* Viền chuyển sang màu vàng điểm nhấn */
}

.product-card:hover .card-body {
    background-color: #ffffff !important; /* Chuyển sang trắng tinh khôi khi tương tác */
}

/* 4. NÚT BẤM: Luôn có màu xám đậm để nổi bật trên nền nhạt */
.product-card .btn-outline-dark {
    border: 1.5px solid #4b555c !important; /* Màu xám đặc trưng của nhôm */
    color: #4b555c !important;
    background: transparent;
    font-weight: 700;
}

.product-card:hover .btn-outline-dark {
    background-color: #f39c12 !important; /* Vàng hổ phách cho nút khi hover */
    border-color: #f39c12 !important;
    color: #fff !important;
}



/*//////////////////////Footer///////////////////*/
footer {
    background-color: #212529 !important; /* Màu xám đen sang trọng */
    border-top: 3px solid #f39c12; /* Đường kẻ vàng làm điểm nhấn */
}

    footer a {
        transition: all 0.3s ease;
        opacity: 0.8;
    }
    
        footer a:hover {
            opacity: 1;
            color: #f39c12 !important; /* Đổi màu vàng khi hover */
            padding-left: 5px; /* Hiệu ứng dịch chuyển nhẹ */
        }

    footer h5 {
        letter-spacing: 1px;
    }


/*Tư vấn 
*/
.tu-van-container {
    
    margin-top: 120px !important;
    border-top: 5px solid #f39c12; /* Thêm một cái viền cam ở trên cho chuyên nghiệp */
}





/*About Us Trang chủ*/

/* Hiệu ứng badge kinh nghiệm */
.experience-badge {
    bottom: -20px;
    right: -20px;
    color: #2c3e50;
    min-width: 150px;
    z-index: 5;
}

/* Hiệu ứng đổ bóng và bo góc cho ảnh giới thiệu */
#about-us img {
    transition: transform 0.5s ease;
}

#about-us .position-relative:hover img {
    transform: scale(1.02);
}

/* Layout responsive cho mobile */
@media (max-width: 991.98px) {
    .experience-badge {
        bottom: 10px;
        right: 10px;
        padding: 1rem !important;
    }
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*nút xem tất cả sản phẩm trên trang chủ*/
.view-all-btn {
    background-color: #f39c12 !important;
    border: none;
    color: #fff !important;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

    .view-all-btn:hover {
        background-color: #2c3e50 !important;
        color: #f39c12 !important;
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }




/* gọi điện thoại nhanh cuối góc bên phải   ////////////////////////*/
/* Style cho nút điện thoại lắc lắc */
/* Container chứa các nút liên hệ */
/* Container chứa cả cụm nút */
.contact-stack {
    position: fixed;
    right: 30px;
    bottom: 90px; /* Nằm trên nút Back-to-top */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2000;
}

/* Style chung cho từng nút */
.contact-item {
    width: 50px; /* Tăng nhẹ kích thước để dễ bấm trên mobile */
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    animation: contact-shake 2s infinite; /* Hiệu ứng lắc đồng bộ */
    text-decoration: none !important;
}

/* Nút Zalo: Nền trắng để nổi bật logo xanh */
.zalo-btn {
    background-color: #fff;
    border: 1px solid #0084ff;
}

/* Nút Hotline: Xanh lá truyền thống */
.phone-btn {
    background-color: #25d366;
    color: white;
    font-size: 22px;
}

/* Hiệu ứng Hover */
.contact-item:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Vòng tròn lan tỏa (Pulse effect) */
.contact-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    animation: contact-pulse 1.8s infinite;
}

.zalo-btn::before {
    background-color: rgba(0, 132, 255, 0.4);
}

.phone-btn::before {
    background-color: rgba(37, 211, 102, 0.4);
}

/* Keyframes: Lắc điện thoại chuyên nghiệp */
@keyframes contact-shake {
    0%, 100% {
        transform: rotate(0);
    }

    10%, 30%, 50% {
        transform: rotate(-15deg);
    }

    20%, 40%, 60% {
        transform: rotate(15deg);
    }
}

/* Keyframes: Vòng lan tỏa */
@keyframes contact-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}



/*///////////////////////////POP UP//////////////////*/
#welcomePopup .modal-content {
    background-color: rgba(255, 252, 245, 0.98) !important; /* Đồng bộ màu kem nhạt */
}

#welcomePopup .modal-header {
    background: linear-gradient(45deg, #f39c12, #e67e22) !important; /* Hiệu ứng cam rực rỡ */
}

#welcomePopup .form-control:focus {
    box-shadow: none;
    background-color: #fff !important;
    border: 1px solid #f39c12 !important;
}

/* Hiệu ứng rung cho icon quà tặng */
.animate__bounceIn {
    animation: bounceIn 1s;
}