/* H2D - Layout chính */


/* Desktop */

@media (min-width: 850px) {

    /* Menu header */

    .header-main {
        position: relative !important;
    }

    /* Cân hai cụm menu quanh logo */
    .header-main .flex-left {
        justify-content: flex-end !important;
        padding-right: 28px !important;
    }

    .header-main .flex-right {
        justify-content: flex-start !important;
        padding-left: 28px !important;
        padding-right: 0 !important;
    }

    .header-main .flex-left .nav {
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .header-main .flex-right .nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    /* Menu cấp 1: ô 86px, gap 24px; không ảnh hưởng submenu/GTranslate/Search */
    #header .header-main .flex-left li.menu-item:not(.sub-menu li):not(.nav-dropdown li),
    #header .header-main .flex-right li.menu-item:not(.sub-menu li):not(.nav-dropdown li) {
        flex: 0 0 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #header .header-main .flex-left li.menu-item:not(.sub-menu li):not(.nav-dropdown li) > a,
    #header .header-main .flex-right li.menu-item:not(.sub-menu li):not(.nav-dropdown li) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;

        /* Hạ chữ nhẹ */
        position: relative !important;
        top: 3px !important;
    }

    /* Gap giữa 2 mục */
    #header .header-main .flex-left li.menu-item:not(.sub-menu li):not(.nav-dropdown li) + li.menu-item:not(.sub-menu li):not(.nav-dropdown li),
    #header .header-main .flex-right li.menu-item:not(.sub-menu li):not(.nav-dropdown li) + li.menu-item:not(.sub-menu li):not(.nav-dropdown li) {
        margin-left: 24px !important;
    }

    /* Reset margin menu cấp 1 */
    .header-main .nav > li.menu-item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* Cân thị giác 5 điểm menu */

    /* Trang chủ +17px */
    #header .header-main .flex-left .nav > li.menu-item:nth-child(1) {
        transform: translateX(17px) !important;
    }

    /* Về H2D +43px */
    #header .header-main .flex-left .nav > li.menu-item:nth-child(2) {
        transform: translateX(43px) !important;
    }

    /* Dự án -43px */
    #header .header-main .flex-right .nav > li.menu-item:nth-child(1) {
        transform: translateX(-43px) !important;
    }

    /* Liên hệ -17px */
    #header .header-main .flex-right .nav > li.menu-item:nth-child(2) {
        transform: translateX(-17px) !important;
    }


    /* Viewport */

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }


    /* Header cố định */

    #header,
    #header .header-wrapper {
        position: fixed !important;

        top: 0 !important;
        left: 0;
        right: 0;

        width: 100%;

        z-index: 9999 !important;
    }


    /* Nội dung chính: header 100px, footer 40px */

    #main {
        position: fixed !important;

        top: 100px !important;
        bottom: 40px !important;

        left: 0;
        right: 0;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    /* Xóa khoảng trắng Flatsome */
    #main > .page-wrapper,
    #main .page-wrapper,
    #main .page-inner,
    #main .content-area,
    #main .row-main,
    #main > #content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* Footer 40px */

    #footer {
        position: fixed !important;

        left: 0;
        right: 0;
        bottom: 0 !important;

        width: 100%;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9999 !important;
    }


    #footer .h2d-footer-bar {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    #footer .h2d-footer-bar > .section-content {
        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
    }


    #footer .h2d-footer-bar .row {
        height: 40px !important;
        min-height: 40px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        align-items: center !important;
    }


    #footer .h2d-footer-bar .col {
        height: 40px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;
        align-items: center !important;
    }


    #footer .h2d-footer-bar .col-inner {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }


    #footer .h2d-footer-bar p {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1 !important;
    }


    #footer .h2d-footer-bar i,
    #footer .h2d-footer-bar .icon {
        font-size: 13px !important;
        line-height: 1 !important;
    }


    /* Hero trang chủ */

    body.home #main {
        top: 100px !important;
        bottom: 40px !important;

        overflow: hidden !important;
    }


    body.home #main > .section:first-child {
        height: calc(100vh - 140px) !important;
        min-height: calc(100vh - 140px) !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home .h2d-home-slider {
        height: calc(100vh - 140px) !important;
        min-height: calc(100vh - 140px) !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home .h2d-home-slider .flickity-viewport {
        height: calc(100vh - 140px) !important;
    }


    body.home .h2d-home-slider .flickity-slider {
        height: 100% !important;
    }


    body.home .h2d-home-slider .banner {
        height: calc(100vh - 140px) !important;
        min-height: calc(100vh - 140px) !important;
    }


    body.home .h2d-home-slider .banner-bg,
    body.home .h2d-home-slider .banner-bg .bg {
        width: 100% !important;
        height: 100% !important;
    }


    body.home .h2d-home-slider .banner-bg .bg {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }


    body.home .h2d-home-slider .banner-bg img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }


    /* Admin bar */

    body.admin-bar #header,
    body.admin-bar #header .header-wrapper {
        top: 32px !important;
    }


    body.admin-bar #main {
        top: 132px !important;
    }


    body.admin-bar.home #main > .section:first-child,
    body.admin-bar.home .h2d-home-slider,
    body.admin-bar.home .h2d-home-slider .flickity-viewport,
    body.admin-bar.home .h2d-home-slider .banner {
        height: calc(100vh - 172px) !important;
        min-height: calc(100vh - 172px) !important;
    }


    /* Social header */

    .header-social-icons .social-icons a,
    .header .social-icons a {
        color: #efe8de !important;

        font-size: 14px !important;

        background: transparent !important;
        border: none !important;
    }


    .header-social-icons .social-icons,
    .header .social-icons {
        gap: 6px !important;
    }




}


/* Mobile / Tablet */

@media (max-width: 849px) {

    html,
    body {
        height: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #header,
    #header .header-wrapper,
    #main,
    #footer {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }


    #main {
        height: auto !important;
        overflow: visible !important;
    }


    #footer {
        height: auto !important;
    }


}
  
/* Form liên hệ */

.h2d-contact-form{
    width:100%;
    font-family:"Source Sans Pro",sans-serif;
}


/* 2 cột */

.h2d-contact-form .h2d-form-row{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:14px;
}

.h2d-contact-form .h2d-form-col{
    flex:1 1 0;
    width:50%;
    min-width:0;
}


/* Label */

.h2d-contact-form label{
    display:block;
    margin:0 0 6px;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:15px;
    font-weight:600;
    line-height:1.4;

    color:#2f2f31;
}


/* Dấu bắt buộc */

.h2d-contact-form .h2d-required{
    color:#c62828;
    font-weight:600;
    margin-left:2px;
}


/* Input */

.h2d-contact-form input[type="text"],
.h2d-contact-form input[type="email"],
.h2d-contact-form input[type="tel"],
.h2d-contact-form input[type="number"],
.h2d-contact-form select,
.h2d-contact-form textarea{
    width:100%;
    margin:0;

    border:1px solid #d8d8d8!important;
    border-radius:0!important;

    background:#fff!important;
    box-shadow:none!important;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:14px;
    font-weight:400;

    color:#2f2f31;

    transition:border-color .25s ease,
               box-shadow .25s ease;
}


.h2d-contact-form input[type="text"],
.h2d-contact-form input[type="email"],
.h2d-contact-form input[type="tel"],
.h2d-contact-form input[type="number"],
.h2d-contact-form select{
    height:42px;
    padding:0 12px;
}


.h2d-contact-form textarea{
    min-height:100px;
    padding:10px 12px;
    resize:vertical;
}


/* Focus */

.h2d-contact-form input:focus,
.h2d-contact-form select:focus,
.h2d-contact-form textarea:focus{
    outline:none!important;
    border-color:#6f4e39!important;
    box-shadow:0 0 0 1px #6f4e39!important;
}


/* Công trình khác */

.h2d-contact-form .h2d-other-project{
    display:none;
    margin-top:10px;
}

.h2d-contact-form .h2d-other-project.is-active{
    display:block;
}


/* Dropdown nhu cầu */

/* Dùng select */
.h2d-contact-form select[name="service-use"]{
    width:100%;
    height:42px;
    padding:0 12px;

    border:1px solid #d8d8d8!important;
    border-radius:0!important;

    background:#fff!important;
    box-shadow:none!important;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:14px;
    font-weight:400;

    color:#2f2f31;
}

.h2d-contact-form select[name="service-use"]:focus{
    outline:none!important;
    border-color:#6f4e39!important;
    box-shadow:0 0 0 1px #6f4e39!important;
}


/* Chính sách: mặc định đã tích trong CF7 */

.h2d-contact-form .h2d-form-policy{
    margin:10px 0 0;

    font-family:"Source Sans Pro",sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.5;

    color:#2f2f31;
}

.h2d-contact-form .h2d-form-policy label{
    display:flex!important;
    align-items:flex-start;
    gap:7px;

    margin:0!important;

    font-size:13px!important;
    font-weight:400!important;
    line-height:1.5!important;
}

.h2d-contact-form .h2d-form-policy input[type="checkbox"]{
    width:14px!important;
    height:14px!important;
    flex:0 0 14px;
    margin:3px 0 0!important;
}

.h2d-contact-form .h2d-form-policy a{
    color:#6f4e39!important;
    font-weight:600;
    text-decoration:underline;
}


/* Validate */

.h2d-contact-form .wpcf7-not-valid{
    border-color:#c62828!important;
}

.h2d-contact-form .wpcf7-not-valid-tip{
    display:block;
    margin-top:5px;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:13px;
    font-weight:400;

    color:#c62828!important;
}


/* Submit */

.h2d-contact-form .h2d-form-submit{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    margin-top:18px;
}

.h2d-contact-form .h2d-form-submit .wpcf7-submit{
    width:auto!important;
    height:42px!important;

    padding:0 24px!important;
    margin:0!important;

    background:#AF764B!important;

    border:0!important;
    border-radius:0!important;

    color:#fff!important;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:13px!important;
    font-weight:600!important;

    box-shadow:none!important;
}

.h2d-contact-form .h2d-form-submit .wpcf7-submit:hover{
    background:#101114!important;
    color:#fff!important;
}


/* Mobile form */

@media(max-width:849px){

    .h2d-contact-form .h2d-form-row{
        display:block;
        margin-bottom:0;
    }

    .h2d-contact-form .h2d-form-col{
        width:100%;
        margin-bottom:14px;
    }

}


/* GTranslate: HTML1 = [gtranslate] */

/* Cho dropdown tràn header */
#header,
#header .header-wrapper,
#header .header-main,
#header .header-inner,
#header .flex-row,
#header .flex-col,
#header .flex-left,
#header .flex-right,
#header .html,
#header .header-html,
#header .html-inner {
    overflow: visible !important;
}

/* Reset wrapper GTranslate */
#header .gt_switcher_wrapper,
#header .gt_float_switcher,
#header .switcher,
#header .gt_switcher {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;

    font-family: "Source Sans Pro", sans-serif !important;
    z-index: 10020 !important;
}

/* Nút ngôn ngữ */
#header .gt_float_switcher,
#header .switcher .selected,
#header .gt_switcher .gt_selected {
    background-color: #2f2f31 !important;
    border: 1px solid rgba(239, 232, 222, .18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#header .gt_float_switcher .gt-current-lang,
#header .switcher .selected a,
#header .gt_switcher .gt_selected a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    min-width: 64px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    /* Giữ icon mũi tên */
    background-color: #2f2f31 !important;

    color: #efe8de !important;
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Chữ */
#header .gt_float_switcher .gt-current-lang span,
#header .gt_float_switcher .gt-lang-code,
#header .switcher .selected a span,
#header .gt_switcher .gt_selected a span {
    color: #efe8de !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Cờ */
#header .gt_float_switcher img,
#header .switcher img,
#header .gt_switcher img {
    width: 15px !important;
    max-width: 15px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    flex: 0 0 auto !important;
}

/* Hover nút */
#header .gt_float_switcher .gt-current-lang:hover,
#header .switcher .selected a:hover,
#header .gt_switcher .gt_selected a:hover {
    background-color: #3a3a3d !important;
    color: #efe8de !important;
}

/* Dropdown: mở xuống, giữ click plugin */
#header .gt_float_switcher .gt_options,
#header .switcher .option,
#header .gt_switcher .gt_option,
#header .gt_switcher .gt_options {
    position: absolute !important;

    top: calc(100% + 5px) !important;
    bottom: auto !important;

    right: 0 !important;
    left: auto !important;

    width: 150px !important;
    min-width: 150px !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    transform: none !important;

    background-color: #101114 !important;
    border: 1px solid rgba(239, 232, 222, .14) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    z-index: 100000 !important;
}

/* Item dropdown */
#header .gt_float_switcher .gt_options a,
#header .switcher .option a,
#header .gt_switcher .gt_option a,
#header .gt_switcher .gt_options a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;

    width: 100% !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 10px !important;

    background-color: #101114 !important;
    color: #efe8de !important;

    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(239,232,222,.07) !important;
    box-shadow: none !important;
}

/* Item cuối */
#header .gt_float_switcher .gt_options a:last-child,
#header .switcher .option a:last-child,
#header .gt_switcher .gt_option a:last-child,
#header .gt_switcher .gt_options a:last-child {
    border-bottom: 0 !important;
}

/* Hover item */
#header .gt_float_switcher .gt_options a:hover,
#header .switcher .option a:hover,
#header .gt_switcher .gt_option a:hover,
#header .gt_switcher .gt_options a:hover {
    background-color: #af764b !important;
    color: #fff !important;
}

/* Select fallback */
#header select.gt_selector {
    min-width: 68px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 28px 0 8px !important;

    background-color: #2f2f31 !important;
    color: #efe8de !important;

    border: 1px solid rgba(239,232,222,.18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 11px !important;
}

/* Desktop GTranslate: HTML1 sang phải */
@media (min-width: 850px) {

    #header .header-main .header-inner {
        position: relative !important;
    }

    /* Đẩy HTML1 sang phải */
    #header .header-main .flex-right .html {
        display: flex !important;
        align-items: center !important;

        margin-left: auto !important;
        margin-right: 8px !important;
        padding: 0 !important;

        height: 100% !important;
        overflow: visible !important;
    }

    /* Dropdown bám mép phải */
    #header .gt_float_switcher .gt_options,
    #header .switcher .option,
    #header .gt_switcher .gt_option,
    #header .gt_switcher .gt_options {
        right: 0 !important;
        left: auto !important;

        top: calc(100% + 5px) !important;
        bottom: auto !important;
    }
}

/* Mobile GTranslate: nút trái, dropdown xuống/phải */
@media (max-width: 849px) {

    #header .header-main,
    #header .header-main .header-inner {
        position: relative !important;
        overflow: visible !important;
    }

    /* HTML1 = [gtranslate] */
    #header .header-main .html {
        position: absolute !important;

        top: 50% !important;
        left: 10px !important;
        right: auto !important;

        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        z-index: 10020 !important;
    }

    /* Nút mobile */
    #header .gt_float_switcher .gt-current-lang,
    #header .switcher .selected a,
    #header .gt_switcher .gt_selected a {
        min-width: 58px !important;
        height: 30px !important;
        min-height: 30px !important;

        padding: 0 8px !important;

        font-size: 11px !important;
        line-height: 30px !important;
    }

    #header .gt_float_switcher img,
    #header .switcher img,
    #header .gt_switcher img {
        width: 14px !important;
        max-width: 14px !important;
    }

    /* Mobile: dropdown căn từ trái */
    #header .gt_float_switcher .gt_options,
    #header .switcher .option,
    #header .gt_switcher .gt_option,
    #header .gt_switcher .gt_options {
        top: calc(100% + 5px) !important;
        bottom: auto !important;

        left: 0 !important;
        right: auto !important;

        width: min(150px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;

        transform: none !important;
    }
}

/* Màn rất nhỏ */
@media (max-width: 420px) {

    #header .header-main .html {
        left: 8px !important;
    }

    #header .gt_float_switcher .gt_options,
    #header .switcher .option,
    #header .gt_switcher .gt_option,
    #header .gt_switcher .gt_options {
        width: min(145px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* =========================================================
   H2D BLOG SINGLE
   Có khoảng cách với header + sidebar bên phải
   ========================================================= */

body.single-post #main{
    background:#efe8de!important;

    /* Tạo khoảng thở thật sự dưới header */
    padding-top:70px!important;
}


/* wrapper */
body.single-post .blog-wrapper{
    padding-top:0!important;
    padding-bottom:70px!important;
}


/* container */
body.single-post .blog-wrapper > .row{
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;

    align-items:flex-start;
}


/* =========================================================
   CỘT BÀI VIẾT
   ========================================================= */

body.single-post .blog-wrapper .post{
    margin-bottom:0;
}


/* cột nội dung */
body.single-post .blog-wrapper .large-9,
body.single-post .blog-wrapper .large-8{
    flex-basis:72%!important;
    max-width:72%!important;

    padding-right:38px!important;
}


/* nội dung bài */
body.single-post .article-inner{
    width:100%!important;
    max-width:none!important;

    margin:0!important;
}


/* bỏ khoảng cách bất thường ở header bài */
body.single-post .entry-header{
    margin-top:0!important;
}


/* title */
body.single-post .entry-title{
    margin-top:0!important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

body.single-post .post-sidebar{
    display:block!important;

    flex-basis:28%!important;
    max-width:28%!important;

    padding-left:32px!important;

    border-left:1px solid rgba(16,17,20,.15);
}


/* sidebar bên trong */
body.single-post .post-sidebar .widget{
    margin-bottom:32px;
}


/* tiêu đề widget */
body.single-post .post-sidebar .widget-title{
    font-family:"Source Sans Pro", sans-serif!important;

    font-size:17px!important;
    font-weight:600!important;

    color:#101114!important;

    text-transform:none!important;
    letter-spacing:.02em!important;
}


/* bỏ underline mặc định nếu có */
body.single-post .post-sidebar .is-divider{
    width:36px!important;
    height:1px!important;

    margin-top:10px!important;
    margin-bottom:18px!important;

    background:#af764b!important;
}


/* link sidebar */
body.single-post .post-sidebar a{
    color:#2f2f31;

    transition:color .25s ease;
}

body.single-post .post-sidebar a:hover{
    color:#af764b;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

body.single-post .entry-image{
    margin-top:28px;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:849px){

    body.single-post #main{
        padding-top:45px!important;
    }

    body.single-post .blog-wrapper{
        padding-bottom:45px!important;
    }

    body.single-post .blog-wrapper .large-9,
    body.single-post .blog-wrapper .large-8{
        flex-basis:100%!important;
        max-width:100%!important;

        padding-right:15px!important;
        padding-left:15px!important;
    }

    body.single-post .post-sidebar{
        flex-basis:100%!important;
        max-width:100%!important;

        margin-top:45px;

        padding-left:15px!important;
        padding-right:15px!important;
        padding-top:32px;

        border-left:0;
        border-top:1px solid rgba(16,17,20,.15);
    }

}


@media(max-width:549px){

    body.single-post #main{
        padding-top:32px!important;
    }

    body.single-post .blog-wrapper{
        padding-bottom:32px!important;
    }

}

/* =========================================================
   H2D PROJECT PAGE - FULL BACKGROUND
   ========================================================= */

body.page-id-1234{
    background:#efe8de!important;
}

body.page-id-1234 #main{
    background:#efe8de!important;
    min-height:calc(100vh - 160px);
}

body.page-id-1234 .page-wrapper,
body.page-id-1234 .page-inner,
body.page-id-1234 .content-area{
    background:#efe8de!important;
}

/* =========================================================
   H2D PROJECT TABS
   Active tab có lớp phủ nổi bật
   ========================================================= */

.h2d-project-tabs{
    width:100%;
    margin:0;
}


/* =========================
   NAV
   ========================= */

.h2d-project-tabs .nav{
    display:flex;
    align-items:flex-end;
    gap:12px;

    margin:0 0 28px!important;
    padding:0!important;

    border-bottom:1px solid rgba(16,17,20,.14);
}


.h2d-project-tabs .nav > li{
    margin:0!important;
    padding:0!important;
}


.h2d-project-tabs .nav > li > a{
    position:relative;

    display:block;

    margin:0!important;
    padding:11px 18px 12px!important;

    background:transparent!important;

    border:1px solid transparent!important;
    border-radius:2px 2px 0 0!important;

    box-shadow:none!important;

    font-family:"Source Sans Pro", sans-serif!important;

    font-size:17px!important;
    font-weight:500!important;
    line-height:1.2!important;

    color:#808080!important;

    text-transform:none!important;
    letter-spacing:.01em!important;

    overflow:hidden;

    transition:
        color .28s ease,
        background .28s ease,
        border-color .28s ease,
        transform .28s ease;
}


/* lớp phủ nền */
.h2d-project-tabs .nav > li > a::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            135deg,
            rgba(175,118,75,.11) 0%,
            rgba(239,232,222,.55) 55%,
            rgba(175,118,75,.07) 100%
        );

    opacity:0;

    transform:scale(.96);

    transition:
        opacity .3s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}


/* line dưới */
.h2d-project-tabs .nav > li > a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-1px;

    width:0;
    height:2px;

    background:#af764b;

    transform:translateX(-50%);

    transition:
        width .38s cubic-bezier(.16,1,.3,1);
}


/* =========================
   ACTIVE
   ========================= */

.h2d-project-tabs .nav > li.active > a{
    color:#101114!important;

    font-weight:600!important;

    border-color:
        rgba(175,118,75,.22)!important;

    border-bottom-color:
        transparent!important;

    background:
        rgba(239,232,222,.25)!important;

    box-shadow:
        0 8px 20px rgba(16,17,20,.035)!important;
}


/* hiện lớp phủ */
.h2d-project-tabs .nav > li.active > a::before{
    opacity:1;

    transform:scale(1);
}


/* line active rõ hơn */
.h2d-project-tabs .nav > li.active > a::after{
    width:72%;

    height:2px;
}


/* thêm điểm nhấn nhỏ */
.h2d-project-tabs .nav > li.active > a{
    text-shadow:
        0 0 0 rgba(0,0,0,0);
}


/* =========================
   HOVER
   ========================= */

@media (hover:hover) and (pointer:fine){

    .h2d-project-tabs .nav > li:not(.active) > a:hover{
        color:#6f4e39!important;

        background:
            rgba(175,118,75,.035)!important;
    }

    .h2d-project-tabs .nav > li:not(.active) > a:hover::after{
        width:34%;
        background:#6f4e39;
    }

}


/* =========================
   TAB CONTENT
   ========================= */

.h2d-project-tabs .tab-panels{
    padding:0!important;

    background:transparent!important;

    border:0!important;
}


.h2d-project-tabs .panel{
    padding:0!important;

    margin:0!important;

    background:transparent!important;
}


/* =========================
   TABLET
   ========================= */

@media (max-width:849px){

    .h2d-project-tabs .nav{
        gap:8px;

        margin-bottom:22px!important;
    }


    .h2d-project-tabs .nav > li > a{
        font-size:15px!important;

        padding:
            10px 14px 11px!important;
    }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width:480px){

    .h2d-project-tabs .nav{
        width:100%;

        gap:6px;

        display:grid;

        grid-template-columns:
            repeat(2,1fr);
    }


    .h2d-project-tabs .nav > li{
        width:100%;
    }


    .h2d-project-tabs .nav > li > a{
        width:100%;

        text-align:center!important;

        font-size:14px!important;

        padding:
            10px 8px 11px!important;
    }


    .h2d-project-tabs .nav > li.active > a::after{
        width:65%;
    }

}



/* H2D - Layout chính */


/* Desktop */

@media (min-width: 850px) {

    /* Menu header */

    .header-main {
        position: relative !important;
    }

    /* Cân hai cụm menu quanh logo */
    .header-main .flex-left {
        justify-content: flex-end !important;
        padding-right: 28px !important;
    }

    .header-main .flex-right {
        justify-content: flex-start !important;
        padding-left: 28px !important;
        padding-right: 0 !important;
    }

    .header-main .flex-left .nav {
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .header-main .flex-right .nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    /* Menu cấp 1: ô 86px, gap 24px; không ảnh hưởng submenu/GTranslate/Search */
    #header .header-main .flex-left li.menu-item:not(.sub-menu li):not(.nav-dropdown li),
    #header .header-main .flex-right li.menu-item:not(.sub-menu li):not(.nav-dropdown li) {
        flex: 0 0 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #header .header-main .flex-left li.menu-item:not(.sub-menu li):not(.nav-dropdown li) > a,
    #header .header-main .flex-right li.menu-item:not(.sub-menu li):not(.nav-dropdown li) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;

        /* Hạ chữ nhẹ */
        position: relative !important;
        top: 3px !important;
    }

    /* Gap giữa 2 mục */
    #header .header-main .flex-left li.menu-item:not(.sub-menu li):not(.nav-dropdown li) + li.menu-item:not(.sub-menu li):not(.nav-dropdown li),
    #header .header-main .flex-right li.menu-item:not(.sub-menu li):not(.nav-dropdown li) + li.menu-item:not(.sub-menu li):not(.nav-dropdown li) {
        margin-left: 24px !important;
    }

    /* Reset margin menu cấp 1 */
    .header-main .nav > li.menu-item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* Cân thị giác 5 điểm menu */

    /* Trang chủ +17px */
    #header .header-main .flex-left .nav > li.menu-item:nth-child(1) {
        transform: translateX(17px) !important;
    }

    /* Về H2D +43px */
    #header .header-main .flex-left .nav > li.menu-item:nth-child(2) {
        transform: translateX(43px) !important;
    }

    /* Dự án -43px */
    #header .header-main .flex-right .nav > li.menu-item:nth-child(1) {
        transform: translateX(-43px) !important;
    }

    /* Liên hệ -17px */
    #header .header-main .flex-right .nav > li.menu-item:nth-child(2) {
        transform: translateX(-17px) !important;
    }


    /* Viewport */

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }


    /* Header cố định */

    #header,
    #header .header-wrapper {
        position: fixed !important;

        top: 0 !important;
        left: 0;
        right: 0;

        width: 100%;

        z-index: 9999 !important;
    }


    /* Nội dung chính: header 100px, footer 40px */

    #main {
        position: fixed !important;

        top: 100px !important;
        bottom: 40px !important;

        left: 0;
        right: 0;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    /* Xóa khoảng trắng Flatsome */
    #main > .page-wrapper,
    #main .page-wrapper,
    #main .page-inner,
    #main .content-area,
    #main .row-main,
    #main > #content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* Footer 40px */

    #footer {
        position: fixed !important;

        left: 0;
        right: 0;
        bottom: 0 !important;

        width: 100%;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9999 !important;
    }


    #footer .h2d-footer-bar {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    #footer .h2d-footer-bar > .section-content {
        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
    }


    #footer .h2d-footer-bar .row {
        height: 40px !important;
        min-height: 40px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        align-items: center !important;
    }


    #footer .h2d-footer-bar .col {
        height: 40px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;
        align-items: center !important;
    }


    #footer .h2d-footer-bar .col-inner {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }


    #footer .h2d-footer-bar p {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1 !important;
    }


    #footer .h2d-footer-bar i,
    #footer .h2d-footer-bar .icon {
        font-size: 13px !important;
        line-height: 1 !important;
    }


    /* Hero trang chủ */

    body.home #main {
        top: 100px !important;
        bottom: 40px !important;

        overflow: hidden !important;
    }


    body.home #main > .section:first-child {
        height: calc(100vh - 140px) !important;
        min-height: calc(100vh - 140px) !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home .h2d-home-slider {
        height: calc(100vh - 140px) !important;
        min-height: calc(100vh - 140px) !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home .h2d-home-slider .flickity-viewport {
        height: calc(100vh - 140px) !important;
    }


    body.home .h2d-home-slider .flickity-slider {
        height: 100% !important;
    }


    body.home .h2d-home-slider .banner {
        height: calc(100vh - 140px) !important;
        min-height: calc(100vh - 140px) !important;
    }


    body.home .h2d-home-slider .banner-bg,
    body.home .h2d-home-slider .banner-bg .bg {
        width: 100% !important;
        height: 100% !important;
    }


    body.home .h2d-home-slider .banner-bg .bg {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }


    body.home .h2d-home-slider .banner-bg img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }


    /* Admin bar */

    body.admin-bar #header,
    body.admin-bar #header .header-wrapper {
        top: 32px !important;
    }


    body.admin-bar #main {
        top: 132px !important;
    }


    body.admin-bar.home #main > .section:first-child,
    body.admin-bar.home .h2d-home-slider,
    body.admin-bar.home .h2d-home-slider .flickity-viewport,
    body.admin-bar.home .h2d-home-slider .banner {
        height: calc(100vh - 172px) !important;
        min-height: calc(100vh - 172px) !important;
    }


    /* Social header */

    .header-social-icons .social-icons a,
    .header .social-icons a {
        color: #efe8de !important;

        font-size: 14px !important;

        background: transparent !important;
        border: none !important;
    }


    .header-social-icons .social-icons,
    .header .social-icons {
        gap: 6px !important;
    }




}


/* Mobile / Tablet */

@media (max-width: 849px) {

    html,
    body {
        height: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #header,
    #header .header-wrapper,
    #main,
    #footer {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }


    #main {
        height: auto !important;
        overflow: visible !important;
    }


    #footer {
        height: auto !important;
    }


}
  
/* Form liên hệ */

.h2d-contact-form{
    width:100%;
    font-family:"Source Sans Pro",sans-serif;
}


/* 2 cột */

.h2d-contact-form .h2d-form-row{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:14px;
}

.h2d-contact-form .h2d-form-col{
    flex:1 1 0;
    width:50%;
    min-width:0;
}


/* Label */

.h2d-contact-form label{
    display:block;
    margin:0 0 6px;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:15px;
    font-weight:600;
    line-height:1.4;

    color:#2f2f31;
}


/* Dấu bắt buộc */

.h2d-contact-form .h2d-required{
    color:#c62828;
    font-weight:600;
    margin-left:2px;
}


/* Input */

.h2d-contact-form input[type="text"],
.h2d-contact-form input[type="email"],
.h2d-contact-form input[type="tel"],
.h2d-contact-form input[type="number"],
.h2d-contact-form select,
.h2d-contact-form textarea{
    width:100%;
    margin:0;

    border:1px solid #d8d8d8!important;
    border-radius:0!important;

    background:#fff!important;
    box-shadow:none!important;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:14px;
    font-weight:400;

    color:#2f2f31;

    transition:border-color .25s ease,
               box-shadow .25s ease;
}


.h2d-contact-form input[type="text"],
.h2d-contact-form input[type="email"],
.h2d-contact-form input[type="tel"],
.h2d-contact-form input[type="number"],
.h2d-contact-form select{
    height:42px;
    padding:0 12px;
}


.h2d-contact-form textarea{
    min-height:100px;
    padding:10px 12px;
    resize:vertical;
}


/* Focus */

.h2d-contact-form input:focus,
.h2d-contact-form select:focus,
.h2d-contact-form textarea:focus{
    outline:none!important;
    border-color:#6f4e39!important;
    box-shadow:0 0 0 1px #6f4e39!important;
}


/* Công trình khác */

.h2d-contact-form .h2d-other-project{
    display:none;
    margin-top:10px;
}

.h2d-contact-form .h2d-other-project.is-active{
    display:block;
}


/* Dropdown nhu cầu */

/* Dùng select */
.h2d-contact-form select[name="service-use"]{
    width:100%;
    height:42px;
    padding:0 12px;

    border:1px solid #d8d8d8!important;
    border-radius:0!important;

    background:#fff!important;
    box-shadow:none!important;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:14px;
    font-weight:400;

    color:#2f2f31;
}

.h2d-contact-form select[name="service-use"]:focus{
    outline:none!important;
    border-color:#6f4e39!important;
    box-shadow:0 0 0 1px #6f4e39!important;
}


/* Chính sách: mặc định đã tích trong CF7 */

.h2d-contact-form .h2d-form-policy{
    margin:10px 0 0;

    font-family:"Source Sans Pro",sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.5;

    color:#2f2f31;
}

.h2d-contact-form .h2d-form-policy label{
    display:flex!important;
    align-items:flex-start;
    gap:7px;

    margin:0!important;

    font-size:13px!important;
    font-weight:400!important;
    line-height:1.5!important;
}

.h2d-contact-form .h2d-form-policy input[type="checkbox"]{
    width:14px!important;
    height:14px!important;
    flex:0 0 14px;
    margin:3px 0 0!important;
}

.h2d-contact-form .h2d-form-policy a{
    color:#6f4e39!important;
    font-weight:600;
    text-decoration:underline;
}


/* Validate */

.h2d-contact-form .wpcf7-not-valid{
    border-color:#c62828!important;
}

.h2d-contact-form .wpcf7-not-valid-tip{
    display:block;
    margin-top:5px;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:13px;
    font-weight:400;

    color:#c62828!important;
}


/* Submit */

.h2d-contact-form .h2d-form-submit{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    margin-top:18px;
}

.h2d-contact-form .h2d-form-submit .wpcf7-submit{
    width:auto!important;
    height:42px!important;

    padding:0 24px!important;
    margin:0!important;

    background:#AF764B!important;

    border:0!important;
    border-radius:0!important;

    color:#fff!important;

    font-family:"Source Sans Pro",sans-serif!important;
    font-size:13px!important;
    font-weight:600!important;

    box-shadow:none!important;
}

.h2d-contact-form .h2d-form-submit .wpcf7-submit:hover{
    background:#101114!important;
    color:#fff!important;
}


/* Mobile form */

@media(max-width:849px){

    .h2d-contact-form .h2d-form-row{
        display:block;
        margin-bottom:0;
    }

    .h2d-contact-form .h2d-form-col{
        width:100%;
        margin-bottom:14px;
    }

}


/* GTranslate: HTML1 = [gtranslate] */

/* Cho dropdown tràn header */
#header,
#header .header-wrapper,
#header .header-main,
#header .header-inner,
#header .flex-row,
#header .flex-col,
#header .flex-left,
#header .flex-right,
#header .html,
#header .header-html,
#header .html-inner {
    overflow: visible !important;
}

/* Reset wrapper GTranslate */
#header .gt_switcher_wrapper,
#header .gt_float_switcher,
#header .switcher,
#header .gt_switcher {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;

    font-family: "Source Sans Pro", sans-serif !important;
    z-index: 10020 !important;
}

/* Nút ngôn ngữ */
#header .gt_float_switcher,
#header .switcher .selected,
#header .gt_switcher .gt_selected {
    background-color: #2f2f31 !important;
    border: 1px solid rgba(239, 232, 222, .18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#header .gt_float_switcher .gt-current-lang,
#header .switcher .selected a,
#header .gt_switcher .gt_selected a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    min-width: 64px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    /* Giữ icon mũi tên */
    background-color: #2f2f31 !important;

    color: #efe8de !important;
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Chữ */
#header .gt_float_switcher .gt-current-lang span,
#header .gt_float_switcher .gt-lang-code,
#header .switcher .selected a span,
#header .gt_switcher .gt_selected a span {
    color: #efe8de !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Cờ */
#header .gt_float_switcher img,
#header .switcher img,
#header .gt_switcher img {
    width: 15px !important;
    max-width: 15px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    flex: 0 0 auto !important;
}

/* Hover nút */
#header .gt_float_switcher .gt-current-lang:hover,
#header .switcher .selected a:hover,
#header .gt_switcher .gt_selected a:hover {
    background-color: #3a3a3d !important;
    color: #efe8de !important;
}

/* Dropdown: mở xuống, giữ click plugin */
#header .gt_float_switcher .gt_options,
#header .switcher .option,
#header .gt_switcher .gt_option,
#header .gt_switcher .gt_options {
    position: absolute !important;

    top: calc(100% + 5px) !important;
    bottom: auto !important;

    right: 0 !important;
    left: auto !important;

    width: 150px !important;
    min-width: 150px !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    transform: none !important;

    background-color: #101114 !important;
    border: 1px solid rgba(239, 232, 222, .14) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    z-index: 100000 !important;
}

/* Item dropdown */
#header .gt_float_switcher .gt_options a,
#header .switcher .option a,
#header .gt_switcher .gt_option a,
#header .gt_switcher .gt_options a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;

    width: 100% !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 10px !important;

    background-color: #101114 !important;
    color: #efe8de !important;

    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(239,232,222,.07) !important;
    box-shadow: none !important;
}

/* Item cuối */
#header .gt_float_switcher .gt_options a:last-child,
#header .switcher .option a:last-child,
#header .gt_switcher .gt_option a:last-child,
#header .gt_switcher .gt_options a:last-child {
    border-bottom: 0 !important;
}

/* Hover item */
#header .gt_float_switcher .gt_options a:hover,
#header .switcher .option a:hover,
#header .gt_switcher .gt_option a:hover,
#header .gt_switcher .gt_options a:hover {
    background-color: #af764b !important;
    color: #fff !important;
}

/* Select fallback */
#header select.gt_selector {
    min-width: 68px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 28px 0 8px !important;

    background-color: #2f2f31 !important;
    color: #efe8de !important;

    border: 1px solid rgba(239,232,222,.18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 11px !important;
}

/* Desktop GTranslate: HTML1 sang phải */
@media (min-width: 850px) {

    #header .header-main .header-inner {
        position: relative !important;
    }

    /* Đẩy HTML1 sang phải */
    #header .header-main .flex-right .html {
        display: flex !important;
        align-items: center !important;

        margin-left: auto !important;
        margin-right: 8px !important;
        padding: 0 !important;

        height: 100% !important;
        overflow: visible !important;
    }

    /* Dropdown bám mép phải */
    #header .gt_float_switcher .gt_options,
    #header .switcher .option,
    #header .gt_switcher .gt_option,
    #header .gt_switcher .gt_options {
        right: 0 !important;
        left: auto !important;

        top: calc(100% + 5px) !important;
        bottom: auto !important;
    }
}

/* Mobile GTranslate: nút trái, dropdown xuống/phải */
@media (max-width: 849px) {

    #header .header-main,
    #header .header-main .header-inner {
        position: relative !important;
        overflow: visible !important;
    }

    /* HTML1 = [gtranslate] */
    #header .header-main .html {
        position: absolute !important;

        top: 50% !important;
        left: 10px !important;
        right: auto !important;

        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        z-index: 10020 !important;
    }

    /* Nút mobile */
    #header .gt_float_switcher .gt-current-lang,
    #header .switcher .selected a,
    #header .gt_switcher .gt_selected a {
        min-width: 58px !important;
        height: 30px !important;
        min-height: 30px !important;

        padding: 0 8px !important;

        font-size: 11px !important;
        line-height: 30px !important;
    }

    #header .gt_float_switcher img,
    #header .switcher img,
    #header .gt_switcher img {
        width: 14px !important;
        max-width: 14px !important;
    }

    /* Mobile: dropdown căn từ trái */
    #header .gt_float_switcher .gt_options,
    #header .switcher .option,
    #header .gt_switcher .gt_option,
    #header .gt_switcher .gt_options {
        top: calc(100% + 5px) !important;
        bottom: auto !important;

        left: 0 !important;
        right: auto !important;

        width: min(150px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;

        transform: none !important;
    }
}

/* Màn rất nhỏ */
@media (max-width: 420px) {

    #header .header-main .html {
        left: 8px !important;
    }

    #header .gt_float_switcher .gt_options,
    #header .switcher .option,
    #header .gt_switcher .gt_option,
    #header .gt_switcher .gt_options {
        width: min(145px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* =========================================================
   H2D BLOG SINGLE
   Có khoảng cách với header + sidebar bên phải
   ========================================================= */

body.single-post #main{
    background:#efe8de!important;

    /* Tạo khoảng thở thật sự dưới header */
    padding-top:70px!important;
}


/* wrapper */
body.single-post .blog-wrapper{
    padding-top:0!important;
    padding-bottom:70px!important;
}


/* container */
body.single-post .blog-wrapper > .row{
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;

    align-items:flex-start;
}


/* =========================================================
   CỘT BÀI VIẾT
   ========================================================= */

body.single-post .blog-wrapper .post{
    margin-bottom:0;
}


/* cột nội dung */
body.single-post .blog-wrapper .large-9,
body.single-post .blog-wrapper .large-8{
    flex-basis:72%!important;
    max-width:72%!important;

    padding-right:38px!important;
}


/* nội dung bài */
body.single-post .article-inner{
    width:100%!important;
    max-width:none!important;

    margin:0!important;
}


/* bỏ khoảng cách bất thường ở header bài */
body.single-post .entry-header{
    margin-top:0!important;
}


/* title */
body.single-post .entry-title{
    margin-top:0!important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

body.single-post .post-sidebar{
    display:block!important;

    flex-basis:28%!important;
    max-width:28%!important;

    padding-left:32px!important;

    border-left:1px solid rgba(16,17,20,.15);
}


/* sidebar bên trong */
body.single-post .post-sidebar .widget{
    margin-bottom:32px;
}


/* tiêu đề widget */
body.single-post .post-sidebar .widget-title{
    font-family:"Source Sans Pro", sans-serif!important;

    font-size:17px!important;
    font-weight:600!important;

    color:#101114!important;

    text-transform:none!important;
    letter-spacing:.02em!important;
}


/* bỏ underline mặc định nếu có */
body.single-post .post-sidebar .is-divider{
    width:36px!important;
    height:1px!important;

    margin-top:10px!important;
    margin-bottom:18px!important;

    background:#af764b!important;
}


/* link sidebar */
body.single-post .post-sidebar a{
    color:#2f2f31;

    transition:color .25s ease;
}

body.single-post .post-sidebar a:hover{
    color:#af764b;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

body.single-post .entry-image{
    margin-top:28px;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:849px){

    body.single-post #main{
        padding-top:45px!important;
    }

    body.single-post .blog-wrapper{
        padding-bottom:45px!important;
    }

    body.single-post .blog-wrapper .large-9,
    body.single-post .blog-wrapper .large-8{
        flex-basis:100%!important;
        max-width:100%!important;

        padding-right:15px!important;
        padding-left:15px!important;
    }

    body.single-post .post-sidebar{
        flex-basis:100%!important;
        max-width:100%!important;

        margin-top:45px;

        padding-left:15px!important;
        padding-right:15px!important;
        padding-top:32px;

        border-left:0;
        border-top:1px solid rgba(16,17,20,.15);
    }

}


@media(max-width:549px){

    body.single-post #main{
        padding-top:32px!important;
    }

    body.single-post .blog-wrapper{
        padding-bottom:32px!important;
    }

}

/* =========================================================
   H2D PROJECT PAGE - FULL BACKGROUND
   ========================================================= */

body.page-id-1234{
    background:#efe8de!important;
}

body.page-id-1234 #main{
    background:#efe8de!important;
    min-height:calc(100vh - 160px);
}

body.page-id-1234 .page-wrapper,
body.page-id-1234 .page-inner,
body.page-id-1234 .content-area{
    background:#efe8de!important;
}

/* =========================================================
   H2D PROJECT TABS
   Active tab có lớp phủ nổi bật
   ========================================================= */

.h2d-project-tabs{
    width:100%;
    margin:0;
}


/* =========================
   NAV
   ========================= */

.h2d-project-tabs .nav{
    display:flex;
    align-items:flex-end;
    gap:12px;

    margin:0 0 28px!important;
    padding:0!important;

    border-bottom:1px solid rgba(16,17,20,.14);
}


.h2d-project-tabs .nav > li{
    margin:0!important;
    padding:0!important;
}


.h2d-project-tabs .nav > li > a{
    position:relative;

    display:block;

    margin:0!important;
    padding:11px 18px 12px!important;

    background:transparent!important;

    border:1px solid transparent!important;
    border-radius:2px 2px 0 0!important;

    box-shadow:none!important;

    font-family:"Source Sans Pro", sans-serif!important;

    font-size:17px!important;
    font-weight:500!important;
    line-height:1.2!important;

    color:#808080!important;

    text-transform:none!important;
    letter-spacing:.01em!important;

    overflow:hidden;

    transition:
        color .28s ease,
        background .28s ease,
        border-color .28s ease,
        transform .28s ease;
}


/* lớp phủ nền */
.h2d-project-tabs .nav > li > a::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            135deg,
            rgba(175,118,75,.11) 0%,
            rgba(239,232,222,.55) 55%,
            rgba(175,118,75,.07) 100%
        );

    opacity:0;

    transform:scale(.96);

    transition:
        opacity .3s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}


/* line dưới */
.h2d-project-tabs .nav > li > a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-1px;

    width:0;
    height:2px;

    background:#af764b;

    transform:translateX(-50%);

    transition:
        width .38s cubic-bezier(.16,1,.3,1);
}


/* =========================
   ACTIVE
   ========================= */

.h2d-project-tabs .nav > li.active > a{
    color:#101114!important;

    font-weight:600!important;

    border-color:
        rgba(175,118,75,.22)!important;

    border-bottom-color:
        transparent!important;

    background:
        rgba(239,232,222,.25)!important;

    box-shadow:
        0 8px 20px rgba(16,17,20,.035)!important;
}


/* hiện lớp phủ */
.h2d-project-tabs .nav > li.active > a::before{
    opacity:1;

    transform:scale(1);
}


/* line active rõ hơn */
.h2d-project-tabs .nav > li.active > a::after{
    width:72%;

    height:2px;
}


/* thêm điểm nhấn nhỏ */
.h2d-project-tabs .nav > li.active > a{
    text-shadow:
        0 0 0 rgba(0,0,0,0);
}


/* =========================
   HOVER
   ========================= */

@media (hover:hover) and (pointer:fine){

    .h2d-project-tabs .nav > li:not(.active) > a:hover{
        color:#6f4e39!important;

        background:
            rgba(175,118,75,.035)!important;
    }

    .h2d-project-tabs .nav > li:not(.active) > a:hover::after{
        width:34%;
        background:#6f4e39;
    }

}


/* =========================
   TAB CONTENT
   ========================= */

.h2d-project-tabs .tab-panels{
    padding:0!important;

    background:transparent!important;

    border:0!important;
}


.h2d-project-tabs .panel{
    padding:0!important;

    margin:0!important;

    background:transparent!important;
}


/* =========================
   TABLET
   ========================= */

@media (max-width:849px){

    .h2d-project-tabs .nav{
        gap:8px;

        margin-bottom:22px!important;
    }


    .h2d-project-tabs .nav > li > a{
        font-size:15px!important;

        padding:
            10px 14px 11px!important;
    }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width:480px){

    .h2d-project-tabs .nav{
        width:100%;

        gap:6px;

        display:grid;

        grid-template-columns:
            repeat(2,1fr);
    }


    .h2d-project-tabs .nav > li{
        width:100%;
    }


    .h2d-project-tabs .nav > li > a{
        width:100%;

        text-align:center!important;

        font-size:14px!important;

        padding:
            10px 8px 11px!important;
    }


    .h2d-project-tabs .nav > li.active > a::after{
        width:65%;
    }

}