/* RESET & BASE */
#wrapper, #main {
    background-color: #fff;
    position: relative;
}

/* BANNER STYLES */
.banner {
    position: relative;
    background-color: #446084;
    width: 100%;
    min-height: 30px;
}
.banner h2, .banner h3, .banner h1 {
    padding: 0;
    font-weight: normal;
    margin-top: .2em;
    margin-bottom: .2em;
    line-height: 1;
}
.banner h2 {
    font-size: 2.9em;
}
#banner-1245352232 {
    padding-top: 140px;
}
@media (min-width: 550px) {
    #banner-1245352232 {
        padding-top: 454px;
    }
}
#banner-1245352232 .bg {
    background-position: 10% 68%;
}
.banner-bg {
    overflow: hidden;
}
.banner-layers > * {
    position: absolute !important;
}

/* TEXT BOX */
#text-box-1335166776 {
    width: 90%;
}
@media (min-width: 550px) {
    #text-box-1335166776 {
        width: 67%;
    }
}
@media (min-width: 850px) {
    #text-box-1335166776 {
        width: 46%;
    }
}
#text-box-1335166776 .text-box-content {
    background-color: rgba(255, 255, 255, 0.686);
    font-size: 100%;
}
#text-box-1335166776 .text-inner {
    padding: 30px 30px 30px 30px;
}
.text-box {
    max-height: 100%;
}
.text-box .text-box-content {
    position: relative;
    z-index: 10;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#text-4172598002 {
    font-size: 0.85rem;
}
.text-left {
    text-align: left;
}

/* TEXT STYLE */
.res-text {
    font-size: 11px;
}
@media screen and (min-width: 550px) {
    .res-text {
        font-size: 1.8vw;
    }
}
@media screen and (min-width: 850px) {
    .res-text {
        font-size: 16px;
    }
}
.uppercase, h6, th, span.widget-title {
    line-height: 1.05;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.is-uppercase, .uppercase {
    line-height: 1.2;
    text-transform: uppercase;
}

/* RESPONSIVE POSITIONING */
@media screen and (min-width: 850px) {
    .lg-y50 {
        top: 50%;
        -webkit-transform: translateY(-50%) !important;
        -ms-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important;
    }
}
@media screen and (min-width: 850px) {
    .lg-x50 {
        left: 50%;
        -webkit-transform: translateX(-50%) !important;
        -ms-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important;
    }
}
@media screen and (min-width: 850px) {
    .lg-x50.lg-y50 {
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* FILL / POSITIONING */
.fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    right: 0;
    bottom: 0;
    padding: 0 !important;
    margin: 0 !important;
}

/* TRANSITION & HOVER EFFECTS */
.has-hover .bg,
.has-hover [class*=image-] img {
    -webkit-transition: opacity .6s, -webkit-filter .6s, -webkit-transform .6s, -webkit-box-shadow .3s;
    transition: filter .6s, opacity .6s, transform .6s, box-shadow .3s, -webkit-filter .6s, -webkit-transform .6s, -webkit-box-shadow .3s;
    -o-transition: filter .6s, opacity .6s, transform .6s, box-shadow .3s;
}

/* SHADOW EFFECTS */
.row-box-shadow-3 .col-inner,
.row-box-shadow-3-hover .col-inner:hover,
.box-shadow-3,
.box-shadow-3-hover:hover {
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .22);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .22);
}
.row-box-shadow-1 .col-inner,
.row-box-shadow-2 .col-inner,
.row-box-shadow-3 .col-inner,
.row-box-shadow-4 .col-inner,
.row-box-shadow-5 .col-inner,
.row-box-shadow-1-hover .col-inner,
.row-box-shadow-2-hover .col-inner,
.row-box-shadow-3-hover .col-inner,
.row-box-shadow-4-hover .col-inner,
.row-box-shadow-5-hover .col-inner,
.box-shadow-1,
.box-shadow-2,
.box-shadow-3,
.box-shadow-4,
.box-shadow-5,
.box-shadow-1-hover,
.box-shadow-2-hover,
.box-shadow-3-hover,
.box-shadow-4-hover,
.box-shadow-5-hover {
    -webkit-transition: background-color .3s, color .3s, opacity .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    transition: background-color .3s, color .3s, opacity .3s, transform .3s, box-shadow .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    -o-transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s;
}

/* ACCENT COLOR OVERRIDES */
.scroll-to-bullets a,
.featured-title,
.label-new.menu-item > a:after,
.nav-pagination > li > .current,
.nav-pagination > li > span:hover,
.nav-pagination > li > a:hover,
.has-hover:hover .badge-outline .badge-inner,
button[type="submit"],
.button.wc-forward:not(.checkout):not(.checkout-button),
.button.submit-button,
.button.primary:not(.is-outline),
.featured-table .title,
.is-outline:hover,
.has-icon:hover .icon-label,
.nav-dropdown-bold .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold > li > a:hover,
.nav-dropdown-bold.dark .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold.dark > li > a:hover,
.header-vertical-menu__opener,
.tagcloud a:hover,
.grid-tools a,
input[type='submit']:not(.is-form),
.box-badge:hover .box-text,
input.button.alt,
.nav-box > li > a:hover,
.nav-box > li.active > a,
.nav-pills > li.active > a,
.current-dropdown .cart-icon strong,
.cart-icon:hover strong,
.nav-line-bottom > li > a:before,
.nav-line-grow > li > a:before,
.nav-line > li > a:before,
.banner,
.header-top,
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.primary.is-outline:hover,
.button.primary:not(.is-outline),
input[type='submit'].primary,
input[type='reset'].button,
input[type='button'].primary,
.badge-inner {
    background-color: #187c46;
}



/*tôi code section tiếp*/
.nav-vertical.nav-tabs > li.active > a, .scroll-to-bullets a.active, .nav-pagination > li > .current, .nav-pagination > li > span:hover, .nav-pagination > li > a:hover, .has-hover:hover .badge-outline .badge-inner, .accordion-title.active, .featured-table, .is-outline:hover, .tagcloud a:hover, blockquote, .has-border, .cart-icon strong:after, .cart-icon strong, .blockUI:before, .processing:before, .loading-spin, .slider-nav-circle .flickity-prev-next-button:hover svg, .slider-nav-circle .flickity-prev-next-button:hover .arrow, .primary.is-outline:hover {
    border-color: #187c46;
}

blockquote {
    position: relative;
    font-size: 1.2em;
    margin: 0 0 1.25em;
    padding: 0 1.25em 0 1.875em;
    border-left: 2px solid #187c46;
    font-style: italic;
    color: #333;
}


/*tôi code tiếpn*/
/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *:before, *:after,
.cool-timeline-wrapper, .cool-timeline-wrapper * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   MAIN WRAPPER
   ========================================================================== */

.cool-timeline-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 4em auto;
    font-weight: 400;
    font-family: "Alegreya Sans", Arial, Helvetica, sans-serif;
}

.cooltimeline_cont {
    padding: 10px 0;
}

/* ==========================================================================
   TIMELINE CONTAINER
   ========================================================================== */

.cool-timeline {
    padding: 20px 0;
    position: relative;
}

/* Timeline center line */
.cool-timeline:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 4px;
    left: 50%;
    top: 0;
    margin-left: -2px;
    background-color: #c1c1c1;
    background-image: -webkit-linear-gradient(top, #eaf0f2 0, #c1c1c1 8%, #c1c1c1 92%, #eaf0f2 100%);
    background-image: -moz-linear-gradient(top, #eaf0f2 0, #c1c1c1 8%, #c1c1c1 92%, #eaf0f2 100%);
    background-image: -ms-linear-gradient(top, #eaf0f2 0, #c1c1c1 8%, #c1c1c1 92%, #eaf0f2 100%);
    border-radius: 2px;
    -moz-border-radius: 2px;
}

/* White timeline variations */
.cool-timeline.white-timeline:before,
.cool-timeline.white-timeline.one-sided:before {
    background-color: #025149;
    background-image: -webkit-linear-gradient(top, #025149 0%, #025149 8%, #025149 92%, #025149 100%);
    background-image: -moz-linear-gradient(top, #025149 0%, #025149 8%, #025149 92%, #025149 100%);
    background-image: -ms-linear-gradient(top, #025149 0%, #025149 8%, #025149 92%, #025149 100%);
}

.cool-timeline.white-timeline.one-sided:before,
.white-timeline:before {
    background-color: #32363b;
    background-image: -webkit-linear-gradient(top, #fff 0, #c1c1c1 8%, #c1c1c1 92%, #fff 100%);
    background-image: -moz-linear-gradient(top, #fff 0, #c1c1c1 8%, #c1c1c1 92%, #fff 100%);
    background-image: -ms-linear-gradient(top, #fff 0, #c1c1c1 8%, #c1c1c1 92%, #fff 100%);
}

/* ==========================================================================
   TIMELINE POSTS
   ========================================================================== */

.cool-timeline .timeline-post {
    margin: 0 0 50px 0;
    border: 0;
    padding: 0 30px 5px 0;
    width: 50%;
}

.cool-timeline .timeline-post.even {
    margin-left: 50%;
    padding: 0 0 5px 30px;
}

/* ==========================================================================
   TIMELINE ICONS
   ========================================================================== */

.cool-timeline .timeline-post .timeline-icon {
    background: #fff;
    color: #171717;
    text-align: center;
    font-size: 18px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    position: absolute;
    left: 50%;
    margin: 12px 0 0 -20px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    z-index: 10;
    display: inherit !important;
}

/* Icon dots */
.cool-timeline .timeline-post .icon-dot-full,
.cool-timeline.one-sided .timeline-post .icon-dot-full {
    background: #000;
    margin: 22px 0 0 -10px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    height: 20px;
    width: 20px;
}

/* White timeline icon variations */
.cool-timeline.white-timeline.one-sided .timeline-post .icon-dot .timeline-bar,
.cool-timeline.white-timeline.one-sided .timeline-post .icon-dot-full,
.cool-timeline.white-timeline.one-sided .timeline-post .icon-dot-full-white .timeline-bar,
.white-timeline .timeline-post .icon-dot .timeline-bar,
.white-timeline .timeline-post .icon-dot-full,
.white-timeline .timeline-post .icon-dot-full-white .timeline-bar {
    background: #c1c1c1;
}

/* Custom icon colors for odd/even posts */
.cool-timeline.white-timeline .timeline-post.odd .icon-dot-full,
.cool-timeline.one-sided.white-timeline .timeline-post .icon-dot-full {
    background: #ce792f;
}

.cool-timeline.white-timeline .timeline-post.even .icon-dot-full,
.cool-timeline.one-sided.white-timeline .timeline-post.even .icon-dot-full {
    background: #29b246;
}

/* ==========================================================================
   TIMELINE META (DATES)
   ========================================================================== */

.cool-timeline .timeline-post .timeline-meta {
    position: absolute;
    left: 50%;
    margin: 0 0 0 23px;
    color: #000;
    font-weight: 500;
}

.cool-timeline .timeline-post.even .timeline-meta {
    left: auto;
    margin: 0 23px 0 0;
    text-align: right;
    right: 50%;
}

.cool-timeline .timeline-post .timeline-meta .meta-details {
    font-family: Maven Pro !important;
    font-weight: 700;
    font-size: 21px;
    color: #6a7686;
    margin: 13px 5px 5px;
}

/* Meta colors for odd/even posts */
.cool-timeline.white-timeline .timeline-post.odd .timeline-meta .meta-details,
.ctl_road_map_wrp li.odd .ctl-story-year,
.ctl_road_map_wrp li.odd .ctl-story-title,
.ctl_road_map_wrp li.odd .ctl-story-title a,
.ctl-popup-content h2 {
    color: #ce792f;
}

.cool-timeline.white-timeline .timeline-post.even .timeline-meta .meta-details,
.ctl_road_map_wrp li.even .ctl-story-year,
.ctl_road_map_wrp li.even .ctl-story-title,
.ctl_road_map_wrp li.even .ctl-story-title a {
    color: #29b246;
}

/* ==========================================================================
   TIMELINE CONTENT
   ========================================================================== */

.cool-timeline .timeline-post .timeline-content {
    background: #ffffff;
    position: relative;
    border: 1px solid #fff;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 30px;
}

/* Light grey post variation */
.cool-timeline .light-grey-post .timeline-content {
    background: #f9f9f9;
    border: 1px solid #f0f2f4;
    -webkit-border-radius: 8px 8px 5px 5px;
    -moz-border-radius: 8px 8px 5px 5px;
    border-radius: 8px 8px 5px 5px;
    color: #474b51;
}

/* Ultimate style variation */
.ultimate-style .timeline-post .timeline-content {
    padding: 0;
    border: 0;
}

/* ==========================================================================
   CONTENT TITLES
   ========================================================================== */

.cool-timeline .timeline-post .timeline-content .content-title,
.cool-timeline .timeline-post .timeline-icon .icon-placeholder span,
.cool-timeline .timeline-year .icon-placeholder span {
    font-family: "Alegreya Sans", Arial, Helvetica, sans-serif;
}

.cool-timeline .timeline-post .timeline-content h2.content-title,
.ctl-popup-content h2 {
    font-family: Maven Pro;
    font-weight: 700;
    font-size: 20px;
}

/* Light grey post title */
.cool-timeline .light-grey-post .timeline-content .content-title {
    color: #fff;
    border-radius: 4px 4px 0 0;
}

/* Ultimate style titles */
.ultimate-style .timeline-post .timeline-content .content-title {
    font-size: 32px;
    margin: 0;
    padding: 18px 15px;
    color: #fff;
    background-color: #000;
    border-radius: 5px 5px 0 0;
    position: relative;
}

.ultimate-style .timeline-post .timeline-content .content-title:before {
    content: "";
    display: block;
    border: 15px solid transparent;
    border-left-color: #000;
    position: absolute;
    right: -27px;
    top: 16px;
}

.ultimate-style .timeline-post.even .timeline-content .content-title:before,
.ultimate-style.one-sided .timeline-post .timeline-content .content-title:before {
    border: 15px solid transparent;
    border-right-color: #000;
    left: -27px;
    right: auto;
}

/* White timeline title colors */
.cool-timeline.white-timeline .timeline-post.odd .timeline-content .content-title {
    background: #ce792f;
}

.cool-timeline.white-timeline .timeline-post.odd .timeline-content .content-title:before {
    border-left-color: #ce792f;
}

.cool-timeline.white-timeline .timeline-post.even .timeline-content .content-title {
    background: #29b246;
}

.cool-timeline.white-timeline .timeline-post.even .timeline-content .content-title:before {
    border-right-color: #29b246;
}

/* ==========================================================================
   CONTENT DETAILS
   ========================================================================== */

.cool-timeline .timeline-post .timeline-content .content-details,
.cool-timeline .timeline-post .timeline-content .content-details p,
.ctl-popup-content {
    font-family: Maven Pro;
    font-size: 16px;
}

.cool-timeline .timeline-post .timeline-content .content-details {
    margin: 0;
}

.ultimate-style .timeline-post .timeline-content .content-details {
    padding: 15px;
}

.cool-timeline .timeline-post .timeline-content .ctl_info {
    line-height: 1.42;
    display: inline-block;
    width: 100%;
}

/* ==========================================================================
   MAIN TITLE
   ========================================================================== */

.cool_timeline .timeline-main-title,
.cool_timeline h4.timeline-main-title.center-block {
    font-family: Maven Pro;
    font-weight: 700;
    text-align: center;
    font-size: 22px;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.full-width, .expand {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block;
}

/* ==========================================================================
   AOS ANIMATIONS
   ========================================================================== */

[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos=fade-up] {
    transform: translate3d(0, 100px, 0);
}

[data-aos].aos-init {
    opacity: 0;
}

[data-aos^=fade][data-aos^=fade].aos-animate,
[data-aos].aos-init.aos-animate {
    opacity: 1;
    transform: translateZ(0);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-sine],
body[data-aos-easing=ease-in-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.445,.05,.55,.95);
}

[data-aos][data-aos][data-aos-duration="750"],
body[data-aos-duration="750"] [data-aos] {
    transition-duration: .75s;
}