.element>*,
.section,
.row,
.column,
.banner-text,
.search-box-wrapper,
.search-box-placeholder,
img,
p {
    width: var(--width-pc, initial);
    min-height: var(--min-height-pc, initial);
    padding: var(--padding-pc, initial);
    margin: var(--margin-pc, initial);
    height: var(--height-pc, initial);
    border-radius: var(--border-radius-pc, initial);
    box-shadow: var(--box-shadow-pc, initial);
    
    font-size: var(--font-size-pc, initial);
    font-weight: var(--font-weight-pc, initial);
    line-height: var(--line-height-pc, initial);
    text-align: var(--text-align-pc, initial);
}

@media (max-width: 991px) and (min-width: 768px) {

    .element>*,
    .section,
    .row,
    .create-row,
    .column,
    .banner-text,
    .search-box-wrapper,
    .search-box-placeholder,
    img,
    p {
        width: var(--width-tablet, var(--width-pc, initial));
        min-height: var(--min-height-tablet, var(--min-height-pc, initial));
        padding: var(--padding-tablet, var(--padding-pc, initial));
        margin: var(--margin-tablet, var(--margin-pc, initial));
        height: var(--height-tablet, var(--height-pc, initial));
        border-radius: var(--border-radius-tablet,
                var(--border-radius-pc, initial));
        box-shadow: var(--box-shadow-tablet,
                var(--box-shadow-pc, initial));
       
        font-size: var(--font-size-tablet, var(--font-size-pc, initial));
        font-weight: var(--font-weight-tablet, var(--font-weight-pc, initial));
        line-height: var(--line-height-tablet, var(--line-height-pc, initial));
        text-align: var(--text-align-tablet, var(--text-align-pc, initial));
    }
}

@media (max-width: 767px) {

    .element>*,
    .section,
    .row,
    .column,
    .banner-text,
    .search-box-wrapper,
    .search-box-placeholder,
    img,
    p {
        width: var(--width-mobile, var(--width-tablet, var(--width-pc, initial)));
        min-height: var(--min-height-mobile,
                var(--min-height-tablet, var(--min-height-pc, initial)));
        padding: var(--padding-mobile,
                var(--padding-tablet, var(--padding-pc, initial)));
        margin: var(--margin-mobile,
                var(--margin-tablet, var(--margin-pc, initial)));
        height: var(--height-mobile,
                var(--height-tablet, var(--height-pc, initial)));
        border-radius: var(--border-radius-mobile,
                var(--border-radius-tablet, var(--border-radius-pc, initial)));
        box-shadow: var(--box-shadow-mobile,
                var(--box-shadow-tablet, var(--box-shadow-pc, initial)));
        
        font-size: var(--font-size-mobile,
                var(--font-size-tablet, var(--font-size-pc, initial)));
        font-weight: var(--font-weight-mobile,
                var(--font-weight-tablet, var(--font-weight-pc, initial)));
        line-height: var(--line-height-mobile,
                var(--line-height-tablet, var(--line-height-pc, initial)));
        text-align: var(--text-align-mobile,
                var(--text-align-tablet, var(--text-align-pc, initial)));
    }
}

/* === KHỐI SỬA LỖI KẾ THỪA BIẾN CSS === */

/* * Reset tất cả các biến cho BẤT KỲ (*) phần tử con trực tiếp nào 
 * nằm bên trong .section, .row, hoặc .column.
 * Điều này ngăn việc áp dụng lồng style.
 */
.section > *,
.row > *,
.column > * {
    /* Reset biến cho PC */
    --width-pc: initial;
    --min-height-pc: initial;
    --padding-pc: initial;
    --margin-pc: initial;
    --height-pc: initial;
    --border-radius-pc: initial;
    --box-shadow-pc: initial;
    --font-size-pc: initial;
    --font-weight-pc: initial;
    --line-height-pc: initial;
    --text-align-pc: initial;
}

/* Reset biến cho Tablet */
@media (max-width: 991px) and (min-width: 768px) {
    .section > *,
    .row > *,
    .column > * {
        --width-tablet: initial;
        --min-height-tablet: initial;
        --padding-tablet: initial;
        --margin-tablet: initial;
        --height-tablet: initial;
        --border-radius-tablet: initial;
        --box-shadow-tablet: initial;
        --font-size-tablet: initial;
        --font-weight-tablet: initial;
        --line-height-tablet: initial;
        --text-align-tablet: initial;
    }
}

/* Reset biến cho Mobile */
@media (max-width: 767px) {
    .section > *,
    .row > *,
    .column > * {
        --width-mobile: initial;
        --min-height-mobile: initial;
        --padding-mobile: initial;
        --margin-mobile: initial;
        --height-mobile: initial;
        --border-radius-mobile: initial;
        --box-shadow-mobile: initial;
        --font-size-mobile: initial;
        --font-weight-mobile: initial;
        --line-height-mobile: initial;
        --text-align-mobile: initial;
    }
}

@media (min-width: 992px) {
    .hide-on-pc {
        display: none !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}

.test {
    flex: none;
}

/* CSS BÊN DƯỚI ÁP DỤNG CHO CÁC ELEMENT (GIỐNG VỚI CSS BÊN TRONG HÀM addBuilderStyles() TRONG FILE EVENT */
/* --- CSS MỚI: Style cho vị trí của Icon Box --- */
.icon-box .icon-box-display {
    display: flex;
    gap: 1.5rem;
}

.icon-box-text-wrapper {
    display: flex;
    flex-grow: 1;
}

.icon-box.icon-position-top .icon-box-display {
    flex-direction: column;
    align-items: center;
}

.icon-box.icon-position-left .icon-box-display {
    flex-direction: row;
    align-items: center;
}

.icon-box.icon-position-right .icon-box-display {
    flex-direction: row-reverse;
    align-items: center;
}

/* Style cho ảnh icon */
.icon-box-img {
    max-width: 64px;
    height: auto;
}

/* === CSS MỚI: Style cho hướng của text wrapper === */
.text-direction-column {
    flex-direction: column;
}

.text-direction-row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.text-direction-row h4 {
    margin-bottom: 0;
}

/* === SỬA LỖI & CẢI TIẾN: CĂN LỀ CHO TEXT WRAPPER === */
/* Quy tắc này sẽ căn lề cho cả khối text (title + description) */
.icon-box.icon-position-top .icon-box-text-wrapper {
    align-items: center;
    /* Căn giữa theo chiều ngang khi text xếp dọc */
    text-align: center;
}

.icon-box.icon-position-left .icon-box-text-wrapper {
    align-items: flex-start;
    /* Căn trái theo chiều ngang khi text xếp dọc */
    text-align: left;
}

.icon-box.icon-position-right .icon-box-text-wrapper {
    align-items: flex-end;
    /* Căn phải theo chiều ngang khi text xếp dọc */
    text-align: right;
}

/* ======================================================= */
/* === CSS CƠ BẢN CHO IMAGE BOX === */
.image-box .image-box-inner {
    position: relative;
    overflow: hidden;
}

.image-box .box-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s;
}

.image-box .box-text {
    padding: 15px;
    background-color: #f8f8f8;
}

/* === STYLE: NORMAL === */
.image-box.style-normal .image-box-inner:hover .box-image img {
    transform: scale(1.05);
}

/* === STYLE: OVERLAY === */
.image-box.style-overlay .box-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    transform: translateY(100%);
    transition: transform .3s;
}

.image-box.style-overlay .image-box-inner:hover .box-text {
    transform: translateY(0);
}

.image-box.style-overlay .box-text h4,
.image-box.style-overlay .box-text p {
    color: white;
}

/* === STYLE: SHADE === */
.image-box.style-shade .box-image {
    position: relative;
}

.image-box.style-shade .box-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
    opacity: 0.8;
    transition: opacity .3s;
}

.image-box.style-shade .image-box-inner:hover .box-image::after {
    opacity: 1;
}

/* === STYLE: BADGE === */
.image-box.style-badge .box-text {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #d26e4b;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.image-box.style-badge .box-text h4 {
    display: none;
}

/* Ẩn h4 cho badge */
.image-box.style-badge .box-text p {
    margin: 0;
    font-weight: bold;
}

/* === STYLE: PUSH === */
.image-box.style-push .box-image-inner {
    transition: transform .3s;
}

.image-box.style-push .image-box-inner:hover .box-image-inner {
    transform: translateY(-10px);
}

/* === CSS CƠ BẢN CHO MESSAGE BOX === */
.message-box .message-box-inner {
    display: flex;
    padding: 1rem;
    border-radius: 0.25rem;
    border: 1px solid;
    gap: 1rem;
    align-items: flex-start;
}

.message-box .message-box-icon {
    font-size: 1.25rem;
    line-height: 1.5;
    /* Căn icon với dòng text đầu tiên */
}

.message-box .message-box-content {
    flex-grow: 1;
    min-height: 20px;
    /* Thêm chiều cao tối thiểu */
}

/* === STYLE: INFO === */
.message-box.style-info .message-box-inner {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.message-box.style-info .message-box-icon {
    color: #0c5460;
}

/* === STYLE: SUCCESS === */
.message-box.style-success .message-box-inner {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.message-box.style-success .message-box-icon {
    color: #155724;
}

/* === STYLE: WARNING === */
.message-box.style-warning .message-box-inner {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.message-box.style-warning .message-box-icon {
    color: #856404;
}

/* === STYLE: DANGER === */
.message-box.style-danger .message-box-inner {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.message-box.style-danger .message-box-icon {
    color: #721c24;
}

/* === CSS CƠ BẢN CHO TEAM MEMBER === */
.team-member .team-member-inner {
    position: relative;
    overflow: hidden;
}

.team-member .team-member-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s;
}

.team-member .team-member-text {
    padding: 15px;
    background-color: #f8f8f8;
    min-height: 20px;
    /* Thêm chiều cao tối thiểu */
}

/* === STYLE: NORMAL === */
.team-member.style-normal .team-member-inner:hover .team-member-image img {
    transform: scale(1.05);
}

/* === STYLE: OVERLAY === */
.team-member.style-overlay .team-member-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    transform: translateY(100%);
    transition: transform .3s;
}

.team-member.style-overlay .team-member-inner:hover .team-member-text {
    transform: translateY(0);
}

.team-member.style-overlay .team-member-text h4,
.team-member.style-overlay .team-member-text p {
    color: white;
}

/* === STYLE: SHADE === */
.team-member.style-shade .team-member-image {
    position: relative;
}

.team-member.style-shade .team-member-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
    opacity: 0.8;
    transition: opacity .3s;
}

.team-member.style-shade .team-member-inner:hover .team-member-image::after {
    opacity: 1;
}

/* === STYLE: BADGE === */
.team-member.style-badge .team-member-text {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #d26e4b;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.team-member.style-badge .team-member-text h4 {
    display: none;
}

.team-member.style-badge .team-member-text p {
    margin: 0;
    font-weight: bold;
}

/* === STYLE: PUSH === */
.team-member.style-push .team-member-image-inner {
    transition: transform .3s;
}

.team-member.style-push .team-member-inner:hover .team-member-image-inner {
    transform: translateY(-10px);
}

/* === CSS CƠ BẢN CHO TESTIMONIAL === */
.testimonial .testimonial-display {
    display: flex;
    gap: 1rem;
}

.testimonial .testimonial-image-container img {
    border-radius: 50%;
    object-fit: cover;
    height: auto;
    /* Giữ tỷ lệ */
}

.testimonial .testimonial-meta-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial .testimonial-meta-wrapper h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
}

.testimonial .testimonial-meta-wrapper span {
    font-style: italic;
    opacity: 0.8;
    font-size: 0.9rem;
}

.testimonial .testimonial-content {
    min-height: 20px;
    /* Đảm bảo có thể kéo thả vào */
    padding-top: 1rem;
    border-top: 1px solid #eee;
    margin-top: 1rem;
}

/* Vị trí */
.testimonial.position-top .testimonial-display {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonial.position-left .testimonial-display {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.testimonial.position-right .testimonial-display {
    flex-direction: row-reverse;
    align-items: center;
    text-align: right;
}

.testimonial.position-right .testimonial-meta-wrapper {
    align-items: flex-end;
}

/* === CSS CƠ BẢN CHO PRICE TABLE === */
.price-table {
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fcfcfc;
    transition: all .3s ease-in-out;
}

.price-table.style-featured {
    border-width: 2px;
    border-color: #0d6efd;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    transform: scale(1.03);
}

.price-table .price-table-display {
    padding: 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.price-table .price-table-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.price-table .price-table-price-wrapper {
    margin-bottom: 0.5rem;
}

.price-table .price-table-price {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.price-table .price-table-period {
    font-size: 1rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.price-table .price-table-content {
    padding: 1.5rem;
    min-height: 50px;
    /* Đảm bảo có thể kéo thả vào */
}

/* === CSS CƠ BẢN CHO MAP === */
.map .map-inner {
    position: relative;
}

.map .map-inner-iframe {
    width: 100%;
    background-color: #e0e0e0;
    line-height: 0;
    /* Ngăn khoảng trống lạ dưới iframe */
}

.map .map-inner-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Quan trọng */
}

/* CSS cho .map-content TRONG BUILDER */
#builder-canvas .map .map-content {
    /* Trong builder, chúng ta làm cho nó tương đối để dễ kéo thả */
    position: relative;
    min-height: 50px;
    border: 2px dashed rgba(13, 110, 253, 0.5);
    background: rgba(13, 110, 253, 0.05);
    pointer-events: auto;
    /* Đảm bảo có thể thả vào */
}

/* CSS cho .map-content TRÊN FRONTEND (Thêm vào style.css của theme) */
/*
.map .map-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.map .map-content > * {
    pointer-events: auto;
}
*/

/* --- Slider --- */

/* 1. Container chính: Ẩn mọi thứ tràn ra ngoài */
.pure-js-slider {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

/* 2. Track: Thùng chứa (dạng flex) sẽ di chuyển */
.slider-track {
    display: flex;
    transition: transform 0.4s ease;
    /* overflow: hidden; */
    /* JS sẽ set transform: translateX() ở đây */
}

/* 3. Slide (item): Co dãn 0, rộng 100% */
.slider-item {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    /* overflow: hidden; */
}

/* 4. Nút Nav (Prev/Next) */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
}

.slider-nav.prev {
    left: 10px;
}

.slider-nav.next {
    right: 10px;
}

.slider-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 5. Dấu chấm (Dots) */
.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-dot.active {
    background-color: white;
}

/* +++ THÊM CSS MỚI CHO HIỆU ỨNG FADE +++ */

/* Khi ở chế độ fade, track không cần flex */
.slider-effect-fade .slider-track {
    display: block;
    position: relative;
    /* Chiều cao của track sẽ do slide active quyết định */
}

/* Các slide item ở chế độ fade */
.slider-effect-fade .slider-item {
    /* Nằm chồng lên nhau */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* Ẩn đi theo mặc định */
    opacity: 0;

    /* Hiệu ứng mờ */
    transition: opacity 0.6s ease;

    /* Ngăn các slide ẩn chiếm không gian */
    pointer-events: none;
}

/* Slide active ở chế độ fade */
.slider-effect-fade .slider-item.active {
    /* Hiện ra */
    opacity: 1;

    /* Trở về trạng thái tĩnh để tính toán chiều cao */
    position: static;

    /* Cho phép tương tác */
    pointer-events: auto;
}

/* Ẩn các clone đi, chúng không cần thiết cho fade */
.slider-effect-fade .slider-item.clone-last,
.slider-effect-fade .slider-item.clone-first {
    display: none;
}

/* --- CSS MỚI: COUNTDOWN TRONG BUILDER --- */
.countdown-builder-placeholder {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Khoảng cách giữa các khối */
    text-align: center;
}

.countdown-builder-placeholder,
.countdown-timer-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Khoảng cách giữa các khối */
    text-align: center;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.countdown-number {
    font-weight: 700;
}

.countdown-label {
    text-transform: uppercase;
}

/* === CSS MỚI: FRONTEND FOLLOW ICONS (Đã đồng bộ với Builder) === */

/* Container chung */
.follow-icons-list {
    display: flex;
    gap: 0.5em;
    /* Khoảng cách giữa các icon */
    font-size: 100%;
    /* Sẽ được điều khiển bởi scale % */
}

/* Căn lề cho container */
.follow-icons-list.text-left {
    justify-content: flex-start;
}

.follow-icons-list.text-center {
    justify-content: center;
}

.follow-icons-list.text-right {
    justify-content: flex-end;
}

/* 'inline' (flex-start) là mặc định */

/* Căn lề cho Title (nếu có) */
.follow-icons-title {
    color: #333;
    /* <-- THÊM MÀU CHO TITLE */
}

.follow-icons-title.text-left {
    text-align: left;
}

.follow-icons-title.text-center {
    text-align: center;
}

.follow-icons-title.text-right {
    text-align: right;
}

/* Icon (thẻ <a>) */
.follow-icons-list .icon.button.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #333;
    background-color: transparent;

    width: 2.5em;
    height: 2.5em;
    font-size: 1em;

    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}
.follow-icons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.follow-icons-list .icon.button.circle i {
    line-height: 1;
}

/* --- Style: Outline --- */
/* 1. Mặc định (Nếu không có class): Đen */
.follow-icons-list.is-outline .icon.button.circle {
    border: 2px solid #333;
    color: #333;
}
.follow-icons-list.is-outline .icon.button.circle:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* 2. Facebook (#1877F2 - Màu chuẩn mới của FB) */
.follow-icons-list.is-outline .icon.button.circle.facebook {
    border-color: #1877F2;
    color: #1877F2;
}
.follow-icons-list.is-outline .icon.button.circle.facebook:hover {
    background-color: #1877F2;
    color: #fff;
}

/* 3. Instagram (#E1306C - Màu hồng tím đặc trưng) */
.follow-icons-list.is-outline .icon.button.circle.instagram {
    border-color: #E1306C;
    color: #E1306C;
}
.follow-icons-list.is-outline .icon.button.circle.instagram:hover {
    background-color: #E1306C;
    color: #fff;
}

/* 4. TikTok (Đen #000000) */
.follow-icons-list.is-outline .icon.button.circle.tiktok {
    border-color: #000000;
    color: #000000;
}
.follow-icons-list.is-outline .icon.button.circle.tiktok:hover {
    background-color: #000000;
    color: #fff;
}

/* 5. Twitter / X (#1DA1F2 - Màu xanh chim én) */
.follow-icons-list.is-outline .icon.button.circle.twitter {
    border-color: #1DA1F2;
    color: #1DA1F2;
}
.follow-icons-list.is-outline .icon.button.circle.twitter:hover {
    background-color: #1DA1F2;
    color: #fff;
}

/* 6. YouTube (#FF0000 - Đỏ) */
.follow-icons-list.is-outline .icon.button.circle.youtube {
    border-color: #FF0000;
    color: #FF0000;
}
.follow-icons-list.is-outline .icon.button.circle.youtube:hover {
    background-color: #FF0000;
    color: #fff;
}

/* 7. LinkedIn (#0077b5 - Xanh) */
.follow-icons-list.is-outline .icon.button.circle.linkedin {
    border-color: #0077b5;
    color: #0077b5;
}
.follow-icons-list.is-outline .icon.button.circle.linkedin:hover {
    background-color: #0077b5;
    color: #fff;
}

/* 8. Pinterest (#E60023 - Đỏ đậm) */
.follow-icons-list.is-outline .icon.button.circle.pinterest {
    border-color: #E60023;
    color: #E60023;
}
.follow-icons-list.is-outline .icon.button.circle.pinterest:hover {
    background-color: #E60023;
    color: #fff;
}

/* 9. WhatsApp (#25D366 - Xanh lá) */
.follow-icons-list.is-outline .icon.button.circle.whatsapp {
    border-color: #25D366;
    color: #25D366;
}
.follow-icons-list.is-outline .icon.button.circle.whatsapp:hover {
    background-color: #25D366;
    color: #fff;
}

/* 10. Telegram (#0088cc - Xanh dương nhạt) */
.follow-icons-list.is-outline .icon.button.circle.telegram {
    border-color: #0088cc;
    color: #0088cc;
}
.follow-icons-list.is-outline .icon.button.circle.telegram:hover {
    background-color: #0088cc;
    color: #fff;
}

/* 11. Discord (#5865F2 - Tím xanh Blurple) */
.follow-icons-list.is-outline .icon.button.circle.discord {
    border-color: #5865F2;
    color: #5865F2;
}
.follow-icons-list.is-outline .icon.button.circle.discord:hover {
    background-color: #5865F2;
    color: #fff;
}

/* 12. Twitch (#9146FF - Tím) */
.follow-icons-list.is-outline .icon.button.circle.twitch {
    border-color: #9146FF;
    color: #9146FF;
}
.follow-icons-list.is-outline .icon.button.circle.twitch:hover {
    background-color: #9146FF;
    color: #fff;
}

/* 13. VKontakte (#0077FF - Xanh dương VK) */
.follow-icons-list.is-outline .icon.button.circle.vkontakte {
    border-color: #0077FF;
    color: #0077FF;
}
.follow-icons-list.is-outline .icon.button.circle.vkontakte:hover {
    background-color: #0077FF;
    color: #fff;
}

/* 14. Snapchat (#FFFC00 - Vàng tươi) */
/* Lưu ý: Màu vàng trên nền trắng khó nhìn, nên khi hover chữ sẽ màu đen */
.follow-icons-list.is-outline .icon.button.circle.snapchat {
    border-color: #FFFC00;
    color: #e6c200; 
}
.follow-icons-list.is-outline .icon.button.circle.snapchat:hover {
    background-color: #FFFC00;
    color: #000;
    border-color: #FFFC00;
}

/* 15. Email (#EA4335 - Màu đỏ Gmail chuẩn hoặc màu xám đậm #555) */
/* Tôi chọn màu đỏ Gmail vì nó phổ biến nhất cho biểu tượng Envelope */
.follow-icons-list.is-outline .icon.button.circle.email {
    border-color: #EA4335;
    color: #EA4335;
}
.follow-icons-list.is-outline .icon.button.circle.email:hover {
    background-color: #EA4335;
    color: #fff;
}

/* --- Style: Fill --- */
/* --- Cấu hình chung cho dạng Fill --- */
.follow-icons-list.is-fill .icon.button.circle {
    border: 2px solid transparent;
    color: #fff;
    transition: all 0.3s ease;
}

/* Hiệu ứng Hover chung: Giảm độ đậm nhẹ & Nổi lên */
.follow-icons-list.is-fill .icon.button.circle:hover {
    opacity: 0.9;
    transform: translateY(-3px);
    color: #fff;
}

/* 2. Facebook (#1877F2) */
.follow-icons-list.is-fill .icon.button.circle.facebook {
    background-color: #1877F2;
    border-color: #1877F2;
}

/* 3. Instagram (#E1306C) */
.follow-icons-list.is-fill .icon.button.circle.instagram {
    background-color: #E1306C;
    border-color: #E1306C;
}

/* 4. TikTok (#000000) */
.follow-icons-list.is-fill .icon.button.circle.tiktok {
    background-color: #000000;
    border-color: #000000;
}

/* 5. Twitter / X (#1DA1F2) */
.follow-icons-list.is-fill .icon.button.circle.twitter {
    background-color: #1DA1F2;
    border-color: #1DA1F2;
}

/* 6. YouTube (#FF0000) */
.follow-icons-list.is-fill .icon.button.circle.youtube {
    background-color: #FF0000;
    border-color: #FF0000;
}

/* 7. LinkedIn (#0077b5) */
.follow-icons-list.is-fill .icon.button.circle.linkedin {
    background-color: #0077b5;
    border-color: #0077b5;
}

/* 8. Pinterest (#E60023) */
.follow-icons-list.is-fill .icon.button.circle.pinterest {
    background-color: #E60023;
    border-color: #E60023;
}

/* 9. WhatsApp (#25D366) */
.follow-icons-list.is-fill .icon.button.circle.whatsapp {
    background-color: #25D366;
    border-color: #25D366;
}

/* 10. Telegram (#0088cc) */
.follow-icons-list.is-fill .icon.button.circle.telegram {
    background-color: #0088cc;
    border-color: #0088cc;
}

/* 11. Discord (#5865F2) */
.follow-icons-list.is-fill .icon.button.circle.discord {
    background-color: #5865F2;
    border-color: #5865F2;
}

/* 12. Twitch (#9146FF) */
.follow-icons-list.is-fill .icon.button.circle.twitch {
    background-color: #9146FF;
    border-color: #9146FF;
}

/* 13. VKontakte (#0077FF) */
.follow-icons-list.is-fill .icon.button.circle.vkontakte {
    background-color: #0077FF;
    border-color: #0077FF;
}

/* 14. Snapchat (#FFFC00) */
.follow-icons-list.is-fill .icon.button.circle.snapchat {
    background-color: #FFFC00;
    border-color: #FFFC00;
    color: #000; 
}

/* 15. Email (#EA4335) */
.follow-icons-list.is-fill .icon.button.circle.email {
    background-color: #EA4335;
    border-color: #EA4335;
}

/* --- Style: Small --- */
/* 1. Cấu hình chung cho dạng Small */
.follow-icons-list.is-small .icon.button.circle {
    width: 2.2em;
    height: 2.2em;
    font-size: 0.9em; 
    border: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: #f2f2f2;
    color: #555;
}

/* Hiệu ứng Hover chung: Phóng to nhẹ & Nổi lên */
.follow-icons-list.is-small .icon.button.circle:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 2. Facebook */
.follow-icons-list.is-small .icon.button.circle.facebook { background-color: rgba(24, 119, 242, 0.1); color: #1877F2; }
.follow-icons-list.is-small .icon.button.circle.facebook:hover { background-color: #1877F2; color: #fff; }

/* 3. Instagram */
.follow-icons-list.is-small .icon.button.circle.instagram { background-color: rgba(225, 48, 108, 0.1); color: #E1306C; }
.follow-icons-list.is-small .icon.button.circle.instagram:hover { background-color: #E1306C; color: #fff; }

/* 4. TikTok */
.follow-icons-list.is-small .icon.button.circle.tiktok { background-color: rgba(0, 0, 0, 0.05); color: #000; }
.follow-icons-list.is-small .icon.button.circle.tiktok:hover { background-color: #000; color: #fff; }

/* 5. Twitter / X */
.follow-icons-list.is-small .icon.button.circle.twitter { background-color: rgba(29, 161, 242, 0.1); color: #1DA1F2; }
.follow-icons-list.is-small .icon.button.circle.twitter:hover { background-color: #1DA1F2; color: #fff; }

/* 6. YouTube */
.follow-icons-list.is-small .icon.button.circle.youtube { background-color: rgba(255, 0, 0, 0.1); color: #FF0000; }
.follow-icons-list.is-small .icon.button.circle.youtube:hover { background-color: #FF0000; color: #fff; }

/* 7. LinkedIn */
.follow-icons-list.is-small .icon.button.circle.linkedin { background-color: rgba(0, 119, 181, 0.1); color: #0077b5; }
.follow-icons-list.is-small .icon.button.circle.linkedin:hover { background-color: #0077b5; color: #fff; }

/* 8. Pinterest */
.follow-icons-list.is-small .icon.button.circle.pinterest { background-color: rgba(230, 0, 35, 0.1); color: #E60023; }
.follow-icons-list.is-small .icon.button.circle.pinterest:hover { background-color: #E60023; color: #fff; }

/* 9. WhatsApp */
.follow-icons-list.is-small .icon.button.circle.whatsapp { background-color: rgba(37, 211, 102, 0.1); color: #25D366; }
.follow-icons-list.is-small .icon.button.circle.whatsapp:hover { background-color: #25D366; color: #fff; }

/* 10. Telegram */
.follow-icons-list.is-small .icon.button.circle.telegram { background-color: rgba(0, 136, 204, 0.1); color: #0088cc; }
.follow-icons-list.is-small .icon.button.circle.telegram:hover { background-color: #0088cc; color: #fff; }

/* 11. Discord */
.follow-icons-list.is-small .icon.button.circle.discord { background-color: rgba(88, 101, 242, 0.1); color: #5865F2; }
.follow-icons-list.is-small .icon.button.circle.discord:hover { background-color: #5865F2; color: #fff; }

/* 12. Twitch */
.follow-icons-list.is-small .icon.button.circle.twitch { background-color: rgba(145, 70, 255, 0.1); color: #9146FF; }
.follow-icons-list.is-small .icon.button.circle.twitch:hover { background-color: #9146FF; color: #fff; }

/* 13. VKontakte */
.follow-icons-list.is-small .icon.button.circle.vkontakte { background-color: rgba(0, 119, 255, 0.1); color: #0077FF; }
.follow-icons-list.is-small .icon.button.circle.vkontakte:hover { background-color: #0077FF; color: #fff; }

/* 14. Snapchat */
.follow-icons-list.is-small .icon.button.circle.snapchat { background-color: rgba(255, 252, 0, 0.2); color: #e6c200; }
.follow-icons-list.is-small .icon.button.circle.snapchat:hover { background-color: #FFFC00; color: #000; }

/* 15. Email */
.follow-icons-list.is-small .icon.button.circle.email { background-color: rgba(234, 67, 53, 0.1); color: #EA4335; }
.follow-icons-list.is-small .icon.button.circle.email:hover { background-color: #EA4335; color: #fff; }

/* --- Tablet (768px - 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .follow-icons-list {
        gap: 8px;
        justify-content: center;
    }
    
    /* Optional: Scale down slightly if needed */
    .follow-icons-list .icon.button.circle {
        font-size: 0.9em; 
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
    .follow-icons-list {
        gap: 12px;
        justify-content: center;
    }

    .follow-icons-title {
        text-align: center;
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }

    /* Ensure icons are easy to tap */
    .follow-icons-list .icon.button.circle {
        font-size: 1em;
    }
}

/* === CSS MỚI: FRONTEND SEARCH BOX === */

.search-box-form {
    width: 100%;
}

.search-box-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    border-style: solid;
    border-width: 2px;
}

.search-box-form.is-style-fill .search-box-wrapper {
    border-color: transparent;
}

.search-box-form.is-style-outline .search-box-wrapper {
    background-color: transparent;
}

.search-box-wrapper .search-field {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 0.5em 0.75em;
    /* color: inherit;  */
    outline: none;
    width: 100%;
}

.search-box-wrapper .search-submit {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--icon-color, #333);
    /* Đọc màu icon */
    padding: 0 0.75em;
    line-height: 1;
}

/* --- Vị trí Icon --- */

/* 1. Icon bên trong */
.search-box-form.is-icon-inside .search-field {
    /* Đẩy text ra xa icon */
    padding-left: 2.5em;
}

.search-box-form.is-icon-inside .search-submit {
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 0.5em;
}

/* CSS cho Element Product Categories */
/* Tạo khung cố định tỷ lệ 4/3 cho cả Ảnh và SVG */
.product-img-wrap {
    display: flex;              
    justify-content: center;    
    align-items: center;      
    width: 100%;
    aspect-ratio: 4 / 3;       
    overflow: hidden;      
    background-color: #f0f2f5;  
    position: relative;
}

/* Style cho Ảnh sản phẩm thật */
.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;         
    transition: transform 0.4s ease; 
}

/* Hiệu ứng Hover: Chỉ zoom ảnh thật, không zoom SVG */
.card:hover .product-img-wrap img {
    transform: scale(1.05);
}

.card-title a {
    display: block;  
    font-size: 16px; 
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em;             
}

/* Tinh chỉnh khoảng cách title với giá */
.card-title {
    margin-bottom: 0.75rem;
}
/* Mặc định trên Desktop: Hiển thị ngang hàng (inline) */
.card-text.price .old-price,
.card-text.price .sale-price {
    display: inline-block;
}

/* Style riêng cho SVG (Icon fallback) */
.product-img-wrap .is-fallback-svg {
    width: 100px;           
    height: 100px;
    stroke: #d1d5db;         
    fill: none;
    opacity: 0.8;
}
/* Chỉ tác động vào nút Danger nằm trong khối product-card-actions */
.product-card-actions .btn-outline-danger {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 10px 15px;
    transition: all 0.2s ease;
    border: 2px solid #d40511;
    color: #d40511;
    flex-basis: 100%;
}
.product-card-actions .btn-outline-danger:hover {
    background-color: #d40511;
    color: #fff;
}
/* Chỉ tác động vào nút Secondary nằm trong khối product-card-actions */
.product-card-actions .btn-outline-secondary {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 10px 15px;
    transition: all 0.2s ease;
    border: 2px solid #6c757d;
    color: #6c757d;
    flex-basis: 100%;
}
.product-card-actions .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
    border-color: #6c757d;
}

/* Trên Mobile & Tablet (Màn hình nhỏ hơn 992px) */
@media (max-width: 991.98px) {
    .card-text.price {
        line-height: 1.4; 
        min-height: 3.5em;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .card-text.price .old-price {
        display: block;
        margin-right: 0;
        font-size: 0.9em;
        margin-bottom: 2px;
    }

    .card-text.price .sale-price {
        display: block;
        font-size: 1.1em;
        margin-top: 0;
    }
}

/* 1. Wrapper: Áp dụng hiệu ứng ẩn/hiện mượt mà (tùy chọn) */
.my-product-slider-wrapper {
    position: relative;
    padding: 0;
    overflow: hidden;
    opacity: 1; 
    visibility: visible;
    transition: opacity 0.5s ease-in-out;
}

.my-product-slider-wrapper .slider-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2;
    width: auto;
    height: auto;
    display: inline-block;
    color: #d40511;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    line-height: 1;
}

.my-product-slider-wrapper:hover .slider-btn {
    opacity: 1;
    visibility: visible;
}

.my-product-slider-wrapper .slider-btn:hover {
    color: #d40511; 
    transform: translateY(-50%) scale(1.15); 
    background: transparent;
}

.prev-btn {
    left: 15px; 
}
.next-btn {
    right: 15px; 
}

.slider-btn svg {
    display: block;
    width: 25px;
    height: 25px;
    stroke: currentColor; 
    stroke-width: 3px;
    fill: none;
}

.slider-track {
    display: flex;
    flex-wrap: nowrap; /* Bắt buộc để trượt */
    transition: transform 0.5s ease-in-out;
}

.my-product-slider-wrapper .slider-btn {
    display: none;
}

/* Chỉ hiện nút khi hover VÀ có class 'can-slide' (sẽ thêm bằng JS bên dưới) */
.my-product-slider-wrapper.can-slide:hover .slider-btn {
    display: flex;
}

/* 1. Mặc định Mobile (< 768px): 2 Cột */
.slider-item {
    flex: 0 0 50%;
    max-width: 50%;
}
/* 2. Tablet (>= 768px): 3 Cột */
@media (min-width: 768px) {
    .slider-item {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
/* 3. Desktop (>= 992px): Theo cài đặt ($columns) */
@media (min-width: 992px) {
    .slider-item {
        flex: 0 0 var(--desktop-width);
        max-width: var(--desktop-width);
    }
}


/* =========================================
   PRODUCT CATEGORIES (ĐỒNG BỘ THEO MẪU)
   ========================================= */

/* 1. Tổng thể Card */
.category-card-flat {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;     
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;     
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hiệu ứng Hover */
.category-card-flat:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 2. Khung bao ảnh */
.category-image-wrapper {
    display: block;
    overflow: hidden;
    position: relative;
    background-color: #f0f2f5; 
    width: 100%;
    aspect-ratio: 4 / 3;  
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex; 
    align-items: center;
    justify-content: center;
}

/* 3. Ảnh */
.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

/* Hover zoom ảnh */
.category-card-flat:hover .category-image {
    transform: scale(1.05);
}

/* 4. Style riêng cho SVG */
svg.category-image.is-fallback-svg {
    width: 100px;     
    height: 100px;    
    stroke: #d1d5db;
    fill: none;
    opacity: 0.8;
    object-fit: contain; 
    padding: 0;
}

/* 5. Nội dung chữ */
.category-text-wrapper {
    padding: 15px;  
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

/* 6. Tiêu đề */
.category-title {
    margin: 0;
    margin-bottom: 8px;
    font-size: 1.1rem; 
    font-weight: 600;
    text-transform: uppercase;
}

.category-title a {
    text-decoration: none;
    color: #000000;  
    transition: color 0.3s ease;
}

/* 7. Số lượng sản phẩm */
.category-count {
    margin: 0;
    margin-top: auto;
    font-size: 0.7rem; 
    font-weight: 600;
    text-transform: uppercase;
    color: #d40511;  
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .category-title {
        font-size: 0.95rem;
    }
}


/* --- BLOG CARD STYLING --- */

/* --- BLOG CARD EQUAL HEIGHT --- */

/* 1. Xử lý Tiêu đề (Luôn chiếm không gian 2 dòng) */
.blog-title a {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-height: 2.8em;
}

/* 2. Xử lý Mô tả ngắn  */
.blog-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* 3. Đảm bảo Card Body co giãn hết chiều cao */
.card-body {
    flex: 1 1 auto; /* Quan trọng để flex column hoạt động đúng */
}

/* Style cho nút Đọc thêm */
.btn-outline-custom {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #555;    
    background-color: transparent;
    border: 1px solid #ced4da; 
    border-radius: 4px;     
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

/* Hiệu ứng khi di chuột */
.btn-outline-custom:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Icon bên trong nút */
.btn-outline-custom i {
    font-size: 0.9em;
}