@media screen{
    /**
     * Class ".center" duoc dung trong markup o nhieu noi (archive.php, archive-product.php,
     * 404.php, front-page.php, index.php, search.php - vd <p class="empty-content center">)
     * nhung chua tung co rule CSS nao dinh nghia (chi co ".text-center" cua Bootstrap), nen
     * chu khong tu can giua duoc du da gan class.
     */
    .center{
        text-align: center;
    }
    /**
     * Header
     */
    .logged-in.admin-bar header{
        top: 32px !important;
    }
    .is-sticky .header,
    .is-sticky header.open {
        background-color: #fff;
        box-shadow: 0 0 3px;
    }
    .is-sticky header.header-index .logo-wrapper img,
    .is-sticky header.header-index.open .logo-wrapper img {
        filter: initial;
    }
    .is-sticky header.header-index .nav-item>a,
    .is-sticky header.header-index.open .nav-item>a {
        color: #3d3d3d;
    }
    .is-sticky header .container .nav-utility svg{
        filter: initial;
    }
    .is-sticky .header #trigger-mobile i{
        color: #000;
    }
    .is-sticky .header #trigger-mobile .icon-bar{
        background-color: #000;
    }
    .is-sticky header.header-index .info .nav-item:before, 
    .is-sticky header.header-index .nav-utility .nav-item:nth-child(2):before, 
    .is-sticky header.header-index .nav-utility .nav-item:nth-child(3):before, 
    .is-sticky header.header-index .nav-utility .nav-item .search-ico, 
    .is-sticky header.header-index.open .info .nav-item:before, 
    .is-sticky header.header-index.open .nav-utility .nav-item:nth-child(2):before, 
    .is-sticky header.header-index.open .nav-utility .nav-item:nth-child(3):before, 
    .is-sticky header.header-index.open .nav-utility .nav-item .search-ico {
        filter: invert(1) !important;
    }
    header.header .nav-item > a i{
        font-weight: 300 !important;
        font-size: 15px !important;
    }
    /**
     * Menu mobile (.nav-evo-watch) - evo-watch.scss.css dung
     * text-transform:capitalize cho ca 3 cap (nav-item, hmega, level2),
     * doi thanh uppercase cho dung ban goc. Cung selector, load sau
     * evo-watch.scss.css (xem functions.php) nen thang tren cascade
     * ma khong can !important.
     */
    header.header .nav-evo-watch #nav>li>a,
    header.header .nav-evo-watch #nav>li.has-childs.active .mega-content .level0 .level1 .hmega,
    header.header .nav-evo-watch #nav>li.has-childs.active .mega-content .level0 .level1 .level1 li a{
        text-transform: uppercase;
    }
    /* Bo border-bottom du thua o item cuoi cung trong mega-content (sat
       ngay tren border rieng cua nav-item ke tiep, nhin thanh 2 gach lien nhau). */
    header.header .nav-evo-watch #nav>li.has-childs.active .mega-content .level0>.level1:last-child>.hmega{
        border-bottom: 0;
    }
    /**/
    .home-slider.owl-carousel .owl-nav button{
        background-color: rgba(255, 255, 255, 0.5) !important;
        transition: all 0.2s ease-in-out !important;
    }
    .home-slider.owl-carousel .owl-nav button:hover{
        background-color: rgba(255, 255, 255, 1) !important;
    }
    .home-slider.owl-carousel .owl-nav button i{
        font-weight: 300 !important;
    }
    /**
    * Single Product
    */
    .logged-in.admin-bar .details-product .details-pro,
    .logged-in.admin-bar .details-product .product-image-block .list-thumb,
    .logged-in.admin-bar .details-product .product-sidebar{
        top: 152px;
    }
    .related-product .evo-owl-product.owl-carousel .owl-nav .owl-prev,
    .related-product .evo-owl-product.owl-carousel .owl-nav .owl-next{
        line-height: 45px !important;
        font-size: 20px !important;
    }
    .related-product .evo-owl-product.owl-carousel .owl-nav .owl-prev i,
    .related-product .evo-owl-product.owl-carousel .owl-nav .owl-next i{
        font-weight: 300 !important;
    }
    /**
     * Checkout - tieu de h1 giong dung style .lbl-shopping-cart cua trang Gio hang
     * (evo-carts.scss.css): dam, chu hoa, vien duoi, can trai thay vi can giua mac dinh
     * cua page.php (page-title.category-title.text-center dung chung cho moi trang tinh).
     */
    body.woocommerce-checkout .page-title.category-title.text-center {
        text-align: left !important;
    }
    /* header luon position:fixed (evo-watch.scss.css) va bi day xuong top:32px khi co
       admin-bar (xem rule .logged-in.admin-bar header o tren) - can bu them 32px cho tieu
       de trang checkout de khong bi sat/de len phan header, giong cach lam voi single
       product o tren (.details-product... top:152px). */
    .logged-in.admin-bar.woocommerce-checkout .page-title.category-title {
        padding-top: 32px;
    }
    body.woocommerce-checkout .title-head {
        margin: 0 0 22px;
        padding-bottom: 18px;
        border-bottom: 1px solid #ebebeb;
        font-family: var(--th-font-main);
        font-size: 26px;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    /**
     * Sidebar loc trang shop/danh muc (inc/block-shop-sidebar.php).
     *
     * 1) evo-watch.scss.css dinh vi icon checkbox (.filter-item--check-box .fa) bang
     *    position:absolute;top:-13px, tinh toan de vua khop line-height:2.5em cua
     *    .filter-item khi nhan cua no chi co 1 dong chu. Voi cac ten danh muc dai (vd "STAND
     *    FOR NORTHSIDE", "Hoodie & Sweatshirt") xuong 2 dong trong layout 2 cot
     *    (.filter-half), phep tinh -13px do khong con dung, lam dong sau bi de sat/chong len
     *    dong tren. Doi sang neo icon co dinh o goc trai-tren cua label (position:relative +
     *    padding-left) thay vi phu thuoc line-height, de dung voi ca nhan 1 dong lan 2 dong.
     * 2) input:checked+.fa:after dung font-family:'FontAwesome' (ten font Font Awesome 4) de
     *    ve dau tick "\f00c", nhung theme dang load Font Awesome 5 Pro (fonts/font-awesome) -
     *    ten font khong khop nen dau tick khong hien (chi thay o vuong do rong, xem
     *    functions.php enqueue 'huydev-fontawesome'). Doi lai dung ten font dang duoc nap.
     */
    .aside-filter .filter-group .filter-item {
        line-height: 1.5;
        padding: 6px 0;
    }
    .aside-filter .filter-group .filter-item--check-box label {
        display: block;
        position: relative;
        padding-left: 22px;
    }
    .aside-filter .filter-group .filter-item--check-box .fa {
        position: absolute;
        left: 0;
        top: 2px;
        margin-right: 0;
    }
    .aside-filter .filter-group .filter-item--check-box input + .fa:before {
        top: 1px;
        left: 0;
    }
    .aside-filter .filter-group .filter-item--check-box input:checked + .fa:after {
        top: 1px;
        left: 2px;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
    }
    /**
     * Hieu ung loading cho nut "Đăng ký" (form dang ky nhan tin o footer, dung Contact
     * Form 7). Nut submit la <button> thuong (khong phai the [submit] cua CF7) de giu dung
     * style .evo-button goc, nen phai tu gan class "has-spinner" (xem footer_shortcode_form)
     * de CF7 tu chen <span class="wpcf7-spinner"> ngay sau nut (contact-form-7/includes/js/
     * index.js) va tu hien/an theo class "submitting" tren <form> (contact-form-7/includes/
     * css/styles.css). O day chi can canh chinh vi tri spinner de nam giua nut (nut dang
     * position:absolute; top:0; right:0; width:144px; height:44px) va an chu trong luc gui.
     */
    .footer-subcrible form .wpcf7-spinner {
        position: absolute;
        top: 10px;
        right: 60px;
        margin: 0;
        width: 24px;
        height: 24px;
    }
    .footer-subcrible form.submitting button.has-spinner {
        color: transparent;
    }
    /**
     * Cot "Liên hệ" o footer (.footer-widget.had-click) co wrapper .footer-contact nhung
     * evo-watch.scss.css chi dinh nghia hieu ung thu gon o 767px cho ".foo-contact.has-click"
     * va ".list-menu.has-click" - khong co selector nao khop ".footer-contact", nen noi dung
     * "Liên hệ" luon hien san (khong co rule height:0/visibility:hidden nao de an), du JS
     * (custom.js) co toggle class "active" dung nhu voi "Chính sách". Bo sung rule tuong tu
     * cho ".footer-contact.has-click" (da them class "has-click" trong footer.php) de "Liên hệ"
     * dong/mo nhat quan voi "Chính sách".
     */
    @media (max-width: 767px) {
        footer.footer .site-footer .footer-widget .footer-contact.has-click {
            display: block;
            height: 0;
            visibility: hidden;
            -webkit-transition: height 0.35s ease-in-out, visibility 0s ease-in-out 0.35s;
            transition: height 0.35s ease-in-out, visibility 0s ease-in-out 0.35s;
            margin-bottom: 0;
            opacity: 0;
        }
        footer.footer .site-footer .footer-widget.active .footer-contact.has-click {
            visibility: visible;
            -webkit-transition: height 0.35s ease-in-out;
            transition: height 0.35s ease-in-out;
            height: auto;
            opacity: 1;
        }
    }

    /**
     * Trang Liên hệ (page template/contact.php): thẻ thông tin, khối bản đồ + form.
     */
    .contact-intro {
        max-width: 720px;
        margin: 0 auto 10px;
    }
    .contact-info-row {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .contact-info-row [class^="col-"] {
        margin-bottom: 20px;
    }
    .contact-info-card {
        height: 100%;
        padding: 30px 20px;
        text-align: center;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 6px;
        transition: box-shadow .2s ease, border-color .2s ease;
    }
    .contact-info-card:hover {
        border-color: transparent;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    }
    .contact-info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
        border-radius: 50%;
        background: #000;
        color: #fff;
        font-size: 20px;
    }
    .contact-info-card h3 {
        margin: 0 0 8px;
        font-family: var(--th-font-main);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    .contact-info-card p {
        margin: 0;
        color: #55595c;
        line-height: 1.5;
        word-break: break-word;
    }
    .contact-info-card p a {
        color: #55595c;
    }
    .contact-info-card p a:hover {
        color: #000;
    }
    .contact-main-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .contact-map-col,
    .contact-form-col {
        margin-bottom: 20px;
    }
    .contact-map-wrap {
        position: relative;
        overflow: hidden;
        height: 100%;
        min-height: 420px;
        border: 1px solid #ebebeb;
        border-radius: 6px;
    }
    .contact-map-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    .contact-form-wrap {
        height: 100%;
        padding: 34px;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 6px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, .04);
    }
    .contact-form-title {
        margin: 0 0 8px;
        font-family: var(--th-font-main);
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    .contact-form-desc {
        margin: 0 0 26px;
        color: #767676;
    }
    /* CF7 tu boc moi field trong 1 the <p> (WPCF7_HTMLFormatter) voi margin mac dinh cua
       trinh duyet/bootstrap - bo margin nay di de khoang cach giua cac truong chi con phu
       thuoc vao .form-group (1 nguon duy nhat, tranh cong don 2 lop margin lam khoang cach
       to nho lech nhau giua cac truong). */
    .contact-form-wrap .wpcf7-form p {
        margin: 0;
    }
    .contact-form .form-group {
        margin-bottom: 22px;
    }
    .contact-form label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #3d3d3d;
    }
    .contact-form label .required {
        color: #e02b27;
    }
    .contact-form .form-control {
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .contact-form .form-control:focus {
        border-color: var(--th-color-main);
        box-shadow: 0 0 0 3px rgba(0, 128, 0, .1);
        outline: none;
    }
    .contact-form textarea.form-control {
        min-height: 130px;
        resize: vertical;
    }
    .contact-form-submit {
        display: inline-block;
        min-width: 180px;
        margin-top: 4px;
        padding: 13px 32px;
        border: 0;
        border-radius: 3px;
        background: #000;
        color: #fff;
        font-family: var(--th-font-main);
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        cursor: pointer;
        transition: background-color .2s ease, transform .15s ease;
    }
    .contact-form-submit:hover {
        background: var(--th-color-main);
    }
    .contact-form-submit:active {
        transform: translateY(1px);
    }
    /* Thong bao ket qua gui form (CF7 tu chen .wpcf7-response-output + gan class trang thai
       .sent/.failed/.invalid/.spam/.aborted len <form> - xem includes/css/styles.css cua
       Contact Form 7 cho phan an/hien mac dinh, o day chi doi mau cho khop voi card). */
    .contact-form-wrap .wpcf7-response-output {
        margin: 0 0 20px !important;
        padding: 12px 16px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.5;
    }
    .contact-form-wrap form.sent .wpcf7-response-output {
        background: #e6f4ea;
        border-color: #b7dfc2 !important;
        color: #1e7e34;
    }
    .contact-form-wrap form.failed .wpcf7-response-output,
    .contact-form-wrap form.aborted .wpcf7-response-output,
    .contact-form-wrap form.spam .wpcf7-response-output,
    .contact-form-wrap form.invalid .wpcf7-response-output,
    .contact-form-wrap form.unaccepted .wpcf7-response-output {
        background: #fdecea;
        border-color: #f5c2c0 !important;
        color: #c62828;
    }
    .contact-form-wrap .wpcf7-not-valid-tip {
        margin-top: 4px;
        font-size: 12px;
        color: #c62828;
    }
    @media (max-width: 767px) {
        .contact-map-wrap {
            min-height: 280px;
        }
        .contact-form-wrap {
            padding: 24px 18px;
        }
    }

    /**
     * Đăng nhập / Đăng ký / Quên mật khẩu (woocommerce/myaccount/form-*.php +
     * page template/register.php). Khung .page-login/.social-login/.fix-sblock... đã có sẵn
     * trong css/evo-accounts.scss.css (bundle riêng của bản gốc cho khu vực tài khoản, tải
     * về từ https://bizweb.dktcdn.net/100/414/728/themes/867455/assets/evo-accounts.scss.css
     * - xem functions.php, enqueue theo is_account_page()) - ở đây chỉ style thông báo lỗi/
     * thành công của WooCommerce (wc_print_notices(), class .woocommerce-error/
     * .woocommerce-message hoàn toàn không có trong CSS gốc vì bản gốc dùng cơ chế báo lỗi
     * khác) cho khớp màu sắc chung của theme.
     */
    .page-login .woocommerce-error,
    .page-login .woocommerce-message,
    .page-login .woocommerce-info {
        margin: 0 0 20px;
        padding: 12px 16px;
        list-style: none;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.5;
    }
    .page-login .woocommerce-error {
        background: #fdecea;
        border: 1px solid #f5c2c0;
        color: #c62828;
    }
    .page-login .woocommerce-message,
    .page-login .woocommerce-info {
        background: #e6f4ea;
        border: 1px solid #b7dfc2;
        color: #1e7e34;
    }
    .page-login .woocommerce-error li {
        margin: 0;
    }
    #recover-password .text-login{
        margin-top: 10px;
    }
    #recover-password .text-login a{
        display: inline-block;
    }

    /**
     * Khu vực Tài khoản (đã đăng nhập) - woocommerce/myaccount/my-account.php, navigation.php,
     * dashboard.php + các template CON GIỮ NGUYÊN mặc định của Woo (orders.php, my-address.php,
     * form-edit-account.php, form-edit-address.php, view-order.php...) chỉ chỉnh CSS ở đây,
     * không viết lại markup, để không phá nonce/hook có sẵn. Không có markup gốc để đối chiếu
     * 1-1 (cần đăng nhập tài khoản thật trên clownz.vn, không tự tạo tài khoản trên site người
     * khác chỉ để xem giao diện) nên tự style theo đúng màu/font/khoảng cách chung của theme
     * (--th-color-main, --th-font-main, .btn-blues...), có dùng lại đúng các class CSS gốc đã
     * xác nhận có trong evo-accounts.scss.css (.account-page, .my-account .recent-orders,
     * .block-account, .btn-edit-addr, .evo-btn-back, #order_details, .address_info).
     */

    /* Bug: evo-watch.scss.css có rule "header{position:fixed}" không giới hạn class (chỉ
       dành cho header.header của theme) nên "ăn nhầm" cả thẻ <header> ngữ nghĩa mà Woo tự
       dùng (vd my-address.php: <header class="woocommerce-Address-title">), đẩy nó dính lên
       sát viền trên trang, đè lên header thật. Trả lại position:static cho các <header> đó. */
    .woocommerce-account header:not(.header),
    .woocommerce-Address-title {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        z-index: auto !important;
    }

    .account-page {
        padding-bottom: 10px;
    }
    .account-page .page-title {
        margin-bottom: 30px;
    }

    /* Sidebar điều hướng (navigation.php) - list-group của Bootstrap, đổi màu active/hover
       sang theo brand thay vì xanh mặc định của Bootstrap. */
    .huydev-account-nav .list-group-item {
        border-color: #ebebeb;
        padding: 12px 18px;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    .huydev-account-nav .list-group-item a {
        display: block;
        color: #1c1c1c;
    }
    .huydev-account-nav .list-group-item:hover {
        background: #f7f7f7;
    }
    .huydev-account-nav .list-group-item.active {
        background: #1c1c1c;
        border-color: #1c1c1c;
    }
    .huydev-account-nav .list-group-item.active a {
        color: #fff;
    }

    /* Tổng quan tài khoản (dashboard.php). */
    .huydev-dashboard-welcome {
        font-size: 14px;
        line-height: 1.8;
        color: #333;
    }
    .huydev-dashboard-hello {
        font-size: 16px;
    }
    .huydev-dashboard-welcome a {
        color: #dc4e3f;
    }
    .huydev-dashboard-welcome a:hover {
        color: #1c1c1c;
    }

    /* Bảng đơn hàng (orders.php mặc định của Woo - class .woocommerce-orders-table). */
    .woocommerce-account .woocommerce-orders-table {
        border: 1px solid #ebebeb;
    }
    .woocommerce-account .woocommerce-orders-table__header {
        background: #f7f7f7;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .5px;
    }
    .woocommerce-account .woocommerce-orders-table__cell,
    .woocommerce-account .woocommerce-orders-table__header {
        padding: 12px 15px;
    }
    .woocommerce-account .woocommerce-orders-table__cell-order-status {
        text-transform: capitalize;
    }

    /* Địa chỉ (my-address.php mặc định). */
    .woocommerce-account .woocommerce-Address {
        margin-bottom: 20px;
        padding: 20px;
        border: 1px solid #ebebeb;
        border-radius: 4px;
    }
    .woocommerce-account .woocommerce-Address-title h2 {
        display: inline-block;
        margin: 0;
        font-family: var(--th-font-main);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
    }
    .woocommerce-account .woocommerce-Address-title .edit {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #dc4e3f;
    }
    .woocommerce-account .woocommerce-Address-title .edit:hover {
        color: #1c1c1c;
    }
    .woocommerce-account .woocommerce-Address address {
        margin-top: 10px;
        font-style: normal;
        line-height: 1.8;
        color: #333;
    }

    /* Nút chung trong toàn bộ khu vực Tài khoản (Lưu thay đổi/Xem/Hủy đơn...) - dùng lại đúng
       màu/kiểu .btn-blues thay vì nút xám mặc định của Woo. */
    .woocommerce-account button.button,
    .woocommerce-account a.button,
    .woocommerce-account input.button {
        padding: 10px 24px;
        background: #1c1c1c;
        border: 0;
        border-radius: 3px;
        color: #fff;
        font-family: var(--th-font-main);
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .5px;
        cursor: pointer;
        transition: opacity .2s ease;
    }
    .woocommerce-account button.button:hover,
    .woocommerce-account a.button:hover,
    .woocommerce-account input.button:hover {
        opacity: .85;
        color: #fff;
    }
    .woocommerce-account .woocommerce-Pagination {
        margin-top: 15px;
    }

    /* Form Tài khoản/Địa chỉ (form-edit-account.php, form-edit-address.php mặc định) - input
       đã có border sẵn từ Woo, chỉ chỉnh label + khoảng cách cho đồng bộ font/màu với theme. */
    .woocommerce-account .woocommerce-EditAccountForm label,
    .woocommerce-account .woocommerce-address-fields label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #3d3d3d;
    }
    .woocommerce-account .woocommerce-EditAccountForm .form-row,
    .woocommerce-account .woocommerce-address-fields .form-row {
        margin-bottom: 16px;
    }
    .woocommerce-account .woocommerce-EditAccountForm legend,
    .woocommerce-account .woocommerce-address-fields legend {
        margin: 10px 0 20px;
        padding-top: 10px;
        border-top: 1px solid #ebebeb;
        font-family: var(--th-font-main);
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
    }
}