:root {
    /* Nhóm màu chính */
    --color-heading: #1E2A3B;
    --color-on-action: #F8FAFC;
    --color-action-pressed: #D81920;
    --color-action-pressed-alt: #EC1C24;
    --color-brand-blue: #292C83;
    --color-secondary-600: #292C83;
    --color-icon-action-1: #2E3191;

    /* Nhóm màu trung tính */
    --color-border-primary: #E2E8F0;
    --color-neutral-300: #94A3B8;
    --color-neutral-200: #F1F5F9;

    /* Mã màu cố định */
    --color-white-gray: #F8FAFC;
    --color-black: #000000;
    --color-white: #FFFFFF;
}

@font-face {
    font-family: 'VNF-AbrilFatface';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Abril-Fatface/SVN-Abril-Fatface.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* SVN-Gilroy/SVN-Gilroy-Light */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Gilroy/SVN-Gilroy-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* SVN-Gilroy/SVN-Gilroy-Regular */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Gilroy/SVN-Gilroy-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* SVN-Gilroy/SVN-Gilroy-Medium */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Gilroy/SVN-Gilroy-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SVN-Gilroy/SVN-Gilroy-SemiBold */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Gilroy/SVN-Gilroy-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* SVN-Gilroy/SVN-Gilroy-Bold */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Gilroy/SVN-Gilroy-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* SVN-Gilroy/SVN-Gilroy-Black (Dùng cho các tiêu đề cực dày) */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/wp-content/themes/fahasa-child/assets/fonts/SVN-Gilroy/SVN-Gilroy-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


.text-brand-blue { color: var(--color-brand-blue) !important; }
.text-heading { color: var(--color-heading) !important; }
.text-on-action { color: var(--color-on-action) !important; }
.text-action-pressed { color: var(--color-action-pressed) !important; }
.text-brand-blue { color: var(--color-brand-blue) !important; }
.text-neutral-300 { color: var(--color-neutral-300) !important; }
.text-black { color: var(--color-black) !important; }
.text-white { color: var(--color-white) !important; }

/* Nền xanh thương hiệu FAHASA */
.bg-brand-blue { background-color: var(--color-brand-blue) !important; }

/* Nền đỏ cho nút bấm hoặc thông báo */
.bg-action-pressed { background-color: var(--color-action-pressed) !important; }

/* Nền trung tính cho thanh điều hướng hoặc mảng phụ */
.bg-neutral-200 { background-color: var(--color-neutral-200) !important; }

/* Nền trắng xám đặc trưng */
.bg-white-gray { background-color: var(--color-white-gray) !important; }

/* Đường viền dưới header hoặc phân đoạn */
.border-primary { border-color: var(--color-border-primary) !important; }
.border-on-action { border-bottom: 2px solid var(--color-border-primary) !important; }
.border-action-pressed { border-bottom: 2px solid var(--color-action-pressed) !important; }

/* Màu cho các icon đặc biệt */
.icon-action-1 { fill: var(--color-icon-action-1) !important; color: var(--color-icon-action-1) !important; }

/* Dấu gạch chéo phân cách menu */
.menu-divider { 
    .col{
        padding-bottom: 0!important;
    }
    
    .section-bg{
        background: var(--color-neutral-200) !important;
    } 
    .stack p,
    .stack a{
        /* giới thiệu chung */


            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
            /* identical to box height */
            text-transform: capitalize;

            color: #000000;


    }
}
.mobile-sidebar .sidebar-menu .menu-item,
.social-contact-tqt,
.header-bottom.hide-for-medium{
 display: none !important;
}

/* --- NHÓM DISPLAY FONT (SIZE > 40px) --- */



/* Nhóm font Serif nghệ thuật */
.font-playfair { font-family: 'Playfair Display SC', serif; }
.font-abril { font-family: 'Abril Fatface', serif; }
.font-vnf-abril { font-family: 'VNF-AbrilFatface', serif; }

/* Nhóm font Sans-serif hiện đại */
.font-gilroy { font-family: 'SVN-Gilroy', sans-serif; }


.size-10{
    font-size: 10px !important;
    line-height: 14px !important; 
}
.size-13{
    font-size: 12px !important;
    line-height: 16px !important;
}
.caption-text,
.size-14 {
    font-size: 14px !important; /* */
    line-height: 19px !important; /* */
}
.body-small,
.size-16 {
    font-size: 16px !important; /* */
    line-height: 22px !important; /* */
}
.body-main,
.size-18 {
    font-size: 18px !important; /* */
    line-height: 25px !important; /* */
}
.text-h4,
.size-20 {
    font-size: 20px !important; /* */
    line-height: 27px !important; /* */
}

.text-h3,
.size-24 {
    font-size: 24px !important; /* */
    line-height: 33px !important; /* */
}
.size-32 {
    font-size: 32px!important;
    line-height: 40px!important;
}

/* Font-size: 114px - Xuất hiện 10 lần trong thiết kế */
.size-114,
.text-114, 
.display-hero {
    font-size: 114px !important;
    line-height: 1 !important; /* Tỉ lệ line-height phù hợp cho font lớn */
    letter-spacing: -0.02em; /* Giảm khoảng cách chữ cho font cực lớn để cân đối hơn */
}

/* Font-size: 56px - Xuất hiện 5 lần trong thiết kế */
.size-56,
.text-56, 
.display-large {
    font-size: 56px !important;
    line-height: 1.25 !important;
}

/* Font-size: 44px - Xuất hiện 1 lần trong thiết kế */
.size-44,
.text-44, 
.display-medium {
    font-size: 44px !important;
    line-height: 1.25 !important;
}
.order-0{
    order: 0;
}
.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.order-3{
    order: 3;
}
.order-4{
    order: 4;
}
.box-reverse{
    display: flex;
    flex-direction: column-reverse;
}
.text-center{
    text-align: center;
}
.menu-divider-accordion{
    .accordion-title {
        display: flex;
        padding: .6em;
        border-top: none;
        color: #000000;
        font-weight: 800;
        font-size: 16px;
        line-height: 22px;
        text-transform: uppercase;
    }
    button.toggle{
            right: 0;
            left: auto;
            color: #2E3191;
            font-weight: 900;
            font-size: 16px;
            line-height: 40px;
            top: -2px;
    }
    .active .toggle{
        top: .3em;
    }
    .ux-menu-link__link{
        line-height: 40px !important;
    }
}
.back-to-top{
    width: 80px;
    height: 56px;
    background-color: #292C83 !important;
    /* border-radius: 100px !important; */
    padding: 14px 16px !important;
    color: #F8FAFC !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
@media (min-width: 768px) { /*sm*/
    .menu-divider-accordion{
        display: none!important;
    }
    .size-sm-10{
        font-size: 10px !important;
        line-height: 14px !important; 
    }
    .size-sm-13{
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .caption-sm-text,
    .size-sm-14 {
        font-size: 14px !important; /* */
        line-height: 19px !important; /* */
    }
    .body-sm-small,
    .size-sm-16 {
        font-size: 16px !important; /* */
        line-height: 22px !important; /* */
    }
    .body-main-sm,
    .size-sm-18 {
        font-size: 18px !important; /* */
        line-height: 25px !important; /* */
    }
    .text-sm-h4,
    .size-sm-20 {
        font-size: 20px !important; /* */
        line-height: 27px !important; /* */
    }

    .text-sm-h3,
    .size-sm-24 {
        font-size: 24px !important; /* */
        line-height: 33px !important; /* */
    }
    .size-sm-32 {
        font-size: 32px!important;
        line-height: 40px!important;
    }
    /* Font-size: 114px - Xuất hiện 10 lần trong thiết kế */
    .size-sm-114,
    .text-sm-114, 
    .display-hero-sm-sm {
        font-size: 114px !important;
        line-height: 1 !important; /* Tỉ lệ line-height phù hợp cho font lớn */
        letter-spacing: -0.02em; /* Giảm khoảng cách chữ cho font cực lớn để cân đối hơn */
    }

    /* Font-size: 56px - Xuất hiện 5 lần trong thiết kế */
    .size-sm-56,
    .text-sm-56, 
    .display-large-sm {
        font-size: 56px !important;
        line-height: 1.25 !important;
    }

    /* Font-size: 44px - Xuất hiện 1 lần trong thiết kế */
    .size-sm-44,
    .text-sm-44, 
    .display-medium-sm {
        font-size: 44px !important;
        line-height: 1.25 !important;
    }

    .order-sm-0{
        order: 0;
    }
    .order-sm-1{
        order: 1;
    }
    .order-sm-2{
        order: 2;
    }
    .order-sm-3{
        order: 3;
    }
    .order-sm-4{
        order: 4;
    }
}
@media (min-width: 768px) { /*md*/
    .size-md-10{
        font-size: 10px !important;
        line-height: 14px !important; 
    }
    .size-md-13{
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .caption-md-text,
    .size-md-14 {
        font-size: 14px !important; /* */
        line-height: 19px !important; /* */
    }
    .body-md-small,
    .size-md-16 {
        font-size: 16px !important; /* */
        line-height: 22px !important; /* */
    }
    .body-main-md,
    .size-md-18 {
        font-size: 18px !important; /* */
        line-height: 25px !important; /* */
    }
    .text-md-h4,
    .size-md-20 {
        font-size: 20px !important; /* */
        line-height: 27px !important; /* */
    }

    .text-md-h3,
    .size-md-24 {
        font-size: 24px !important; /* */
        line-height: 33px !important; /* */
    }
    .size-md-32 {
        font-size: 32px!important;
        line-height: 40px!important;
    }

    /* Font-size: 114px - Xuất hiện 10 lần trong thiết kế */
    .size-md-114,
    .text-md-114, 
    .display-hero-md-md {
        font-size: 114px !important;
        line-height: 1 !important; /* Tỉ lệ line-height phù hợp cho font lớn */
        letter-spacing: -0.02em; /* Giảm khoảng cách chữ cho font cực lớn để cân đối hơn */
    }

    /* Font-size: 56px - Xuất hiện 5 lần trong thiết kế */
    .size-md-56,
    .text-md-56, 
    .display-large-md {
        font-size: 56px !important;
        line-height: 1.25 !important;
    }

    /* Font-size: 44px - Xuất hiện 1 lần trong thiết kế */
    .size-md-44,
    .text-md-44, 
    .display-medium-md {
        font-size: 44px !important;
        line-height: 1.25 !important;
    }
    .order-md-0{
        order: 0;
    }
    .order-md-1{
        order: 1;
    }
    .order-md-2{
        order: 2;
    }
    .order-md-3{
        order: 3;
    }
    .order-md-4{
        order: 4;
    }

}

@media (min-width: 992px) { /*lg*/
    .size-lg-10{
        font-size: 10px !important;
        line-height: 14px !important; 
    }
    .size-lg-13{
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .caption-lg-text,
    .size-lg-14 {
        font-size: 14px !important; /* */
        line-height: 19px !important; /* */
    }
    .body-lg-small,
    .size-lg-16 {
        font-size: 16px !important; /* */
        line-height: 22px !important; /* */
    }
    .body-main-lg,
    .size-lg-18 {
        font-size: 18px !important; /* */
        line-height: 25px !important; /* */
    }
    .text-lg-h4,
    .size-lg-20 {
        font-size: 20px !important; /* */
        line-height: 27px !important; /* */
    }

    .text-lg-h3,
    .size-lg-24 {
        font-size: 24px !important; /* */
        line-height: 33px !important; /* */
    }
    .size-lg-32 {
        font-size: 32px!important;
        line-height: 40px!important;
    }

    /* Font-size: 114px - Xuất hiện 10 lần trong thiết kế */
    .size-lg-114,
    .text-lg-114, 
    .display-hero-lg-lg {
        font-size: 114px !important;
        line-height: 1 !important; /* Tỉ lệ line-height phù hợp cho font lớn */
        letter-spacing: -0.02em; /* Giảm khoảng cách chữ cho font cực lớn để cân đối hơn */
    }

    /* Font-size: 56px - Xuất hiện 5 lần trong thiết kế */
    .size-lg-56,
    .text-lg-56, 
    .display-large-lg {
        font-size: 56px !important;
        line-height: 1.25 !important;
    }

    /* Font-size: 44px - Xuất hiện 1 lần trong thiết kế */
    .size-lg-44,
    .text-lg-44, 
    .display-medium-lg {
        font-size: 44px !important;
        line-height: 1.25 !important;
    }
    .order-lg-0{
        order: 0;
    }
    .order-lg-1{
        order: 1;
    }
    .order-lg-2{
        order: 2;
    }
    .order-lg-3{
        order: 3;
    }
    .order-lg-4{
        order: 4;
    }

    .box-reverse-lg{
        display: flex;
        flex-direction: column-reverse;
    }
    .text-lg-left{
        text-align: left!important;
    }

}
@media (min-width: 1200px) { /*xl*/
    .size-xl-10{
        font-size: 10px !important;
        line-height: 14px !important; 
    }
    .size-xl-13{
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .caption-xl-text,
    .size-xl-14 {
        font-size: 14px !important; /* */
        line-height: 19px !important; /* */
    }
    .body-xl-small,
    .size-xl-16 {
        font-size: 16px !important; /* */
        line-height: 22px !important; /* */
    }
    .body-main-xl,
    .size-xl-18 {
        font-size: 18px !important; /* */
        line-height: 25px !important; /* */
    }
    .text-xl-h4,
    .size-xl-20 {
        font-size: 20px !important; /* */
        line-height: 27px !important; /* */
    }

    .text-xl-h3,
    .size-xl-24 {
        font-size: 24px !important; /* */
        line-height: 33px !important; /* */
    }
    .size-xl-32 {
        font-size: 32px!important;
        line-height: 40px!important;
    }

    /* Font-size: 114px - Xuất hiện 10 lần trong thiết kế */
    .size-xl-114,
    .text-xl-114, 
    .display-hero-xl-xl {
        font-size: 114px !important;
        line-height: 1 !important; /* Tỉ lệ line-height phù hợp cho font lớn */
        letter-spacing: -0.02em; /* Giảm khoảng cách chữ cho font cực lớn để cân đối hơn */
    }

    /* Font-size: 56px - Xuất hiện 5 lần trong thiết kế */
    .size-xl-56,
    .text-xl-56, 
    .display-large-xl {
        font-size: 56px !important;
        line-height: 1.25 !important;
    }

    /* Font-size: 44px - Xuất hiện 1 lần trong thiết kế */
    .size-xl-44,
    .text-xl-44, 
    .display-medium-xl {
        font-size: 44px !important;
        line-height: 1.25 !important;
    }

    .order-xl-0{
        order: 0;
    }
    .order-xl-1{
        order: 1;
    }
    .order-xl-2{
        order: 2;
    }
    .order-xl-3{
        order: 3;
    }
    .order-xl-4{
        order: 4;
    }
}
@media (min-width: 1400px) { /*xxl*/
    .size-xxl-10{
        font-size: 10px !important;
        line-height: 14px !important; 
    }
    .size-xxl-13{
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .caption-xxl-text,
    .size-xxl-14 {
        font-size: 14px !important; /* */
        line-height: 19px !important; /* */
    }
    .body-xxl-small,
    .size-xxl-16 {
        font-size: 16px !important; /* */
        line-height: 22px !important; /* */
    }
    .body-main-xxl,
    .size-xxl-18 {
        font-size: 18px !important; /* */
        line-height: 25px !important; /* */
    }
    .text-xxl-h4,
    .size-xxl-20 {
        font-size: 20px !important; /* */
        line-height: 27px !important; /* */
    }

    .text-xxl-h3,
    .size-xxl-24 {
        font-size: 24px !important; /* */
        line-height: 33px !important; /* */
    }
    .size-xxl-32 {
        font-size: 32px!important;
        line-height: 40px!important;
    }

    /* Font-size: 114px - Xuất hiện 10 lần trong thiết kế */
    .size-xxl-114,
    .text-xxl-114, 
    .display-hero-xxl-xxl {
        font-size: 114px !important;
        line-height: 1 !important; /* Tỉ lệ line-height phù hợp cho font lớn */
        letter-spacing: -0.02em; /* Giảm khoảng cách chữ cho font cực lớn để cân đối hơn */
    }

    /* Font-size: 56px - Xuất hiện 5 lần trong thiết kế */
    .size-xxl-56,
    .text-xxl-56, 
    .display-large-xxl {
        font-size: 56px !important;
        line-height: 1.25 !important;
    }

    /* Font-size: 44px - Xuất hiện 1 lần trong thiết kế */
    .size-xxl-44,
    .text-xxl-44, 
    .display-medium-xxl {
        font-size: 44px !important;
        line-height: 1.25 !important;
    }
    .order-xxl-0{
        order: 0;
    }
    .order-xxl-1{
        order: 1;
    }
    .order-xxl-2{
        order: 2;
    }
    .order-xxl-3{
        order: 3;
    }
    .order-xxl-4{
        order: 4;
    }
}

.layout-responsive-grid {
    gap: 8px;
    display: grid !important;
    justify-items: center;
    grid-template-columns: repeat(2, 1fr);
    /*grid-template-rows: repeat(6, 1fr);*/
    .col{
        padding: 0!important;
    }
}

/* Desktop (từ 768px trở lên, bạn có thể chỉnh breakpoint tùy dự án) */
@media (min-width: 768px) {
    .layout-responsive-grid {
        display: flex!important;
        flex-flow: row wrap;
        width: 100%;
        gap: 0;
        .col{
            padding: 10px!important;
        }
    }
}


.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: calc(var(--bs-spacer) * 0.25) !important; }
.pe-2 { padding-right: calc(var(--bs-spacer) * 0.5) !important; }
.pe-3 { padding-right: var(--bs-spacer) !important; }
.pe-4 { padding-right: calc(var(--bs-spacer) * 1.5) !important; }
.pe-5 { padding-right: calc(var(--bs-spacer) * 3) !important; }
.bookstore-history .pe-60,
.pe-60 { padding-right: 60px !important; }

.social-contact-footer .icon-box-left .icon-box-icon+.icon-box-text {
    padding-left: 4px !important;
}
.footer-logo{
    max-width: 355px;
}
.ml-8{
    margin-left: 8px;
}
.header-language {
    align-items: center;
}
.mobile-nav .header-language a,
.mobile-nav .header-language {
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    color: #F8FAFC  !important;
    text-transform: uppercase !important;
}
.mobile-nav .current-lang{
    width: 29px!important;
    height: 19px!important;

    background: #FFFFFF!important;
    border-radius: 4px!important;

    color: #1E2A3B!important;
    font-weight: 700 !important; 

    padding: 0;
    text-align: center;
    justify-content: center;
}
.slide-bookstore-space .box-default {
/*     max-width: 40% !important; */
    padding-left: 12px !important;
    padding-right: 12px !important;
}
	.slide-bookstore-space .slider-style-container{
		padding-bottom: 40px;
	}
	.slide-bookstore-space .flickity-prev-next-button.previous{
		bottom: 0!important;
		top: auto!important;
		left: calc(50% - 40px)!important;
		display: block !important;
	}
	.slide-bookstore-space .flickity-prev-next-button.next{
		bottom: 0!important;
		top: auto!important;
		right: calc(50% - 40px)!important;
		display: block !important;
	}

.header-top{
	display: none!important;
}