@import "https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900|Lora:400,400i,700,700i|Dancing+Script:400,700|PT+Serif:400,400i,700,700i|Playfair+Display:400,400i,700,700i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i";

/* ============================================ !! ============================================ */

/* =============== General ================= */

* {
    box-sizing: border-box;

    margin: 0;

    padding: 0;
}

html {
    font-family: "Poppins", sans-serif;

    text-rendering: optimizeLegibility;

    font-size: 16px;

    color: #000;

    scroll-behavior: smooth;
}

html,
body {
    max-width: 100%;

    overflow-x: hidden;

    position: relative;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #aaa;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

#overlay {
    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 9999999999999;
}

/* Special Offer Banner */

.special-offer {
    position: relative;

    width: 100%;

    height: 350px;

    /* background-color: #ff99cc; */

    color: #fff;

    text-align: center;

    /* padding: 10px; */

    font-size: 14px;

    font-weight: bold;

    z-index: 1000;

    overflow: hidden;
}

.offer-slide {
    position: relative;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: none;
}

.offer-slide.active {
    display: block;
}

.special-offer .offer-slide .background-img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    opacity: 0.8;

    /* Tăng nhẹ độ trong suốt để ảnh nền vẫn hiển thị */

    filter: blur(1.5px) brightness(80%);

    /* Áp dụng hiệu ứng làm mờ và làm tối */
}

.special-offer .offer-slide .foreground-img {
    width: auto;

    height: 90%;

    max-width: 50%;

    margin: 0 auto;

    position: absolute;

    top: 50%;

    left: 25%;

    transform: translateY(-50%);

    z-index: 2;

    filter: brightness(100%);

    /* Giữ ảnh phía trước sáng rõ */

    border-radius: 10px;

    filter: drop-shadow(0 0 0.75rem rgb(61, 59, 61));
}

.special-offer .offer-slide .foreground-img:hover {
    transform: translateY(-50%) scale(1.05);

    filter: brightness(100%) drop-shadow(0 0 1rem rgb(61, 59, 61));

    transition: all 0.3s ease-in-out;
}

/* Mobile */

@media (max-width: 768px) {
    .special-offer .offer-slide .foreground-img {
        max-width: 85%;

        /* Increase max-width for a larger appearance */

        height: 80%;

        /* Increase height to make the image taller */

        left: 7.5%;

        /* Adjust left position to center the larger image */
    }

    .special-offer .offer-slide .foreground-img img {
        max-width: 70%;

        height: auto;

        left: 15%;
    }
}

.special-offer .offer-slide .content {
    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;

    padding: 20px;

    color: #020202;

    max-width: 100%;

    text-align: center;
}

/* .special-offer .close-offer {



    position: absolute;



    right: 5px;



    top: 5%;



    transform: translateY(-50%);



    cursor: pointer;



    color: #fff;



    display: block;



    z-index: 3;



} */

.page-wrapper {
    padding-top: 0 !important;
}

.special-offer .offer-controls {
    position: absolute;

    top: 50%;

    width: 100%;

    display: flex;

    justify-content: space-between;

    transform: translateY(-50%);

    z-index: 3;

    padding: 0 20px;
}

.special-offer .offer-controls button {
    background-color: rgba(0, 0, 0, 0.4);

    border: none;

    color: #fff;

    font-size: 24px;

    padding: 10px 15px;

    cursor: pointer;

    border-radius: 50%;

    transition: background-color 0.3s ease;
}

.special-offer .offer-controls button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ============================================ !! ============================================ */

/* =============== Loader ================= */

.loader {
    background-color: #fff;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 99999;
}

.loader-inner {
    display: flex;

    position: absolute;

    width: 8rem;

    height: 8rem;

    left: 50%;

    top: 50%;

    margin: -4rem 0 0 -4rem;
}

/* ============== scroll top ============= */

.scroll-top.link-text {
    color: #f96882;

    position: fixed;

    bottom: 150px;

    right: 30px;

    transform: rotate(-90deg);

    z-index: 1;

    visibility: hidden;

    opacity: 0;
}

/* ============================================ !! ============================================ */

/* ============== Reusable =============== */

li {
    list-style: none !important;
}

a,
a:hover,
a:active {
    outline: none !important;

    text-decoration: none !important;
}

img {
    vertical-align: middle;
}

.logo-menu {
    width: auto;

    height: 250px;

    margin-top: 20px;

    transition: all 0.3s ease;

    object-fit: contain;
}

/* Khi thanh menu chuyển sang sticky */

nav.nav-sticky .logo-menu {
    height: 200px;

    margin-top: 0px;

    /* Kích thước nhỏ hơn */
}

.spacer-clearfix {
    width: 100%;
}

.section-title {
    font-family: Playfair Display;

    text-transform: capitalize;

    font-size: 36px;

    letter-spacing: 0.6px;

    margin-bottom: 15px;

    position: relative;

    text-align: center;
}

.section-title::after {
    content: " ";

    width: 50px;

    height: 2px;

    background-color: #f96882 !important;

    display: block;

    margin: 0 auto;

    margin-top: 15px;
}

.text-linear-effect {
    background-image: linear-gradient(90deg, #f96882, #f96882 50%, #241d26 0);

    background-size: 200% 100%;

    background-position: 100%;

    -webkit-background-clip: text;

    background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    transition: all ease 1s;
}

.text-linear-effect:hover {
    background-position: 0;
}

.price {
    font-family: "Playfair Display", sans-serif;

    font-variant-numeric: lining-nums;

    color: #f96882;

    margin-right: 15px;

    align-items: center;
}

/* ============================================ !! ============================================ */

/* Header */

/* header#home {



    position: relative;



    height: 450px !important;



    background: url('/imgs/featured-bg.jpg') no-repeat center center;



    background-size: cover;



} */

header#home nav {
    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 130px;

    z-index: 10;
}

/* Thanh menu cố định khi cuộn */

nav.nav-sticky {
    position: fixed !important;

    top: 0;

    left: 0;

    width: 100%;

    height: 130px;

    background-color: rgba(0, 0, 0, 0.9);

    /* Nền tối để nổi bật khi cuộn */

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Hiệu ứng bóng */

    z-index: 1000;

    transition: background-color 0.3s ease;
}

/* Đảm bảo nội dung không bị che bởi thanh menu cố định */

body {
    padding-top: 0;
}

/* Banner Slider */

.banner-slider {
    position: absolute;

    bottom: 0;

    width: 100%;

    height: 200px;

    overflow: hidden;

    z-index: 5;

    /* Đảm bảo banner nằm trên các phần tử khác */
}

.banner-slide {
    width: 100%;

    height: 200px;

    display: block !important;
}

.banner-slide img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    /* Đảm bảo hình ảnh lấp đầy khung mà không méo */

    background: rgba(0, 0, 0, 0.5);

    /* Nền tối để tăng độ tương phản */
}

/* Slick Slider Dots */

.banner-slider .slick-dots {
    bottom: 10px;

    text-align: center;
}

.banner-slider .slick-dots li {
    margin: 0 5px;
}

.banner-slider .slick-dots li button:before {
    font-size: 10px;

    color: #fff;

    opacity: 0.75;
}

.banner-slider .slick-dots li.slick-active button:before {
    color: #ff6f61;

    opacity: 1;
}

/* Loại các chấm nhỏ phía dưới các slide dots - 9/5/2025 */

.slick-dots {
    display: none !important;
}

/* Responsive adjustments */

@media (max-width: 768px) {
    .banner-slider {
        height: 150px;

        /* Giảm chiều cao cho mobile */
    }

    .banner-slide {
        height: 150px;
    }
}

/* ============== Header ================= */

header {
    position: relative;

    width: 100%;

    height: 840px;
}

/* logo =========== */

.main-logo {
    margin-left: 40px;
}

.footer-logo {
    height: 130px;

    /* hoặc chiều cao bạn mong muốn */

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    /* ẩn phần dư nếu ảnh quá lớn */
}

.footer-copyright {
    color: white;
}

.footer-logo img {
    height: 210px;

    /* ảnh cao bằng khung */

    /* giữ đúng tỉ lệ */

    object-fit: cover;

    /* hoặc cover nếu muốn ảnh phủ đều */
}

/* main-nav mobile */

.mobile-nav-icon {
    color: #fff !important;

    border: none !important;

    outline: none !important;

    margin-right: 20px;

    transition: all ease 0.35s;
}

/* Hover effect for the mobile navigation icon */

.mobile-nav-icon:hover {
    transform: scale(1.25);
}

/* Mobile navigation menu styling */

#main-nav-mobile {
    margin-top: 2px;

    transition: all ease 0.5s;
}

/* Styling for each list item in the mobile navigation menu */

#main-nav-mobile ul li {
    text-align: center;

    background-color: #241d26;

    border-bottom: 1px solid #2e2c2f;

    width: 100%;
}

/* Styling for links in the mobile navigation menu */

#main-nav-mobile ul li a {
    padding: 20px 0 !important;

    text-transform: uppercase;

    font-size: 16px;
}

/* Remove the default "after" pseudo-element for links */

#main-nav-mobile ul li a::after {
    display: none;
}

/* navigation ===== */

nav {
    z-index: 2;
}

.main-nav {
    justify-content: center;

    margin-right: 150px;
}

.menu-item {
    padding: 0 30px;

    position: relative;
}

.menu-item>a {
    font-size: 18px;

    color: #fff !important;

    letter-spacing: 0.3px;

    font-weight: 500;

    position: relative;

    padding: 45px 0 !important;
}

.menu-item>a::after {
    content: "";

    background-color: #fff;

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    transform: translateY(70px);

    height: 1px;

    transition: all 0.35s ease-in;
}

.menu-item:hover>a::after,
.menu-item:active>a::after,
.menu-item-current>a::after {
    width: 100%;
}

/* sticky */

nav.nav-sticky {
    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: rgba(36, 29, 38, 1);

    padding-top: 0 !important;

    padding-bottom: 0;

    transition: all ease 0.35s;
}

.nav-sticky .main-logo {
    padding: 15px 0;
}

.nav-sticky .menu-item:first-child {
    border-top: 1px solid #2e2c2f;
}

/* sub-menu ====== */

.sub-menu {
    background-color: #241d26;

    position: absolute;

    width: 200px;

    box-shadow: 0 0 2px 2px rgba(21, 17, 22, 0.2);

    left: -5px;

    opacity: 0;

    visibility: hidden;
}

.sub-menu li {
    padding: 12px 0;

    border-bottom: 1px solid #2e2c2f;
}

.sub-menu li a {
    color: #fff;

    font-size: 16px;

    transition: all ease-in 0.35s;

    padding-left: 30px;
}

.sub-menu li a:hover,
.sub-menu li a:active {
    text-decoration: none;

    color: #f96882 !important;
}

.menu-item-has-child:hover>.sub-menu {
    opacity: 1;

    visibility: visible;

    transition: all ease-in 0.35s;
}

.icon-dropdown {
    font-size: 110%;

    position: absolute;

    right: 0;
}

/* nav icon ===== */

.nav-icon {
    font-size: 28px;

    color: #fff;

    padding-right: 40px;
}

.nav-icon:hover {
    font-size: 32px;

    transition: all ease 0.35s;
}

.search-form {
    position: fixed;

    top: 0;

    left: 0;

    background-color: #000;

    width: 100%;

    height: 100vh;

    z-index: 10000000000;

    opacity: 0;

    visibility: hidden;

    transition: all ease 0.35s;
}

.close-search {
    color: #999;

    font-size: 200%;

    position: absolute;

    top: 5%;

    left: 95%;

    transition: all ease 0.35s;
}

.close-search:hover,
.close-search:active {
    color: #fff;

    font-size: 220%;
}

.search-input {
    position: absolute;

    top: 45%;

    left: 50%;

    width: 40%;

    transform: translateX(-50%);

    margin-top: -100px;
}

.search-input input {
    width: 100%;

    background-color: transparent;

    text-align: center;

    color: #fff;

    font-size: 250%;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;

    border: 0;

    outline: none;
}

/* menu popup ===== */

.menu-popup {
    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    background-color: #fff;

    width: 0;

    /* Không cần px nếu giá trị là 0 */

    transition: all ease 0.5s;

    z-index: 1000;
}

.close-icon {
    position: relative;

    left: 400px;
}

.close-icon i {
    width: 50px;

    line-height: 50px;

    font-weight: 300;

    background-color: #f96882;

    font-size: 20px;

    color: #fff;

    text-align: center;
}

.close-icon i:hover {
    background-color: #f8889d;
}

.content-wrap {
    padding: 0 70px;

    margin-top: 50px;
}

.content-wrap .title {
    font-family: Playfair Display;

    text-transform: uppercase;

    font-weight: 700;

    margin-bottom: 20px;
}

.content-wrap .text {
    font-size: 14px;

    line-height: 25px;

    color: #888;

    letter-spacing: 0.3px;
}

.content-wrap img {
    width: 100%;

    margin: 30px 0 40px;
}

.content-wrap h2 {
    font-size: 130%;

    font-weight: 900;
}

.contact-popup-info span {
    font-family: "Playfair Display", sans-serif;

    font-size: 18px;

    font-weight: 400;

    color: #404040;

    letter-spacing: 0.7px;
}

.contact-popup-info div {
    margin-bottom: 10px;
}

.social-media-icons {
    margin-top: 30px;
}

.social-media {
    display: inline-block;

    width: 50px;

    line-height: 50px;

    background-color: #ddd;

    text-align: center;

    border-radius: 50%;

    transition: all 0.5s;

    margin-right: 10px;
}

.social-popup-icon {
    color: #000;

    transition: all 0.5s;
}

.social-media:hover {
    background-color: #f96882;

    transform: scale(1.2);
}

.social-media:hover a {
    color: #fff;
}

/* Slide show */

.slide-wrap {
    position: absolute;

    top: 0;

    z-index: 1;

    height: 100%;

    width: 100%;

    overflow: hidden;
}

.slide-item {
    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;
}

.slide-item.active {
    opacity: 1;

    visibility: visible;
}

.slide-item img {
    object-fit: cover;

    width: 100vw;

    height: 840px;
}

.slide-control {
    position: absolute;

    top: 50%;

    font-family: "PT Serif", serif;

    text-transform: uppercase;

    color: #fff;

    font-size: 18px;

    letter-spacing: 6px;

    padding: 0 50px;

    transition: all ease-in-out 0.35s;
}

.slide-control:hover {
    color: #fa97a9;
}

.slide-control#prev-slide {
    transform: rotate(-90deg);
}

.slide-control#prev-slide::after {
    content: "prev";

    position: absolute;

    bottom: -30px;

    right: 25%;
}

.slide-control#next-slide {
    right: 0;

    transform: rotate(90deg);
}

.slide-control#next-slide::after {
    content: "next";

    position: absolute;

    bottom: -30px;

    right: 25%;
}

.slide-dot {
    display: flex;

    position: absolute;

    bottom: 20px;

    left: 50%;

    margin-left: -60px;
}

.slide-dot li {
    background-color: #fff;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    margin-left: 20px;
}

.slide-dot li.active {
    background-color: #f96882;
}

/* slide text */

.slide-text {
    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: -440px;

    margin-top: -160.5px;

    font-family: "Playfair Display", sans-serif;

    text-align: center;

    color: #fff;

    line-height: 1;

    max-width: 880px;

    text-shadow: 0.3px 0.3px #444;

    visibility: hidden;
}

.slide-text h3 {
    font-size: 38px;

    letter-spacing: 1.2px;

    margin: 0 0 20px;
}

.slide-text h1 {
    font-size: 80px;

    font-weight: 700;

    margin: 0 0 20px;
}

.slide-text p {
    font-size: 18px;

    letter-spacing: 0.7px;

    line-height: 30px;

    margin: 0 auto;

    margin-bottom: 30px;
}

.book-now-btn {
    background-color: #f96882 !important;

    font-family: "Poppins", sans-serif;

    color: #fff !important;

    border-radius: 0 !important;

    text-transform: uppercase;

    padding: 12px 45px !important;

    letter-spacing: 0.8px;
}

.book-now-btn:hover,
.book-now-btn:active {
    background-color: #241d26 !important;

    transition: all ease 0.55s;

    outline: none !important;
}

/* ============================================ !! ============================================ */

/* ============================================ Services section ============================== */

.services-info {
    text-align: center;

    margin-bottom: 60px;
}

.services-main-text {
    max-width: 570px;

    margin-top: 35px !important;

    margin: 0 auto;

    line-height: 30px;

    font-size: 18px;

    color: #4f4d50;
}

.service {
    text-align: center;
}

.services-icon-wrap {
    color: #f96882;

    font-size: 500%;

    transition: all ease 0.5s;
}

.services-icon-wrap:hover {
    transform: translate3d(-5px, -5px, 0) scale(1.1);
}

.service .heading {
    font-family: Playfair Display;

    margin: 18px 0 15px;

    font-size: 22px;

    letter-spacing: 0.7px;
}

.service .description {
    color: #7c787d;

    font-size: 16px;

    line-height: 26px;
}

/* =================== Thêm trang Sản phẩm - Dịch vụ - 15/5/2025 ====================== */

.btn-see-all {
    color: #ffffff;

    background-color: #828282;

    height: 38px;

    padding: 0 16px;

    border: none;

    margin: 10px 0px;

    border-radius: 18px;
}

.btn-see-all:hover {
    background-color: #bbbbbb;

    color: black;
}

.products-slider,
.services-slider {
    width: 100%;
}

.products-img,
.services-img {
    display: flex;

    flex-wrap: wrap;
}

.products-img img,
.services-img img {
    width: 100%;

    max-height: 430px;
    object-fit: cover;
}

.products-banner,
.services-banner {
    position: relative;

    height: 100px;

    background-color: #f0f0f0;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 40px;

    font-weight: bold;

    color: #4f4f4f;
}

.products-sidebar,
.services-sidebar {
    width: 20%;

    height: 1262px;

    margin: 0 10px;

    background-color: white;

    padding: 1rem;

    border-radius: 0.5rem;

    box-shadow: 0 1px 3px rgba(0 0 0 / 10%);
}

.products-sidebar h2,
.services-sidebar h2 {
    font-size: 18px;
}

.keyword-list {
    display: flex;

    flex-wrap: wrap;

    gap: 4px;
}

.keyword-tag {
    display: flex;

    align-items: center;

    background-color: #e8e8e8;

    border: none;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 12px;
}

.keyword-tag button {
    margin-left: 0.5rem;

    background: none;

    border: none;

    cursor: pointer;

    font-size: 12px;

    color: #6b7280;

    align-items: center;
}

.filter-list label {
    display: flex !important;

    align-items: center;

    margin: 4px 0;

    font-size: 12px;
}

.filter-list input {
    margin-right: 6px;
}

.products-striking,
.services-striking {
    width: 76.4%;

    margin: 0 10px;
}

.products-header,
.striking-header {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.products-search,
.striking-search {
    align-content: center;

    width: 50%;

    height: 36px;

    border: 1px solid #b4b4b4;

    border-radius: 20px;

    background-color: white;

    display: flex;

    align-items: center;

    justify-content: space-evenly;
}

.products-search input,
.striking-search input {
    border: none;

    margin: 0 20px;

    width: 70%;
}

.products-search i,
.striking-search i {
    /* margin-left: 10%; */

    color: #808080;
}

.products-button button,
.striking-button button {
    color: #808080;
}

.products-btn,
.services-btn {
    height: 26px;

    font-size: 12px;

    padding: 0 8px;

    border-radius: 6px;

    border: none;
}

.products-center,
.striking-center {
    display: flex;

    justify-content: end;
}

.products-list,
.services-list {
    display: grid;

    grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.services-list-all {
    display: grid;

    grid-template-columns: repeat(4, minmax(250px, 1fr));
}

.products-item,
.service-item {
    position: relative;

    margin: 6px 12px;

    width: 250px;

    height: 380px;

    padding: 10px;

    background-color: #fcfcfc;

    border: 1px solid #c7c7c7;

    border-radius: 8px;

    color: black;

    overflow: hidden;
}

.products-item-img,
.service-item-img,
.category-item-img {
    width: 100%;

    height: 240px;

    background-color: #ffffff;

    margin-bottom: 10px;

    position: relative;

    overflow: hidden;
    /* 
    img {
        object-fit: cover;
        alt {

            max-width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            overflow: hidden;
        } */
}

.products-item-img img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}

.products-item h3,
.service-item h3 {
    font-size: 16px;

    color: black;
}

.products-item p.product-item-detail {
    max-width: 100%;

    font-size: 12px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    line-clamp: 2;

    -webkit-box-orient: vertical;
}

.price {
    display: flex;

    justify-content: space-between;

    margin: 0;

    color: #444;
}

.price-new {
    font-size: 18px;
}

.price-old {
    font-size: 14px;

    text-decoration: line-through;
}

.discount-badge {
    display: flex;

    position: absolute;

    top: -1px;

    left: -1px;

    background-color: #b0b0b0;

    color: black;

    padding: 0.25rem 0.5rem;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: bold;
}

@media (max-width: 768px) {
    .discount-badge {
        font-size: 0.65rem;
        /* Giảm kích thước chữ trên di động */
        padding: 0.3rem 0.6rem;
        /* Giảm padding trên di động */
    }
}

/* Responsive adjustments */

@media (max-width: 768px) {
    .products-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .products-item {
        width: 200px;

        height: 300px;
    }

    .products-item-img {
        height: 220px;
    }
}

.products-category,
.services-category {
    margin: 0 15px;
}

/* .products-category-list, */

.services-category-list {
    display: grid;

    grid-template-columns: repeat(4, minmax(250px, 1fr));

    /* Cố định 4 cột */

    gap: 1.5rem;
}

.category-header h2 {
    font-size: 40px;

    margin: 20px 10px;
}

.category-item {
    position: relative;

    margin: 6px 12px;

    height: 380px;

    padding: 10px;

    background-color: #fcfcfc;

    border: 1px solid #c7c7c7;

    border-radius: 8px;

    color: black;

    overflow: hidden;
}

.category-item h3 {
    font-size: 16px;
}

.category-item p {
    max-width: 100%;

    font-size: 12px;

    overflow: hidden;

    text-overflow: ellipsis;
}

.products-organic,
.services-organic {
    display: flex;

    width: 100%;

    height: 550px;

    background-color: #cdcdcd;

    border-radius: 50px;
}

/* =========== Trang Đặt lịch 17/5/2025 ============= */

.services-book-main {
    background-color: #e1e1e1;
}

.products-detail {
    display: flex;

    justify-content: center;

    background-color: #d3d3d3;

    width: 100%;

    height: 340px;

    padding: 15px 5px;

    border-radius: 16px;
}

.services-booking {
    display: flex;

    justify-content: center;

    width: 100%;

    height: 600px;

    background-color: #e1e1e1;
}

.form-booking {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 20px;

    /* margin: 20px 0; */
}

.products-detail-img {
    height: 310px;

    background-color: #444;

    border-radius: 16px;

    overflow: hidden;
}

.services-book-img {
    width: 350px;

    height: 100%;

    background-color: #444;

    border-radius: 16px;

    overflow: hidden;
}

.products-detail-img img,
.services-book-img img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}

.services-book-information {
    width: 350px;

    height: 100%;
}

.services-book-information h3 {
    font-size: 28px;

    text-align: center;
}

.services-book-information .price-service {
    font-family: "Playfair Display", sans-serif;

    font-variant-numeric: lining-nums;

    font-size: 40px;

    text-align: center;
}

.products-detail-form {
    height: 100%;

    background-color: white;

    border-radius: 16px;

    padding: 20px;
}

.services-book-form {
    width: 350px;

    height: 100%;

    background-color: white;

    border-radius: 16px;

    object-fit: cover;

    padding: 20px;
}

.form-infor {
    height: 465px;

    background-color: #444;

    border-radius: 16px;

    color: white;

    padding: 20px;

    /* overflow: hidden; */
}

.infor-service li {
    list-style: disc !important;

    margin-left: 26px;

    margin-bottom: 6px;

    display: -webkit-box;

    -webkit-line-clamp: 4;
    line-clamp: 4;

    /* Giới hạn tối đa 4 dòng */

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 8px;

    border: 1px solid #ccc;

    border-radius: 4px;

    font-size: 14px;
}

.form-group textarea {
    resize: none;

    height: 100px;
}

.form-group button {
    background-color: #1a1a1a;

    color: #fff;

    padding: 10px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-size: 14px;

    width: 100%;
}

.product-form {
    display: flex;

    gap: 10px;
}

.product-form select {
    padding: 8px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 14px;

    width: 100px;
}

.product-detail-box {
    flex: 1;

    margin: 0 10px;

    display: flex;

    flex-direction: column;
}

.product-detail-box select {
    width: 100%;

    padding: 8px 12px;

    font-size: 16px;

    border-radius: 6px;

    border: 1px solid #ccc;
}

.product-buttons {
    display: flex;

    gap: 20px;

    text-align: center;
}

.detail-btn {
    flex: 1;

    margin-top: 10px;

    padding: 6px 12px;

    font-size: 16px;

    border: none;

    border-radius: 8px;

    background-color: #444;

    color: #fff;

    cursor: pointer;

    transition: background-color 0.3s ease;
}

.detail-btn:hover {
    background-color: #d3d3d3;

    color: black;
}

/* ============================================ !! ============================================ */

/* ============================================ About section ============================== */

.about-section {
    position: relative;
}

.video-box {
    background-image: url("/imgs/about-1.jpg");

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    padding: 0 !important;

    max-height: 100%;

    position: relative;
}

.play-btn,
.play-btn:hover {
    background-color: #fff;

    width: 90px;

    height: 90px;

    font-size: 24px;

    color: #f96882;

    line-height: 90px;

    border-radius: 50%;

    text-align: center;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;
}

.play-btn::after,
.play-btn::before {
    content: "";

    background-color: rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    position: absolute;

    top: -30px;

    left: -30px;

    bottom: -30px;

    right: -30px;
}

.video-embed {
    position: fixed;

    width: 60%;

    height: 500px;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

    z-index: 99999999999;

    display: none;
}

.close-btn i {
    width: 50px;

    line-height: 50px;

    font-weight: 300;

    background-color: rgba(0, 0, 0, 0.7);

    font-size: 20px;

    color: #fff;

    text-align: center;

    transition: all ease 0.35s;
}

.close-btn i:hover {
    background-color: rgba(36, 28, 39, 0.9);
}

.close-btn {
    position: fixed;

    top: 18%;

    right: 20%;

    z-index: 99999999999999999;

    display: none;
}

.about-main-text {
    padding: 80px 15% 90px 60px !important;

    background-color: #f1f1f1;
}

.about-main-text h2,
.about-main-text h2::after {
    text-align: left;

    margin-left: 0;
}

.about-main-text .sub-heading {
    font-family: "Playfair Display", sans-serif;

    font-size: 18px;

    line-height: 32px;

    margin: 10px 0 30px;

    color: #4f4d50;

    letter-spacing: 0.4px;

    text-align: left;
}

.about-main-text p {
    color: #999;

    letter-spacing: 0.3px;

    font-size: 18px;

    margin-bottom: 30px;
}

.link-text {
    text-transform: uppercase;

    font-family: Playfair Display;

    font-weight: 700;

    transition: all 0.6s !important;

    position: relative;

    margin-left: 40px;
}

.link-text.text-linear-effect {
    background-image: linear-gradient(90deg, #241d26, #241d26 50%, #f96882 0);
}

.link-text::before {
    content: "";

    width: 30px;

    height: 1px;

    position: absolute;

    left: -40px;

    top: 50%;

    background-color: #f96882;
}

/* ============================================ !! ============================================ */

/* ======================== Testimonial section ============================ */

.slick-slide {
    outline: none;
}

.slick-center img {
    opacity: 1 !important;

    width: 80px !important;

    transform: translate3d(-10px, -20px, 0);
}

.slick-slide-cite p {
    font-family: "Lora", sans-serif;

    font-size: 22px;

    line-height: 40px;

    color: #4f4d50;

    text-align: center;

    width: 100%;

    margin: 0 auto;

    padding-bottom: 40px;
}

.slick-slide-cite {
    max-width: 725px;

    margin: 0 auto;
}

.slick-slide-figure-img {
    width: 55%;

    margin: 0 auto;

    transition: all ease 0.8s;

    margin-bottom: 25px;
}

.slick-slide-figure-img img {
    width: 60px;

    padding: 20px 0;

    opacity: 0.8;
}

.slick-slide-figure-info {
    text-transform: capitalize;

    width: 55%;

    margin: 0 auto;
}

.slick-slide-figure-info .infomation {
    text-align: center;

    transform: translateX(-25px);
}

.slick-slide-figure-info .name {
    font-family: "Playfair Display", sans-serif;

    font-size: 22px;

    font-weight: 500;

    color: #241d26;

    letter-spacing: 0.4px;

    margin-bottom: 15px;
}

.slick-slide-figure-info .position {
    color: #f96882;
}

/* ============================================ !! ============================================ */

/* ======================== Pricing plan ============================ */

.sub-heading {
    text-align: center;

    font-size: 18px;

    font-weight: 400;

    color: #4f4d50;

    letter-spacing: 0.5px;

    max-width: 570px;

    margin: 30px auto 0;
}

.menu-filter {
    display: flex;

    width: 60%;

    margin: 0 auto;

    justify-content: space-around;

    border: 1px solid #bbb;

    border-radius: 30px;
}

.filter-item {
    font-family: "Playfair Display", sans-serif;

    font-size: 16px;

    color: #241d26;

    padding: 10px 0;

    cursor: pointer;
}

.filter-item.active {
    color: #f96882;

    transition: all ease 0.2s;
}

/* pricing item */

.pricing-plan.container {
    padding: 0;
}

.pricing-menu {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;
}

.pricing-item {
    width: 49%;

    display: flex;

    align-items: center;

    padding: 15px 0;

    border-bottom: 1px solid #ddd;
}

.pricing-item .logo i {
    font-size: 250%;

    color: #f96882;

    transition: all ease-in-out 0.5s;
}

.pricing-item .logo {
    background-color: #f3f3f3;

    border-radius: 50%;

    z-index: -2;

    padding: 20px;

    margin-left: 15px;

    position: relative;
}

.pricing-item .logo::after {
    content: "";

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    border-radius: 50%;

    z-index: -1;

    transform: scale(0);

    transition: all ease-in-out 0.5s;
}

.pricing-item:hover .logo::after {
    background-color: #f96882;

    transform: scale(1);
}

.pricing-item:hover .logo i {
    color: #fff;
}

.pricing-item .heading {
    flex-grow: 1;

    padding-left: 20px;
}

.pricing-item h4 {
    font-family: "Playfair Display", sans-serif;

    letter-spacing: 0.5px;

    font-size: 22px;
}

.pricing-item .price {
    font-size: 150%;
}

.pricing-item .description {
    color: #888;
}

.name-price-package .price {
    font-size: 24px;

    color: #f96882;
}

.features {
    list-style: none;

    padding: 0;
}

.feature-item {
    font-size: 16px;

    color: #7c787d;
}

.feature-item del {
    text-decoration: line-through;

    color: #aaa;
}

.purchase-btn {
    display: inline-block;

    color: #fff;

    background-color: #f96882;

    padding: 10px 20px;

    text-transform: uppercase;

    font-size: 14px;

    border-radius: 5px;

    transition: all 0.3s ease;
}

/* =========================== collection ============================= */

.collection {
    width: 100%;

    display: flex;

    flex-wrap: wrap;

    overflow-y: hidden;
}

.collect-item {
    width: 25%;

    position: relative;

    overflow: hidden;
}

.collect-item img {
    width: 100%;
}

.collect-item::before {
    content: "";

    color: #fff;

    font-family: "Playfair Display", sans-serif;

    width: 100%;

    height: 100%;

    background-color: rgba(249, 104, 130, 0.8);

    position: absolute;

    opacity: 0;
}

.plus-icon {
    position: absolute;

    top: 50%;

    left: 50%;

    margin: -1rem 0 0 -1rem;

    color: #fff;

    font-size: 2rem;

    display: none;
}

/* fixed slide when scrolling */

.mfp-container {
    position: fixed !important;
}

/* ============================ spa packages =============================== */

.spa-packages.container-fluid {
    background-color: #f5f5f5;
}

.spa-packages .container {
    padding: 0 !important;
}

.spa-packages .heading {
    margin-bottom: 70px;
}

.package-box {
    background-color: #fff;

    box-shadow: 0 0 25px 3px rgba(50, 50, 50, 0.1);

    padding-top: 60px;

    padding-bottom: 60px;

    transform: scale(0.9);
}

.package-box.center {
    transform: scaleY(0.96) translateY(-3%);
}

.name-price-package {
    text-transform: uppercase;

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 30px;
}

.name-price-package .price {
    font-size: 220%;

    line-height: 100px;
}

.features {
    text-align: center;

    margin-bottom: 40px;
}

.feature-item {
    font-size: 120%;

    line-height: 40px;

    letter-spacing: 0.5px;

    color: #7c787d;
}

.feature-item del {
    opacity: 0.6;
}

.purchase-btn {
    font-size: 20px;

    left: 50%;

    margin-left: -42px;
}

/* ========================= Counter section ====================== */

.counter-section {
    background-image: url("/imgs/pattern.png");

    background-position: center center;

    padding-top: 120px;

    padding-bottom: 120px;
}

.counter-section .container {
    max-width: 1200px;

    padding: 0;
}

.counter-section .heading {
    font-family: "Playfair Display", sans-serif;

    color: #fff;

    text-align: left;

    /* Back to the left */

    margin-left: -4.5vw;
}

.counter-section .pre-heading {
    font-size: 20px;

    font-style: italic;

    letter-spacing: 0.7px;

    text-transform: capitalize;

    margin-bottom: 15px;
}

.counter-section .main-heading {
    text-transform: uppercase;

    font-size: 70px;

    line-height: 70px;
}

.counter-section .sub-heading {
    max-width: 100%;

    font-family: "Playfair Display", serif;

    text-align: left;

    margin-left: 0;

    color: #eee;

    font-size: 16px;

    line-height: 30px;

    letter-spacing: 0.5px;
}

/* counter item ======*/

.counter-section .counter {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-content: center;

    /* Back to the right */

    transform: translateX(28%);
}

.counter-item {
    text-align: center;
}

.number {
    background-color: #fff;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    position: relative;

    /* align center */

    display: inline-block;
}

.number::before {
    content: "";

    border: 2px dashed #fff;

    border-radius: 50%;

    position: absolute;

    top: -10px;

    left: -10px;

    bottom: -10px;

    right: -10px;
}

.number span {
    font-size: 28px;

    font-weight: 700;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    margin-right: 0;
}

.counter-item .title {
    margin-top: 20px;

    color: #fff;

    font-weight: 400;

    letter-spacing: 0.7px;

    font-size: 24px;
}

/* ============================ Team section ======================== */

.team-item {
    max-width: 370px;

    max-height: 450px;

    margin: 0;

    /* Sửa: Bỏ margin-right để Slick slider tự xử lý khoảng cách */

    position: relative;

    overflow: hidden;
}

.team-slider {
    max-width: 1200px;

    /* Phù hợp với container */

    margin: 0 auto;

    /* Căn giữa */
}

/* Thêm: Đảm bảo khoảng cách giữa các slide */

.team-slider .slick-slide {
    margin: 0 15px;

    /* Khoảng cách đều 15px giữa các slide */
}

.team-item .infomation {
    font-family: "Playfair";

    width: 100%;

    position: absolute;

    bottom: 20px;

    text-align: center;

    margin: 0 auto;
}

.team-item .infomation .name {
    color: #fff;

    font-size: 26px;

    letter-spacing: 0.7px;
}

.team-item .infomation .position {
    text-transform: uppercase;

    font-size: 14px;

    color: rgba(255, 255, 255, 0.7);
}

.team-item .social-media-icons {
    display: flex;

    flex-direction: column;

    position: absolute;

    right: 20px;

    top: 0;

    opacity: 0;

    transform: translateX(200%);

    transition: all ease 0.5s;
}

.team-item .social-media {
    width: 40px;

    line-height: 40px;

    margin-bottom: 15px;

    background-color: #fff;
}

.team-item .social-media:hover {
    background-color: #f96882;
}

.team-item img {
    transition: all ease 0.5s;

    max-width: 100%;
}

.team-item:hover img {
    filter: blur(3px);

    transform: scale(1.1, 1.1);
}

.team-item:hover .social-media-icons {
    transform: translateX(0);

    opacity: 1;
}

/* =============================== latest blog post ============================ */

.latest-blog {
    background-color: #f5f5f5;

    padding: 60px 0;
}

.latest-blog .container {
    max-width: 1200px;
}

.latest-blog .post-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}

.latest-blog .post-box {
    background: #fff;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    height: 550px;

    /* Adjusted for larger image */

    width: 100%;

    max-width: 400px;

    display: flex;

    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    margin: 0 auto;
}

.latest-blog .post-box:hover {
    transform: translateY(-8px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.latest-blog .post-img {
    height: 300px;

    /* Larger image to match the image */

    overflow: hidden;
}

.latest-blog .post-img img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}

.latest-blog .post-box:hover .post-img img {
    transform: scale(1.05);
}

.latest-blog .post-wrapper {
    padding: 20px;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}

.latest-blog .post-category {
    font-family: "Poppins", sans-serif;

    font-size: 0.8rem;

    color: #28a745;

    /* Green date */

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 10px;
}

.latest-blog .post-title {
    font-family: "Playfair Display", sans-serif;

    font-size: 1.5rem;

    font-weight: 600;

    color: #241d26;

    /* Black title */

    display: inline;

    background-color: rgba(0, 0, 0, 0);

    /* Green highlight */

    padding: 2px 5px;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    margin-bottom: 10px;
}

.latest-blog .post-title:hover {
    color: #1a151c;

    /* Slightly darker on hover */
}

.latest-blog .post-content {
    flex: 1;

    margin-bottom: 15px;
}

.latest-blog .post-content p {
    font-family: "Poppins", sans-serif;

    font-size: 0.95rem;

    color: #888;

    /* Gray summary */

    display: -webkit-box;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.5;
}

.latest-blog .post-read-more {
    font-family: "Poppins", sans-serif;

    font-size: 0.9rem;

    font-weight: 500;

    color: #28a745;

    /* Green link */

    text-transform: uppercase;

    text-decoration: underline;

    transition: color 0.3s ease;
}

.latest-blog .post-read-more:hover {
    color: #218838;

    /* Darker green on hover */
}

.latest-blog .view-more {
    text-align: center;

    margin-top: 50px;
}

.latest-blog .view-more .book-now-btn {
    background-color: #241d26;

    color: #fff;

    padding: 12px 25px;

    font-size: 14px;

    font-weight: 600;

    border-radius: 8px;
}

.latest-blog .view-more .book-now-btn:hover {
    background-color: #1a151c;
}

/* Slick Slider for Mobile */

@media (max-width: 768px) {
    .latest-blog .post-grid {
        display: block;
    }

    .latest-blog .post-box {
        margin: 0 15px;

        height: 550px;

        max-width: 350px;
    }

    .latest-blog .post-grid.slick-slider {
        margin: 0 -15px;
    }

    .latest-blog .post-grid .slick-dots {
        margin-top: 25px;

        text-align: center;
    }

    .latest-blog .post-grid .slick-dots li {
        background-color: #ccc;

        border-radius: 50%;

        width: 10px;

        height: 10px;

        margin: 0 6px;
    }

    .latest-blog .post-grid .slick-dots li.slick-active {
        background-color: #f96882;
    }
}

/* Responsive Grid Adjustments */

@media (max-width: 992px) {
    .latest-blog .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .latest-blog .post-box {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .latest-blog .post-grid {
        grid-template-columns: 1fr;
    }

    .latest-blog .post-box {
        max-width: 350px;

        margin: 0 auto;
    }
}

/* =========================== maps section ============================== */

.maps-contact .inner {
    padding-left: 10%;

    max-width: 92%;
}

.maps-contact .section-title {
    text-align: left;

    margin-bottom: 30px;
}

.maps-contact .section-title::after {
    margin-left: 0;
}

.maps-contact .contact-popup-info {
    margin-bottom: 70px;
}

.maps-contact .form-input input,
.maps-contact .your-service .current-option,
.maps-contact .option-menu {
    box-shadow: none;

    border: 1px solid #ddd;
}

.maps-contact .form-input input:focus {
    outline-color: #333;
}

.maps-contact textarea {
    width: 95%;

    height: 150px;

    border: 1px solid #ddd;

    margin: 0 auto;

    padding: 14px 20px;

    outline-color: #333;

    margin-bottom: 30px;
}

.maps-contact textarea:focus {
    transform: scale(1.05);

    transition: all ease 0.35s;
}

.maps-contact .submit-btn input {
    width: 35%;

    font-weight: 500;
}

/* ================== Footer =================== */

footer {
    width: 100%;

    height: auto;

    /* Set height to auto to adjust dynamically */

    background-color: #241d26;

    text-align: center;

    padding: 20px 0;

    /* Adjust padding for a smaller footer */

    overflow: hidden;
}

footer .footer-content {
    padding: 20px 0;

    /* Reduced padding */

    border-bottom: 1px solid #f3f1f4;
}

footer .sub-heading,
footer .slogan {
    font-size: 16px;

    /* Reduced font size */

    line-height: 28px;

    /* Adjusted line height */

    color: #aaa;

    letter-spacing: 0.5px;
}

footer .footer-social {
    margin: 0 0 0 0;

    /* Reduced margin */
}

footer .footer-bottom {
    font-size: 12px;

    /* Smaller font size for footer bottom */

    padding: 10px 0;

    /* Adjusted padding */

    color: #aaa;

    display: flex;

    justify-content: center;

    align-items: center;
}

/* Footer contact items */

.footer-contact-item {
    color: #fff;

    font-size: 14px;

    /* Reduced font size */

    margin: 5px 0;

    /* Adjusted margin */
}

.footer-contact-item i {
    color: #f96882;

    margin-right: 5px;
}

.footer-contact-item a {
    color: #fff;

    text-decoration: none;
}

.footer-contact-item a:hover {
    color: #f96882;

    text-decoration: underline;
}

/* Footer title */

.footer-title {
    font-size: 20px;

    /* Reduced font size */

    color: #fff;

    font-weight: 600;

    margin-top: 10px;
}

/* Responsive adjustments for smaller screens */

@media (max-width: 768px) {
    footer {
        padding: 15px 0;

        /* Adjust padding for smaller screens */
    }

    footer .footer-content {
        padding: 15px 0;
    }

    footer .footer-bottom {
        font-size: 10px;

        /* Smaller font size for mobile */
    }

    .footer-contact-item {
        font-size: 12px;

        /* Smaller font size for contact items */
    }
}

/* ============================================ !! ============================================ */

/* ===================== Other Pages title ====================== */

/* ============================================================== */

header.other-pages {
    position: relative;

    height: 250px !important;

    background: url("/imgs/hinh-anh-mau-spa-2-9003.jpeg") no-repeat center center;

    background-size: cover;
}

.page-title {
    font-family: Playfair Display;

    text-transform: capitalize;

    font-size: 50px;

    font-weight: 500;

    color: #fff;

    text-align: center;

    position: absolute;

    left: 50%;

    top: 62%;

    transform: translate(-50%, -50%);

    letter-spacing: 0.7px;
}

/* =========================== Modal Dialog Box ============================== */

.modal-dialog-box {
    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 9999;

    background-color: #fff;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    display: none;
}

.modal-dialog-box .inner {
    padding: 20px;

    text-align: center;
}

.modal-dialog-box .dialog-img {
    margin-bottom: 20px;
}

.modal-dialog-box .close-icon {
    position: absolute;

    top: 10px;

    right: 10px;

    cursor: pointer;
}

.modal-dialog-box .content h5,
.modal-dialog-box .content h3,
.modal-dialog-box .content p {
    margin: 10px 0;
}

.modal-dialog-box .content form input {
    width: 80%;

    padding: 10px;

    margin-bottom: 10px;
}

.modal-dialog-box .content form button {
    padding: 10px 20px;

    background-color: #f96882;

    color: #fff;

    border: none;

    cursor: pointer;
}

/* Tinh chỉnh nút phân trang */

.pagination {
    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 40px;

    gap: 12px;
}

.pagination a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 15px;

    font-size: 14px;

    font-family: "Poppins", sans-serif;

    font-weight: 500;

    color: #fff;

    background-color: #f96882;

    border-radius: 5px;

    text-decoration: none;

    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #f8889d;
}

.pagination a.active {
    background-color: #28a745;

    pointer-events: none;
}

.pagination a.disabled {
    background-color: #ccc;

    pointer-events: none;

    cursor: not-allowed;
}

/* Tùy chỉnh nút Trước và Sau */

.pagination a.prev-page,
.pagination a.next-page {
    padding: 10px 20px;

    gap: 8px;

    /* Khoảng cách giữa biểu tượng và chữ */
}

.pagination a.prev-page i,
.pagination a.next-page i {
    font-size: 12px;
}

/* Tùy chỉnh số trang */
.pagination .pagination-numbers {
    display: flex;
    gap: 8px;
    /* Khoảng cách giữa các số trang */
}

.pagination .pagination-numbers span {
    /* Dấu ... */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    color: #888;
}

/* Responsive */

@media (max-width: 576px) {
    .pagination a {
        padding: 8px 12px;

        font-size: 12px;
    }

    .pagination a.prev-page,
    .pagination a.next-page {
        padding: 8px 15px;
    }
}

/* Show thông tin trong giới thiệu đội ngũ */

.more-info {
    display: none;

    /* Ẩn thông tin đi khi chưa nhấn vào nút "Đọc thêm" */
}

/* Thanh audio */

.audio-player {
    width: 100%;

    max-width: 600px;

    background: #f8f8f8;

    padding: 15px;

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    font-family: Arial, sans-serif;

    position: relative;
}

.audio-controls {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}

.audio-controls button {
    background: #fff;

    border: 1px solid #ddd;

    padding: 8px 12px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 16px;

    transition: background 0.2s;
}

.audio-controls button:hover {
    background: #f0f0f0;
}

.audio-controls i {
    pointer-events: none;
}

.seek-bar {
    flex-grow: 1;
}

.seek-bar input[type="range"] {
    width: 100%;
}

.time-display {
    font-size: 14px;

    min-width: 100px;

    text-align: right;
}

.dropdown-menu {
    display: none;

    position: absolute;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 6px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    z-index: 10;

    top: 50px;

    left: 50%;

    transform: translateX(-50%);

    padding: 5px 0;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-option {
    padding: 8px 16px;

    cursor: pointer;

    font-size: 14px;
}

.dropdown-option:hover {
    background: #f0f0f0;
}

.speed-dropdown {
    display: none;

    position: absolute;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 6px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    z-index: 11;

    top: 0;

    left: 100%;

    transform: translateX(-100%);

    padding: 5px 0;
}

.speed-dropdown.active {
    display: block;
}

.speed-option {
    padding: 8px 16px;

    cursor: pointer;

    font-size: 14px;
}

.speed-option:hover {
    background: #f0f0f0;
}

.speed-option.active {
    background: #e0e0e0;

    font-weight: bold;
}

/* search tại trang blog chi tiết */

.search {
    position: relative;
}

.search-suggestions {
    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 4px;

    max-height: 300px;

    overflow-y: auto;

    z-index: 1000;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    display: none;

    /* Ensure hidden by default */
}

.search-suggestions.show {
    display: block;

    /* Explicitly show when active */
}

.search-suggestions .suggestion-item {
    padding: 10px 15px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 10px;

    border-bottom: 1px solid #eee;
}

.search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestions .suggestion-item:hover {
    background-color: #f5f5f5;
}

.search-suggestions .suggestion-item.loading {
    color: #777;

    font-style: italic;

    justify-content: center;
}

.search-suggestions .suggestion-item img {
    width: 50px;

    height: 50px;

    object-fit: cover;

    border-radius: 4px;
}

.search-suggestions .suggestion-item .title {
    font-size: 14px;

    font-weight: 500;

    color: #333;
}

.search-suggestions .suggestion-item .date {
    font-size: 12px;

    color: #777;
}

/* Responsive */

@media (max-width: 576px) {
    .search-suggestions {
        max-height: 200px;
    }

    .search-suggestions .suggestion-item {
        padding: 8px 10px;
    }

    .search-suggestions .suggestion-item img {
        width: 40px;

        height: 40px;
    }

    .search-suggestions .suggestion-item .title {
        font-size: 13px;
    }

    .search-suggestions .suggestion-item .date {
        font-size: 11px;
    }
}

.site-bar .blog-post .loading,
.site-bar .blog-post p {
    text-align: center;

    color: #777;

    font-style: italic;

    padding: 20px;
}

/* Category filter buttons */

.category-filter {
    display: none;

    gap: 10px;

    flex-wrap: wrap;
}

.category-filter-btn {
    height: 26px;

    font-size: 12px;

    padding: 0 12px;

    border-radius: 6px;

    border: none;

    background-color: #e8e8e8;

    color: #808080;

    cursor: pointer;

    transition: background-color 0.3s ease, color 0.3s ease;
}

.category-filter-btn.active,
.category-filter-btn:hover {
    background-color: #f96882;

    color: #fff;
}

/* Cập nhật products-category-list để cố định chiều rộng cột */
/* 
.products-category-list {

    display: grid;

    grid-template-columns: repeat(4, minmax(250px, 1fr));

    Mỗi cột có chiều rộng tối thiểu 250px

    gap: 1.5rem;

} */

* Cố định kích thước của category-item */ .category-item {
    position: relative;
    margin: 0;
    /* Bỏ margin để grid tự xử lý khoảng cách */
    width: 100%;
    /* Đảm bảo chiếm toàn bộ chiều rộng cột */
    min-height: 450px;
    /* Chiều cao tối thiểu để chứa nội dung */
    padding: 10px;
    background-color: #fcfcfc;
    border: 1px solid #c7c7c7;
    border-radius: 8px;
    color: black;
    overflow: hidden;
    display: flex;
    /* Sử dụng flex để quản lý không gian */
    flex-direction: column;
    /* Sắp xếp các phần tử theo cột */
}

/* Đảm bảo ảnh bên trong không bị méo */
.category-item-img {
    width: 100%;
    height: 240px;
    /* Chiều cao cố định cho ảnh */
    overflow: hidden;
}

.category-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tinh chỉnh tên sản phẩm */
/* .category-item h3 {
    font-size: 16px;
    margin: 2px 0;
    flex-grow: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
} */

/* Cập nhật style cho giá */
.category-item .price {
    margin: 5px 0;
    flex-grow: 0;
    display: none;
    /* Không chiếm không gian dư thừa */
}

/* Giá của tat ca san pham */
/* .price-product {
    margin: 5px 0;
    display: flex;
    flex-direction: row;
} */

/* Tinh chỉnh mô tả */
.category-item p {
    max-width: 100%;
    font-size: 12px;
    max-height: 100px;
    /* Tăng chiều cao giới hạn */
    overflow-y: auto;
    /* Luôn hiển thị thanh cuộn */
    flex-grow: 1;
    /* Chiếm không gian còn lại */
    margin: 10px 0;
    word-break: break-word;
    /* Cho phép ngắt từ */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Giới hạn 4 dòng */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .products-category-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .category-item {
        min-height: 400px;
        /* Giảm nhưng vẫn đủ chứa */
    }

    .category-item p {
        max-height: 80px;
        /* Giảm nhưng vẫn đủ hiển thị */
        -webkit-line-clamp: 3;
        /* Giới hạn 3 dòng */
        line-clamp: 3;
    }
}

@media (max-width: 576px) {
    .products-category-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .category-item {
        min-height: 350px;
        /* Giảm thêm trên di động */
    }

    .category-item p {
        max-height: 60px;
        /* Giảm thêm trên di động */
        -webkit-line-clamp: 2;
        /* Giới hạn 2 dòng */
        line-clamp: 2;
    }
}

/* Cập nhật products-category-list */
/* .products-category-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 1.5rem;
} */

/* Cập nhật category-item */
.category-item {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 340px;
    /* Đảm bảo đủ không gian cho nội dung */
    padding: 10px;
    background-color: #fcfcfc;
    border: 1px solid #c7c7c7;
    border-radius: 8px;
    color: black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Đảm bảo ảnh không bị méo */
.category-item-img {
    width: 100%;
    height: 205px;
    overflow: hidden;
}

.category-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tinh chỉnh tên sản phẩm */
.category-item h3 {
    font-size: 16px;
    margin: 2px 0;
    flex-grow: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tinh chỉnh giá */
.category-item .price {
    margin: 5px 0;
    flex-grow: 0;
}

.product-name {
    font-size: 16px;
    /* Kích thước font, có thể điều chỉnh */
    margin: 2px 0;
    overflow: hidden;
    /* Ẩn phần vượt quá */
    text-overflow: ellipsis;
    /* Thêm dấu ba chấm khi vượt quá */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Để hỗ trợ nhiều dòng (ví dụ: 2 dòng), sử dụng các thuộc tính sau thay vì white-space: nowrap */
    /* display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
    /* -webkit-box-orient: vertical; */
    max-width: 100%;
    /* Đảm bảo không vượt quá chiều rộng container */
}

/* Tinh chỉnh mô tả với tính năng cuộn */
.category-item p {
    max-width: 100%;
    font-size: 12px;
    max-height: 120px;
    /* Đủ không gian để hiển thị nội dung */
    overflow-y: auto;
    /* Kích hoạt thanh cuộn dọc */
    flex-grow: 1;
    margin: 10px 0;
    padding-right: 5px;
    /* Khoảng cách để thanh cuộn không che nội dung */
    word-break: break-word;
    /* Ngắt từ để tránh tràn */
    /* Bỏ giới hạn dòng để cho phép cuộn toàn bộ nội dung */
    display: block;
    /* Đảm bảo không dùng -webkit-box để nội dung cuộn đầy đủ */
}

/* Tùy chỉnh thanh cuộn (scrollbar) cho đẹp hơn */
.category-item p::-webkit-scrollbar {
    width: 6px;
    /* Độ rộng thanh cuộn */
}

.category-item p::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Màu nền của track */
    border-radius: 3px;
}

.category-item p::-webkit-scrollbar-thumb {
    background: #888;
    /* Màu của thanh cuộn */
    border-radius: 3px;
}

.category-item p::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Màu khi hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .products-category-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .category-item {
        min-height: 400px;
    }

    .category-item p {
        max-height: 80px;
    }
}

@media (max-width: 576px) {
    .products-category-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .category-item {
        min-height: 350px;
    }

    .category-item p {
        max-height: 60px;
    }
}

/* Cập nhật kiểu dáng cho products-btn */

.products-btn {
    height: 26px;

    font-size: 12px;

    padding: 0 8px;

    border-radius: 6px;

    border: none;

    background-color: #e8e8e8;

    color: #808080;

    cursor: pointer;

    transition: background-color 0.3s ease, color 0.3s ease;
}

.products-btn.active,
.products-btn:hover {
    background-color: #f96882;

    color: #fff;
}

/* Thêm hoặc chỉnh sửa kiểu cho .text-detail để kích hoạt thanh cuộn khi nội dung tràn */
.text-detail {
    max-width: 100%;
    font-size: 12px;
    max-height: 120px;
    /* Chiều cao giới hạn dựa trên hình ảnh */
    overflow-y: auto;
    /* Luôn hiển thị thanh cuộn dọc khi nội dung tràn */
    margin: 10px 0;
    padding-right: 5px;
    /* Tránh thanh cuộn che text */
    word-break: break-word;
    /* Ngắt từ để tránh tràn */
}

.category-item p {
    max-width: 100%;
    font-size: 12px;
    max-height: 60px;
    /* Chiều cao giới hạn cho danh sách */
    overflow-y: auto;
    /* Luôn hiển thị thanh cuộn dọc */
    margin: 5px 0;
    padding-right: 5px;
    word-break: break-word;
}

/* Tùy chỉnh thanh cuộn giống hình ảnh */
.text-detail::-webkit-scrollbar,
.category-item p::-webkit-scrollbar {
    width: 6px;
    /* Thanh cuộn mỏng, giống hình */
}

.text-detail::-webkit-scrollbar-track,
.category-item p::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Nền sáng, phù hợp giao diện */
    border-radius: 3px;
}

.text-detail::-webkit-scrollbar-thumb,
.category-item p::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    /* Màu xám nhạt, giống hình */
    border-radius: 3px;
}

.text-detail::-webkit-scrollbar-thumb:hover,
.category-item p::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9;
    /* Màu đậm hơn khi hover */
}

/* Đảm bảo form không bị đè */
.product-form {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .text-detail {
        max-height: 80px;
        /* Giảm chiều cao trên di động */
    }

    .category-item p {
        max-height: 40px;
        /* Giảm chiều cao trên di động */
    }

    .product-form {
        margin-top: 10px;
    }
}

.striking-search {
    align-content: center;
    width: 50%;
    height: 36px;
    border: 1px solid #b4b4b4;
    border-radius: 20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#services-search {
    border: none;
    margin: 0 20px;
    width: 70%;
    height: 100%;
    padding: 0;
    font-size: 14px;
    background: transparent;
    outline: none;
}

#search-icon {
    color: #808080;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease;
}

#search-icon:hover {
    color: #000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .striking-search {
        width: 70%;
    }

    #services-search {
        font-size: 12px;
    }

    #search-icon {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .striking-search {
        width: 90%;
    }
}

.sort-btn {
    height: 26px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 6px;
    border: none;
    background-color: #e8e8e8;
    color: #808080;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sort-btn.active,
.sort-btn:hover {
    background-color: #f96882;
    color: #fff;
}

.services-category-list .price {
    margin: 0 10px 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: -2.5px;
}

.services-category-list .price-new {
    color: #111111;
    font-weight: bold;
    font-size: 1.1rem;
}

.services-category-list .price-old {
    color: #999;
    text-decoration: line-through;
    font-size: 0.9rem;
}

/* Cập nhật products-category-list để hỗ trợ cuộn ngang */
.products-category-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1.5rem;
    padding: 10px 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #d3d3d3 #f1f1f1;
    /* Firefox */
}

/* Tùy chỉnh thanh cuộn cho Webkit (Chrome, Safari) */
.products-category-list::-webkit-scrollbar {
    height: 8px;
    /* Chiều cao thanh cuộn ngang */
}

.products-category-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.products-category-list::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    border-radius: 4px;
}

.products-category-list::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9;
}

/* Cập nhật category-item */
.category-item {
    position: relative;
    margin: 0;
    width: 250px;
    /* Chiều rộng cố định */
    min-width: 250px;
    /* Đảm bảo không co nhỏ hơn */
    min-height: 340px;
    padding: 10px;
    background-color: #fcfcfc;
    border: 1px solid #c7c7c7;
    border-radius: 8px;
    color: black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Đảm bảo ảnh không bị méo */
.category-item-img {
    width: 100%;
    height: 205px;
    overflow: hidden;
}

.category-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tinh chỉnh tên sản phẩm */
.category-item h3 {
    font-size: 16px;
    margin: 2px 0;
    flex-grow: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tinh chỉnh mô tả */
.category-item p {
    max-width: 100%;
    font-size: 12px;
    max-height: 60px;
    overflow-y: auto;
    margin: 5px 0;
    padding-right: 5px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tùy chỉnh thanh cuộn cho mô tả */
.category-item p::-webkit-scrollbar {
    width: 6px;
}

.category-item p::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.category-item p::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    border-radius: 3px;
}

.category-item p::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .category-item {
        width: 200px;
        min-width: 200px;
        min-height: 300px;
    }

    .category-item-img {
        height: 180px;
    }

    .category-item p {
        max-height: 48px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (max-width: 576px) {
    .category-item {
        width: 180px;
        min-width: 180px;
        min-height: 280px;
    }

    .category-item-img {
        height: 160px;
    }

    .category-item p {
        max-height: 36px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Đảm bảo container cha không giới hạn chiều rộng */
.products-category {
    width: 100%;
    overflow: hidden;
    margin: 0 15px;
}

.products-page .products-category-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 1.5rem;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .products-page .products-category-list {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .products-page .products-category-list {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 576px) {
    .products-page .products-category-list {
        grid-template-columns: repeat(1, minmax(200px, 1fr));

        padding: 4px 8px;
    }
}

/* ======================== */

@media only screen and (max-width: 1201px) {
    /* ================== Product Services update 7/6/2025 ================== */

    .products-category,
    .services-category {
        margin: 0;
        width: 100%;
    }

    .products-list,
    .services-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .products-sidebar,
    .services-sidebar {
        display: none;
    }

    .products-striking,
    .services-striking {
        width: 100%;
    }

    .products-item,
    .service-item,
    .category-item {
        width: auto;
    }

    .products-category-list,
    .services-category-list {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 1.5rem;
    }

    .form-booking {
        grid-template-columns: 1fr 1fr;
        justify-items: center;
    }

    .services-book-img {
        display: none;
    }

    .services-book-information,
    .services-book-form {
        width: 400px;
    }
}

@media only screen and (max-width: 1070px) {
    .products-category {
        margin: 0;
    }

    .services-category-list {
        margin-left: 15px;
    }

    .products-category-list,
    .services-category-list,
    .products-list,
    .services-list {
        gap: 1rem;
    }

    .products-item,
    .service-item {
        margin: 6px;
    }

    .services-category-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }
}

@media only screen and (max-width: 992px) {

    /* ====================== Product services update 7/6/2025================ */
    .products-category-list,
    .services-category-list,
    .products-list,
    .services-list {
        gap: 0.5rem !important;
    }

    .products-item,
    .service-item {
        margin: 6px 2px;
    }
}

@media only screen and (max-width: 768px) {
    /* ============== product serrvices update 7/6/2025 =============================*/

    .products-header,
    .striking-header {
        display: block;
    }

    .products-search,
    .striking-search {
        width: 100%;
    }

    .products-button,
    .striking-button {
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
    }

    /* =============== Chi tiet san pham 7/6/2025 ============ */

    .form-column.price {
        display: block !important;
    }

    .product-form {
        display: block;
    }

    .services-book-main {
        height: 1230px;
    }

    .form-booking {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

@media only screen and (max-width: 576px) {
    /* =============================Product Services update 7/6/2025====================== */

    .products-header,
    .services-header {
        display: block;
    }

    .products-search {
        width: 100%;
    }

    .products-button {
        margin-top: 10px;
    }

    .products-category-list,
    .services-category-list,
    .products-list,
    .services-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .products-detail-img {
        display: none;
    }

    .products-category h3 {
        font-size: 28px;
    }

    .products-detail {
        display: block;
        height: 780px;
    }

    .products-detail-form {
        height: 400px;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .product-item {
        margin: 6px 20px;
    }

    .services-category-list,
    .products-category-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }

    .services-category h3 {
        text-align: center;
    }

    .services-book-information,
    .services-book-form {
        width: 370px;
    }
}