/****************************
 * Global style
*****************************/
/* Main sections */
.site-sticky {position:fixed; z-index:40; top:0; left:0; right:0;}
.site-header {position:relative; z-index:30;}
.site-content {position:relative; z-index:20;}
.site-footer {position:relative; z-index:10;}

/* Footer stick to bottom */
html, body {min-height:100vh;}
body {
    display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
    -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column;
    -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between;
}

/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
body {
    overscroll-behavior-y:none;
}

/* Admin bar */
@media only screen and (min-width:783px) {
    html.has-admin-bar {--admin-bar-height:32px;}
}

body.admin-bar [data-menu*="sticky"] {top:var(--admin-bar-height);}
@media screen and (max-width:782px) {
    html.has-admin-bar {margin-top:0 !important;}
    html #wpadminbar {display:none;}
}

/* Admin bar can cause conflict with Woocommerce Selector (select-2 dropdown) */
/* Move a little bit, equal with wp-admin bar height */
body.admin-bar .select2-container--open .select2-dropdown {margin-top:-32px;}

/* Avoid horizontal scroll on firefox */
@-moz-document url-prefix() {
    body {
        overflow-x: hidden;
    }
}


/****************************
 * Editor style
****************************/
p:empty {display:none;}

/* Button group */
p.vii-button-group {display:flex; flex-wrap:wrap; gap:8px 11px;}
p[style*="text-align:center"].vii-button-group,
p[style*="text-align: center"].vii-button-group {justify-content:center;}

/* Force white text color */
.txt_color_white {
    --vii-color-text:var(--vii-color-white);
    --vii-color-heading:var(--vii-color-white);
    --vii-color-permalink:var(--vii-color-white);
    --vii-color-permalink-highlight:var(--vii-color-white);
}
.txt_color_white [class*="btn_primary"] {--btn-height:45px;}

/* Text color */
.main_content .txt_color_primary {color:var(--vii-color-primary);}

/* text panel */
p:has(.txt_panel) + p:has(.txt_panel) {margin-top:-8px;}
.txt_color_white .txt_panel {background:var(--vii-color-white); color:var(--vii-color-primary);}

/* Text size */
.main_content .txt_16px {font-size:var(--vii-size-16);}

/* Text alignment */
.txt_inline_block {display:inline-block;}
.txt_right {text-align:right; display:block;}
.txt_center {text-align:center; display:block;}
.txt_italic {font-style:italic;}
.txt_center_justify {text-align:justify; -moz-text-align-last:center; text-align-last:center; display:block;}

/* permalink > word break to avoid horizontal scroll */
.wpb_text_column p a:not([class]) {word-wrap:break-word;}


/****************************
 * Button
****************************/
/* button primary */
[class*="btn_primary_orange"] {
    background:var(--vii-color-turquoise);
    overflow:hidden;
}
[class*="btn_primary_orange"]:before {
    content:"";
    inset:0; position:absolute; z-index:1;
    background:var(--vii-color-gradient-orange);
    transition:opacity .3s ease;
}
[class*="btn_primary_orange"] span {position:relative; z-index:2;}
[class*="btn_primary_orange"]:hover:before, [class*="btn_primary_orange"]:focus:before {opacity:0;}

/* button primary arrow */
[class*="btn_primary_arrow"] {background:var(--btn-bg-color-hover);}
[class*="btn_primary_arrow"]:before {
    content:"";
    position:absolute; top:0; left:0; inset:0; z-index:1;
    background:var(--btn-bg-color); border-radius:8px;
    transition:var(--vii-transition);
}
[class*="btn_primary_arrow"] > span {position:relative; z-index:2;}
[class*="btn_primary_arrow"]:hover:before, [class*="btn_primary_arrow"]:focus:before {opacity:0}

/* button primary arrow orange */
[class*="btn_primary"][class*="_orange"] {
    --btn-bg-color:var(--vii-color-gradient-orange);
}

/* btn arrow */
[class*="btn_arrow"] {font-size:0;}

/* button with text color white */
.txt_color_white .btn_primary, .txt_color_white .btn_primary_arrow {
    --btn-bg-color:var(--vii-color-white);
    --btn-color:var(--vii-color-primary);
}
.txt_color_white .btn_arrow {background:var(--vii-color-white);}
.txt_color_white .btn_arrow:before {color:var(--vii-color-blue);}
.txt_color_white .btn_arrow:after {background:var(--vii-color-white);}


/* Button arrow inline */
.btn_inline_arrow {
    display:inline-block; position:relative; padding-right:20px; overflow:hidden;
    font-size:var(--vii-size-14); font-weight:600;
    line-height:1.2; text-transform:uppercase; color:var(--vii-color-blue);
}
.btn_inline_arrow:before, .btn_inline_arrow:after {
    font-family:var(--vii-font-icomoon), fantasy; content:"\e927";
    font-size:10px; line-height:1; font-weight:400;
    position:absolute; top:50%; transform:translateY(-50%);
    transition:transform .3s ease;
}
.btn_inline_arrow:before {left:2px; transform:translate(-150%, -50%);}
.btn_inline_arrow:after {right:2px}

.btn_inline_arrow:hover, .btn_inline_arrow:focus,
.trigger-hover:hover .btn_inline_arrow, .trigger-hover:focus .btn_inline_arrow {
    padding-left:20px; padding-right:0;
    color:var(--vii-color-orange);
}
.btn_inline_arrow:hover:before, .btn_inline_arrow:focus:before,
.trigger-hover:hover .btn_inline_arrow:before, .trigger-hover:focus .btn_inline_arrow:before {
    transform:translate(0, -50%);
}
.btn_inline_arrow:hover:after, .btn_inline_arrow:focus:after,
.trigger-hover:hover .btn_inline_arrow:after, .trigger-hover:focus .btn_inline_arrow:after {
    transform:translate(150%, -50%);
}


/****************************
 * Spacing
****************************/
/* the last element in a text block will have no spacing */
.wpb_text_column :last-child {margin-bottom:0;}

/* Spacing: Custom */
.no-margin-bottom {margin-bottom:0 !important;}
.margin-bottom-default {margin-bottom:var(--vii-spacing-default) !important;}
.margin-bottom-heading {margin-bottom:var(--vii-spacing-heading) !important;}
.margin-bottom-64px {margin-bottom:var(--vii-spacing-64) !important;}
.margin-bottom-48px {margin-bottom:var(--vii-spacing-48) !important;}
.margin-bottom-24px {margin-bottom:var(--vii-spacing-24) !important;}
.margin-bottom-16px {margin-bottom:var(--vii-spacing-16) !important;}

.pt-default {padding-top:var(--vii-spacing-default);}
.pt-heading {padding-top:var(--vii-spacing-heading);}


/****************************
 * Miscellaneous
****************************/
/* Visibility Classes */
.hidden-mobile, .hidden-tablet-v, .hidden-tablet-h, .hidden-touch-devices {display:block;}
.show-mobile, .show-tablet-v, .show-tablet-h, .show-touch-devices {display:none;}

/* Placeholder */
body ::-webkit-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body ::-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body :-ms-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body :-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}

/* Full width */
.vii-full-width {margin-left:calc(-1 * var(--vii-gap-side) - 0.5px); margin-right:calc(-1 * var(--vii-gap-side));}

/* Background color */
.vii-bg-gray {background-color:var(--vii-color-gray);}
.vii-bg-primary {background-color:var(--vii-color-primary); color:var(--vii-color-on-primary);}
.vii-bg-gradient-orange {background:var(--vii-color-gradient-orange)}
.vii-bg-black {background:var(--vii-color-fg-tertiary)}

/* A11y focus */
a:focus-visible,
button:focus-visible,
.a11y-focus:focus-visible {outline:2px solid var(--vii-color-primary); border-radius:3px; transition:none;}

/* disabled focus visible */
.a11y-disable a:focus-visible,
.a11y-disable button:focus-visible,
.a11y-disable:focus-visible {outline:none; border-radius:0;}

/* focus visible inset */
.a11y-focus-inset, .a11y-focus-inset a, .a11y-focus-inset button {position:relative;}
.a11y-focus-inset:focus-visible,
.a11y-focus-inset a:focus-visible, .a11y-focus-inset button:focus-visible {outline:none;}
.a11y-focus-inset:focus-visible:after,
.a11y-focus-inset a:focus-visible:after, .a11y-focus-inset button:focus-visible:after {
    content:""; z-index:1; position:absolute;
    inset:0; pointer-events:none; border:2px solid var(--vii-color-primary); border-radius:3px;
}


/* custom scrollbar */
/* Works on Chrome, Edge, and Safari */
body::-webkit-scrollbar,
.vii-custom-scroll-bar::-webkit-scrollbar {width:var(--vii-scroll-bar-width);}
body::-webkit-scrollbar-track,
.vii-custom-scroll-bar::-webkit-scrollbar-track {background:var(--vii-color-gray);}
body::-webkit-scrollbar-thumb,
.vii-custom-scroll-bar::-webkit-scrollbar-thumb {background-color:var(--vii-color-primary);}

/* Hover effect for image */
.vii-hover-image {position:relative; overflow:hidden;}
.vii-hover-image:before {
    content:"";
    position:absolute; inset:0; background:var(--vii-color-black); z-index:1; pointer-events:none;
    opacity:0; transition:opacity 0.3s;
}
.vii-hover-image img {transition:transform 0.3s;}
.hover-trigger:hover .vii-hover-image:before,
a.vii-hover-image:hover:before, a:hover .vii-hover-image:before {opacity:0.3;}
.hover-trigger:hover .vii-hover-image img,
a.vii-hover-image:hover img, a:hover .vii-hover-image img {transform:scale(1.05);}

/* Radius for VC Single Image and media in editor */
.vii-rounded-corners, .vii-hover-image:has(.vii-rounded-corners) {border-radius:8px; overflow:hidden;}


/****************************
 * Sticky element
****************************/
body .vii-sticky, body .vii-sticky-desktop-only {
    --offset:20px;
    --extra-offset:0px;

    position:sticky; left:0;
    top:calc(var(--extra-offset) + var(--offset));
    transition:var(--vii-transition);
}
body.scroll-up .vii-sticky,
body.scroll-up .vii-sticky-desktop-only {--extra-offset:var(--vii-header-height-sticky);}

/* follow breakpoint of VC */
@media only screen and (max-width:767px) {
    body .vii-sticky-desktop-only {position:static; top:unset;}
}

/* text align left mobile */
@media only screen and (max-width:767px) {
    .text-align-left-mobile,
    .text-align-left-mobile [style="text-align: center;"],
    .text-align-left-mobile [style="text-align:center;"] {text-align:left !important;}
    .text-align-left-mobile .txt_group {display:inline}
}


/****************************
 * Notice
****************************/
#cookie-notice {font-family:var(--vii-font-primary), sans-serif; font-weight:500; font-size:var(--vii-size-14);}
#cookie-notice .cookie-notice-container {
    display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
    gap:6px 0;
}
#cookie-notice .cn-text-container {margin-bottom:0;}
#cookie-notice .cn-button:not(.cn-button-custom) {
    font-family:var(--vii-font-primary), sans-serif; font-weight:500; font-size:var(--vii-size-14);
    letter-spacing:0; text-transform:uppercase;
    background:#fff !important; color:var(--vii-color-primary); border:1px solid #fff;
}
#cookie-notice .cn-button:not(.cn-button-custom):hover,
#cookie-notice .cn-button:not(.cn-button-custom):focus {
    background:rgba(0, 0, 0, 0) !important; color:#fff;
}
#cn-close-notice {
    font-size:12px;
    position:absolute; top:0; right:0; transform:translateY(0);
}


/***************************************
* Editor Image
****************************************/
/* Image tag: with and without caption */
.wpb_text_column :where(p > img, .wp-caption > img) {margin-bottom:0;}

/* With-caption wrapper */
.wp-caption {width:fit-content; margin-bottom:var(--vii-spacing-paragraph);}

/* Has link */
/* Single image with link only have hover effect if inside site-content */
.mceContentBody .wp-caption a,
.site-content .wp-caption a {display:block; position:relative; overflow:hidden;}
.mceContentBody .wp-caption a:before,
.site-content .wp-caption a:before {
    content:"";
    position:absolute; inset:0; z-index:1; background:#000; opacity:0;
    transition:opacity .3s ease;
}
.mceContentBody .wp-caption a img,
.site-content .wp-caption a img {width:100%; transition:transform .3s ease;}
.mceContentBody .wp-caption a:hover:before,
.site-content .wp-caption a:hover:before {opacity:.3;}
.mceContentBody .wp-caption a:hover img,
.site-content .wp-caption a:hover img {transform:scale(1.02);}

/* Alignment */
.wp-caption.alignleft .wp-caption-text,
.wp-caption.alignleft .wp-caption-dd {text-align:left;}
.wp-caption.aligncenter .wp-caption-text,
.wp-caption.aligncenter .wp-caption-dd {text-align:center;}
.wp-caption.alignright .wp-caption-text,
.wp-caption.alignright .wp-caption-dd {text-align:right;}

/* Caption text */
.wp-caption-text {padding-top:5px; font-size:var(--vii-size-14); line-height:1.2;}

/* text block */
.wpb_text_column.has-max-width {
    --vii-txt-max-width:100%;
    max-width:var(--vii-txt-max-width);
}

/* Adjust line height h1 version VI */
html[lang="vi"] h1, html[lang="vi"] .heading_1,
html[lang="vi-VN"] h1, html[lang="vi"] .heading_1,
html[lang="vi"] h2, html[lang="vi"] .heading_2,
html[lang="vi-VN"] h2, html[lang="vi"] .heading_2 {
    --vii-heading-line-height:1.36;
}

/* hr */
.main_content hr {border-bottom:1px solid rgba(0,0,0,.1);}
.main_content .txt_color_white hr {border-color:var(--vii-color-border-primary);}