/***************************************
* Body text & Permalink
****************************************/
body :where(.editor-styles-wrapper), html:not(.wp-toolbar) body {
    color:var(--bcnb-color-text);
    background:var(--bcnb-color-bg);
    font-family:var(--bcnb-font-primary);
    font-size:var(--bcnb-size-body-large);
    line-height:1.5; font-weight:600; letter-spacing:-.01em;
}
a, button {
    color:var(--bcnb-color-text);
    transition:var(--bcnb-transition);
}

/* Permalink */
.mceContentBody a:not([class*="btn_"]),
.wpb_text_column a:not([class*="btn_"]) {
    text-decoration:underline; color:var(--bcnb-color-permalink);
    font-weight:600;
}
.mceContentBody a:not([class*="btn_"]):hover,
.mceContentBody a:not([class*="btn_"]):focus,
.mceContentBody a:not([class*="btn_"]):active,
.wpb_text_column a:not([class*="btn_"]):hover,
.wpb_text_column a:not([class*="btn_"]):focus,
.wpb_text_column a:not([class*="btn_"]):active {
    color:var(--bcnb-color-permalink-highlight); outline:0;
}

/***************************************
* Headings
****************************************/
.mceContentBody h1, .mceContentBody h2, .mceContentBody h3, .mceContentBody h4, .mceContentBody h5, .mceContentBody h6,
:where(.editor-styles-wrapper) h1, :where(.editor-styles-wrapper) h2, :where(.editor-styles-wrapper) h3, :where(.editor-styles-wrapper) h4, :where(.editor-styles-wrapper) h5, :where(.editor-styles-wrapper) h6,
.main_content h1, .main_content h2, .main_content h3, .main_content h4, .main_content h5, .main_content h6,
.main_content .heading_1, .main_content .heading_2, .main_content .heading_3, .main_content .heading_4, .main_content .heading_5, .main_content .heading_6,
.heading_1, .heading_2, .heading_3, .heading_4, .heading_5, .heading_6, .small_heading {
    --bcnb-heading-weight:500;
    --bcnb-heading-line-height:1; /* use variable to control text for version VI */
    --bcnb-heading-letter-spacing:-.08em;
    color:var(--bcnb-color-heading); margin-bottom:var(--bcnb-spacing-heading);
    line-height:var(--bcnb-heading-line-height); font-weight:var(--bcnb-heading-weight);
    letter-spacing:var(--bcnb-heading-letter-spacing);
}
.mceContentBody h1, :where(.editor-styles-wrapper) h1, .main_content h1, .main_content .heading_1, .heading_1 {
    --bcnb-heading-line-height:1;
    --bcnb-heading-letter-spacing:-.05em;
    font-size:var(--bcnb-size-h1);
}
.mceContentBody h2, :where(.editor-styles-wrapper) h2, .main_content h2, .main_content .heading_2, .heading_2 {
    /*--bcnb-heading-letter-spacing:-.07em;*/
    --bcnb-heading-letter-spacing:-.03em;
    font-size:var(--bcnb-size-h2);
}
.mceContentBody h3, :where(.editor-styles-wrapper) h3, .main_content h3, .main_content .heading_3, .heading_3 {
    --bcnb-heading-line-height:1.1;
    --bcnb-heading-weight:500;
    --bcnb-heading-letter-spacing:-.04em;
    font-size:var(--bcnb-size-h3);
}
.mceContentBody h4, :where(.editor-styles-wrapper) h4, .main_content h4, .main_content .heading_4, .heading_4 {
    --bcnb-heading-line-height:1.1;
    --bcnb-heading-weight:600;
    --bcnb-heading-letter-spacing:-.055em;
    font-size:var(--bcnb-size-h4);
}
.mceContentBody h5, :where(.editor-styles-wrapper) h5, .main_content h5, .main_content .heading_5, .heading_5 {
    --bcnb-heading-line-height:1.2;
    --bcnb-heading-weight:600;
    --bcnb-heading-letter-spacing:-.03em;
    font-size:var(--bcnb-size-h5);
}
.mceContentBody h6, :where(.editor-styles-wrapper) h6, .main_content h6, .main_content .heading_6, .heading_6 {
    --bcnb-heading-line-height:1.05;
    --bcnb-heading-weight:600;
    --bcnb-heading-letter-spacing:-.02em;
    font-size:var(--bcnb-size-h6);
}
.small_heading {}
.main_content .small_heading, .small_heading {
    --bcnb-heading-line-height:1.3;
    --bcnb-heading-weight:600;
    --bcnb-heading-letter-spacing:-.02em;
    font-size:var(--bcnb-size-24);
}

/* override classes display block to respect line height */
h1 [class*="heading_"],
h2 [class*="heading_"],
h3 [class*="heading_"],
h4 [class*="heading_"],
h5 [class*="heading_"],
h6 [class*="heading_"] {display:block;}

/* increase line height heading h1 and h2 (VI) - Request from TVC#20250103 */
html[lang="vi-VN"] h1, html[lang="vi-VN"] h2,
html[lang="vi-VN"] .heading_1, html[lang="vi-VN"] .heading_2 {
    --bcnb-heading-line-height:1.2
}


/***************************************
* Text format
****************************************/
/* White turns gray if is inside Editor */
body[class*="wp-editor"] {--bcnb-color-white:#ccc;}

/* Subtitle */
.subtitle {
    font-size:var(--bcnb-size-20);
    color:var(--bcnb-color-green);
    font-weight:600; letter-spacing:-.04em;
}

/* Colors */
.txt_color_white {color:var(--bcnb-color-white);}
.txt_color_green {
    color:var(--bcnb-color-green);
    --bcnb-color-heading:var(--bcnb-color-green);
}
.txt_color_light_green {
    color:var(--bcnb-color-light-green);
    --bcnb-color-heading:var(--bcnb-color-light-green);
}
.txt_color_blue {
    color:var(--bcnb-color-blue);
    --bcnb-color-heading:var(--bcnb-color-blue);
}
.txt_color_gray {
    color:var(--bcnb-color-gray);
    --bcnb-color-heading:var(--bcnb-color-gray);
}

/* Alignments */
.txt_group {display:inline-block;}
.txt_uppercase {text-transform:uppercase;}

/* Text format */
.heading_letter_spacing_big {letter-spacing:var(--bcnb-heading-letter-spacing);}
h1 .heading_letter_spacing_big,
h2 .heading_letter_spacing_big,
h3 .heading_letter_spacing_big,
h4 .heading_letter_spacing_big,
h5 .heading_letter_spacing_big,
h6 .heading_letter_spacing_big,
[class*="heading_"] .heading_letter_spacing_big,
.heading_letter_spacing_big[class*="heading_"] {
    --bcnb-heading-letter-spacing:-.03em;
}
.heading_black {
    color:var(--bcnb-color-black);
    --bcnb-color-heading:var(--bcnb-color-black);
}


/***************************************
* Buttons
****************************************/
a.btn_primary, a.btn_primary_play_video, a.btn_primary_submit, a.btn_primary_download, a.btn_view_map {}

/* button primary */
[class*="btn_primary"] {
    --btn-bg-color:radial-gradient(67% 104% at 50% -43%, #fff 0%, #27893d 100%);
    --btn-color:var(--bcnb-color-on-primary);

    display:inline-flex; align-items:center; justify-content:center; gap:5px 8px;
    text-align:center; text-decoration:none;
    position:relative;
    font-family:var(--bcnb-font-primary); font-weight:600; line-height:1.2; font-size:var(--bcnb-size-18);
    background:var(--btn-bg-color); color:var(--btn-color);
    padding:5px 20px; min-height:50px; min-width:160px; border-radius:50px;
    box-shadow:0 0 0 4px rgba(255, 255, 255, .1);
}
[class*="btn_primary"]:before, .main_content [class*="btn_primary"] span:before {
    content:"";
    position:absolute; inset:-4px;
    border:2px solid var(--bcnb-color-green); border-radius:60px;
    opacity:0; transition:opacity .3s ease;
}
[class*="btn_primary"]:after {
    font-family:var(--bcnb-font-icomoon); content:"\e927";
    line-height:1; font-size:16px; font-weight:400;
}
[class*="btn_primary"]:hover, [class*="btn_primary"]:focus {
    text-decoration:none;
}
[class*="btn_primary"]:hover:before, [class*="btn_primary"]:focus:before,
.main_content [class*="btn_primary"]:hover span:before, .main_content [class*="btn_primary"]:focus span:before {
    opacity:1;
}

/* button primary play video */
[class*="btn_primary_play_video"] {padding-right:6px;}
[class*="btn_primary_play_video"]:after {
    content:"\e937"; font-size:10px;
    width:40px; aspect-ratio:1; background:rgba(255, 255, 255, .2);
    border:1px solid rgba(255, 255, 255, .2); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:2;
}

/* button primary submit */
[class*="btn_primary_submit"] {min-width:150px; justify-content:space-between;}
[class*="btn_primary_submit"]:after {content:"\e923"; font-size:15px;}

/* button primary download */
[class*="btn_primary_download"]:after {content:"\e940"; font-size:20px;}

/* button view map */
[class*="btn_view_map"] {
    --btn-color:var(--bcnb-color-green);
    --btn-color-hover:var(--bcnb-color-blue);
    color:var(--btn-color);
    display:inline-flex; align-items:center; gap:8px;
    border-bottom:2px solid var(--btn-color);
}
[class*="btn_view_map"]:after {
    font-family:var(--bcnb-font-icomoon); content:"\e90d";
    font-size:16px; line-height:1; font-weight:400;
}
[class*="btn_view_map"]:hover, [class*="btn_view_map"]:focus {
    color:var(--btn-color-hover); border-color:var(--btn-color-hover);
}


/***************************************
* List
****************************************/
/* Default unordered list for text block */
.mceContentBody ul,
.wpb_text_column ul {
    --ul-shape:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDkgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00LjczOTk4IDAuNTY5NThMMC44MTI1IDYuMzgyMzFMNC42MTQxNiAxMS40MzAzTDguMzg5NTEgNS44MTM5OUw0LjczOTk4IDAuNTY5NThaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfOTAwMV80NzkwKSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzkwMDFfNDc5MCIgeDE9IjYuNDAxOTMiIHkxPSIyLjg5Njg0IiB4Mj0iMi43ODIiIHkyPSI4LjcyNjg4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0REFCMzkiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjc4OTNEIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
    list-style:none; margin:0;
}
.wpb_text_column ul ul {padding-top:8px;}

.mceContentBody ul:not(:last-child),
.wpb_text_column ul:not(:last-child) {margin-bottom:var(--bcnb-spacing-paragraph);}

.mceContentBody ul > li,
.wpb_text_column ul > li {padding:0 0 0 16px; position:relative;}

.mceContentBody ul > li:not(:last-child),
.wpb_text_column ul > li:not(:last-child) {margin-bottom:8px;}

.mceContentBody ul > li:before,
.wpb_text_column ul > li:before {
    content:""; position:absolute; top:.4em; left:0;
    width:8px; height:11px;
    background-image:var(--ul-shape); background-size:cover; background-repeat:no-repeat; background-position:center;
}


/* Ordered Lists */
ol.custom_ol {list-style:none; counter-reset:custom_ol; margin:0;}
ol.custom_ol:not(:last-child) {margin-bottom:var(--bcnb-spacing-paragraph);}
ol.custom_ol > li {
    counter-increment:custom_ol;
    padding:0 0 0 28px; position:relative;
}
ol.custom_ol > li:not(:last-child) {
    margin-bottom:var(--bcnb-spacing-paragraph); padding-bottom:var(--bcnb-spacing-paragraph);
    border-bottom:1px solid rgba(0, 0, 0, .1);
}
ol.custom_ol > li:before {
    content:counter(custom_ol); position:absolute; top:0.15em; left:0;
    width:20px; height:20px; background:linear-gradient(180deg, #41d15f 8.24%, #126e27 93.64%);
    font-size:14px; font-weight:600; line-height:1; color:#fff; letter-spacing:-.04em;
    border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .2);
    display:flex; align-items:center; justify-content:center;
}

/***************************************
* Paragraph
****************************************/
.mceContentBody p:not(:last-child), .main_content p:not(:last-child) {margin-bottom:var(--bcnb-spacing-paragraph);}

/***************************************
* Table
****************************************/
.mceContentBody table, .main_content table {margin-bottom:var(--bcnb-spacing-paragraph);}

/* table no border */
table.no_border {}
table.no_border tr td {border:none; padding:0;}
table.no_border tr td p:empty {display:none;}
table.no_border > tbody > tr > td {padding-top:24px; position:relative;}
table.no_border > tbody > tr > td:before {
    content:"";
    width:100%; height:1px; background:rgba(21, 68, 119, .15);
    position:absolute; top:0; right:0;
}
table.no_border > tbody > tr > td:first-child {white-space:nowrap}
table.no_border > tbody > tr > td:not(:first-child) {padding-left:24px;}
table.no_border > tbody > tr > td:not(:first-child):before {width:calc(100% - 24px);}
table.no_border tr td p:has(.btn_view_map) {margin-top:16px;}
table.no_border tr td a[href*="tel"] {text-decoration:none;}

/* table inside */
table.no_border table {margin-bottom:0;}
table.no_border table tr td {width:auto !important;}
table.no_border table tr td:first-child {width:56px !important;}
table.no_border table tr td p:empty {display:none;}
table.no_border table tr:not(:last-child) {border-bottom:7px solid rgba(0, 0, 0, 0);}

/* responsive */
@media only screen and (max-width:768px) {
    table.no_border > tbody > tr {display:flex; flex-direction:column; gap:24px;}
    table.no_border > tbody > tr > td {width:100% !important;}
    table.no_border > tbody > tr > td:not(:first-child) {padding-left:0;}
    table.no_border > tbody > tr > td:not(:first-child):before {width:100%;}
}


/***************************************
* HR tag
****************************************/
.mceContentBody hr, .main_content hr {margin-bottom:var(--bcnb-spacing-paragraph);}


/***************************************
* VC Image
****************************************/
.main_content .wp-caption {width:fit-content;}

/* 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;}