﻿/*
Theme Name: VTA
Description: Giao diện website VTA
Author: Phung
Template: flatsome
Version: 3.1
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Prata&display=swap');

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.banner h1,
.banner h2 {
    font-weight: 600;
    font-style: normal;
}

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
    --vta-font-body: "Montserrat", Arial, sans-serif;
    --vta-font-display: "Prata", Georgia, serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--vta-font-body);
}

body {
    font-size: 16px;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--vta-font-display);
}

.absolute-footer { display:none; }
:root { --vta-blue: #17488f; --vta-muted: #858585; }
#header .header-top { background-color:#f4eee6; }
.vta-topbar { display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:35px; color:#000; font-family:var(--vta-font-body); font-size:10px; font-weight:400; line-height:1.2; letter-spacing:0; white-space:nowrap; }
.vta-topbar__news, .vta-topbar__contact, .vta-header-tools, .vta-header-tools__socials { display:flex; align-items:center; }
.vta-topbar__news > * + * { border-left:1px solid #c8c2b9; margin-left:15px; padding-left:15px; }
.vta-topbar a { color:inherit; }
.vta-topbar__news strong { font-weight:500; }
.vta-topbar__download { display:inline-flex; align-items:center; gap:17px; font-weight:700; }
.vta-topbar__arrow { display:block; width:17px; height:8px; flex:0 0 17px; }
.vta-topbar__contact { justify-content:flex-end; min-height:35px; flex-shrink:0; gap:22px; color:#848484; font-family:var(--vta-font-body); font-size:12px; font-weight:700; line-height:1.2; letter-spacing:0; white-space:nowrap; }
.vta-topbar__contact a { display:inline-flex; align-items:center; gap:8px; color:inherit; }
.vta-topbar__contact img { display:block; width:15px; height:15px; flex:0 0 15px; }
#top-bar .header-language-dropdown .header-language-dropdown__link { display:flex; align-items:center; gap:8px; min-height:35px; padding:0 4px 0 23px !important; color:#848484 !important; background-image:url("assets/images/language.svg"); background-repeat:no-repeat; background-position:left center; background-size:15px 15px; font-family:var(--vta-font-body); font-size:12px; font-weight:700; line-height:1.2; text-transform:none; }
#top-bar .header-language-dropdown > .header-language-dropdown__link > .image-icon { display:none; }
#top-bar .header-language-dropdown .header-language-dropdown__link .icon-angle-down { margin-left:1px; font-size:10px; }
#top-bar .header-language-dropdown .nav-dropdown { min-width:150px; padding:8px 0; border-radius:0; }
#top-bar .header-language-dropdown .nav-dropdown > li > a { padding:8px 15px; color:#555; font-size:12px; font-weight:400; text-transform:none; }
.vta-header-tools { justify-content:flex-end; gap:38px; }
.vta-header-tools__socials { gap:10px; }
.vta-social { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:3px; background:#aaa; color:#fff !important; font-size:13px; font-weight:700; line-height:1; }
.vta-social svg { display:block; width:14px; height:14px; fill:currentColor; }
.vta-share-button { display:inline-flex; min-width:184px; min-height:30px; padding:0; align-items:stretch; justify-content:center; overflow:hidden; border-radius:11px; background:#28539a; color:#fff !important; font-size:12px; font-weight:700; line-height:1; }
.vta-share-button > span { display:flex; flex:1; align-items:center; justify-content:center; padding:0 18px; }
.vta-share-button > i { display:flex; width:39px; align-items:center; justify-content:center; border-left:1px solid rgba(255,255,255,.35); font-style:normal; }
.vta-share-button img { display:block; width:22px; height:22px; }

/* Main header */
#masthead,
#masthead .header-inner { min-height:74px; }
#masthead .header-inner { display:flex; align-items:center; }
#masthead .logo img { width:auto; max-height:46px; object-fit:contain; }
#masthead .searchform { width:286px; margin:0; }
#masthead .searchform .flex-row { position:relative; overflow:hidden; height:35px; border:1px solid #d5d5d5; border-radius:20px; background:#fff; }
#masthead .searchform .search-field { height:33px; margin:0; padding:0 42px 0 16px; border:0; background:transparent; box-shadow:none; color:#555; font-size:12px; font-style:italic; }
#masthead .searchform .search-field::placeholder { color:#aaa; opacity:1; }
#masthead .searchform .ux-search-submit { width:40px; min-width:40px; height:33px; min-height:33px; margin:0; padding:0; border:0; background:transparent url("assets/images/search.svg") center/23px 23px no-repeat; box-shadow:none; color:transparent; font-size:0; }
#masthead .searchform .ux-search-submit i { display:none; }

/* Main navigation */
#wide-nav { min-height:39px; border-top:1px solid #dedede; border-bottom:3px solid #1596db; background:#fff; }
#wide-nav > .flex-row,
#wide-nav .header-bottom-nav { min-height:35px; }
#wide-nav > .flex-row { width:100%; box-sizing:border-box; }
#wide-nav > .flex-row > .flex-col { width:100%; max-width:none; margin-right:0; margin-left:0; flex:1 1 100%; }
#wide-nav .header-bottom-nav.nav { display:flex; width:100%; max-width:none; flex:1 1 100%; align-items:stretch; justify-content:space-between !important; }
#wide-nav .header-bottom-nav > li { display:flex; flex:0 0 auto; margin:0; align-items:stretch; justify-content:center; }
#wide-nav .header-bottom-nav > li.has-dropdown,
#wide-nav .header-bottom-nav > li.menu-item-has-children { position:relative; }
#wide-nav .header-bottom-nav > li > .nav-dropdown,
#wide-nav .header-bottom-nav > li > .sub-menu {
    top:100% !important;
    bottom:auto !important;
    margin-top:0 !important;
}
#wide-nav .header-bottom-nav > li > a {position:relative;display:flex;width:auto;min-height:35px;padding:0;align-items:center;justify-content:center;color:#515151;font-family:var(--vta-font-body);font-size:12px;font-weight:600;line-height:1.2;letter-spacing:0;text-align:center;white-space:nowrap;}
#wide-nav .header-bottom-nav > li > a::after { content:""; position:absolute; right:50%; bottom:-3px; left:50%; height:3px; background:#d20b17; transition:right .2s ease,left .2s ease; }
#wide-nav .header-bottom-nav > li.current-menu-item > a,
#wide-nav .header-bottom-nav > li.current-menu-ancestor > a,
#wide-nav .header-bottom-nav > li:hover > a { color:#123d80; }
#wide-nav .header-bottom-nav > li.current-menu-item > a::after,
#wide-nav .header-bottom-nav > li.current-menu-ancestor > a::after,
#wide-nav .header-bottom-nav > li:hover > a::after { right:34%; left:34%; }
#wide-nav .header-bottom-nav > li > a > .icon-angle-down { margin-left:5px; font-size:9px; }

/* Shared Slick navigation buttons */
.slick-slider .slick-arrow.slick-prev,
.slick-slider .slick-arrow.slick-next {
    width:26px !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background-color:transparent !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:26px 26px !important;
    box-shadow:none !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    overflow:hidden;
    transition:opacity .2s ease, transform .2s ease;
}
.slick-slider .slick-arrow.slick-prev { background-image:url("assets/images/slick-prev.svg") !important; }
.slick-slider .slick-arrow.slick-next { background-image:url("assets/images/slick-next.svg") !important; }
.slick-slider .slick-arrow.slick-prev::before,
.slick-slider .slick-arrow.slick-next::before { display:none !important; content:none !important; }
.slick-slider .slick-arrow:not(.slick-disabled):hover,
.slick-slider .slick-arrow:not(.slick-disabled):focus { opacity:.82; outline:0; }
.slick-slider .slick-arrow.slick-disabled { opacity:.38; cursor:default; }

.vta-footer { --vta-footer-blue:#001E53; --vta-footer-top:#072F77; --vta-footer-line:#165aa1; color:#fff; font-size:13px; }
.vta-footer-container { width:min(100% - 40px, 1170px); margin:0 auto; padding:0 15px; }
.vta-footer a { color:inherit; }
.vta-footer a:hover { color:#48a9ee; }
.vta-footer h3, .vta-footer h4, .vta-footer p { margin-top:0; color:inherit; }

.vta-footer-top { background:var(--vta-footer-top); padding:20px 0; }
.vta-footer-top__grid { display:grid; grid-template-columns:1.35fr 1.7fr 1.25fr 1fr; align-items:center; gap:25px; min-height:86px; }
.vta-footer-top__newsletter,
.vta-footer-top__hours,
.vta-footer-top__hotline { position:relative; }
.vta-footer-top__newsletter::before,
.vta-footer-top__hours::before,
.vta-footer-top__hotline::before { position:absolute; top:-24px; left:0; width:134px; height:10px; background:#d9e7ff; content:""; }
.vta-footer-top h3 { margin-bottom:4px; font-family:var(--vta-font-display); font-size:22px; font-weight:400; line-height:1.5; }
.vta-footer-top p, .vta-footer-top__hours p { margin-bottom:0; font-size:14px; line-height:1.5; }
.vta-footer-top__form form, .vta-footer-top__form .wpcf7-form, .vta-footer-top__form .fluentform { display:flex; margin:0; }
.vta-footer-top__form p { display:flex; width:100%; margin:0; }
.vta-footer-top__form input[type="email"] { flex:1; min-width:0; height:44px; margin:0; padding:0 16px; border:0; border-radius:10px 0 0 10px; background:#fff; box-shadow:none; font-size:14px; }
.vta-footer-top__form input[type="submit"], .vta-footer-top__form button[type="submit"] { flex:0 0 auto; height:44px; margin:0; padding:0 20px; border:0; border-radius:0 10px 10px 0; background:#f1261c; color:#fff; font-size:14px; font-weight:600; }
.vta-footer-top__form .wpcf7-spinner { display:none; }
.vta-footer-top__hotline a { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:600; line-height:1; }
.vta-footer-top__hotline a span { display:block; width:35px; height:35px; flex:0 0 35px; background:url("assets/images/hotline_footer.svg") center/contain no-repeat; font-size:0; }
.vta-footer-main { background:var(--vta-footer-blue); }
.vta-footer-main, .vta-footer-main a, .vta-footer-main p, .vta-footer-main li, .vta-footer-main h4 { font-size:14px; }
.vta-footer-main__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:52px; row-gap:24px; padding:35px 0 28px; }
.vta-footer-contact { grid-row:span 1; }
.vta-footer-logo { display:block; width:auto; max-width:250px; max-height:48px; margin:0 0 20px; object-fit:contain; object-position:left center; }
.vta-footer-contact p { display:grid; grid-template-columns:24px 1fr; gap:10px; margin-bottom:14px; color:#d8e6ff; font-size:14px; line-height:1.45; }
.vta-footer-contact p > span:first-child { display:block; width:24px; height:24px; background-position:center; background-size:contain; background-repeat:no-repeat; color:transparent; font-size:0; text-align:center; }
.vta-footer-contact p:nth-of-type(1) > span:first-child { background-image:url("assets/images/place.svg"); }
.vta-footer-contact p:nth-of-type(2) > span:first-child { background-image:url("assets/images/phone_ft.svg"); }
.vta-footer-contact p:nth-of-type(3) > span:first-child { background-image:url("assets/images/email_ft.svg"); }
.vta-footer-contact p:nth-of-type(4) > span:first-child { background-image:url("assets/images/internet.svg"); }
.vta-footer-menu h4 { min-height:20px; margin-bottom:15px; font-size:14px; font-weight:700; }
.vta-footer-menu ul { margin:0; padding:0; list-style:none; }
.vta-footer-menu li { margin:0 0 11px; font-size:14px; line-height:1.35; }
.vta-footer-menu:nth-child(n+5) { border-top:1px solid rgba(128,180,235,.35); padding-top:25px; }
.vta-footer-copyright { border-top:1px solid rgba(128,180,235,.45); padding:10px 0 16px; color:#7895c0; font-size:11px; }
.vta-footer-copyright p { margin:0; }

@media only screen and (max-width:48em) {
    .vta-topbar { justify-content:center; min-height:34px; font-size:10px; }
    .vta-topbar__news > *:not(:first-child), .vta-topbar__contact, .vta-header-tools__socials { display:none; }
    .vta-header-tools { justify-content:center; }
    .vta-footer-top__grid { grid-template-columns:1fr; gap:15px; padding:25px 0; text-align:center; }
    .vta-footer-top__newsletter::before,
    .vta-footer-top__hours::before,
    .vta-footer-top__hotline::before { position:static; display:block; margin:0 auto 10px; }
    .vta-footer-top__form { width:min(100%,420px); margin:auto; }
    .vta-footer-top__hotline a { justify-content:center; }
    .vta-footer-main__grid { grid-template-columns:1fr; gap:0; padding-top:28px; }
    .vta-footer-contact { grid-column:1 / -1; }
    .vta-footer-menu:nth-child(n+5) { border-top:0; padding-top:0; }
    .vta-footer-menu { border-bottom:1px solid rgba(128,180,235,.3); }
    .vta-footer .vta-footer-menu h4 { position:relative; min-height:0; margin:0; padding:14px 32px 14px 0; cursor:pointer; user-select:none; }
    .vta-footer .vta-footer-menu h4 span::before, .vta-footer .vta-footer-menu h4 span::after { content:""; position:absolute; top:50%; right:5px; width:12px; height:1px; background:#fff; transition:transform .2s ease; }
    .vta-footer .vta-footer-menu h4 span::after { transform:rotate(90deg); }
    .vta-footer .vta-footer-menu.is-open h4 span::after { transform:rotate(0); }
    .vta-footer .vta-footer-menu > ul { display:none !important; margin:0; padding:2px 0 10px; }
    .vta-footer .vta-footer-menu.is-open > ul { display:block !important; }
}

@media only screen and (max-width:30em) {
    .vta-footer-main__grid { grid-template-columns:1fr; }
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
