/* =========================================================
   HHC SMART CF7 POPUP
   VERSION: 1.0.2

   - Anti flash
   - Native hidden state
   - aria-hidden state
   - is-open animation state
   - z-index reduced to 2000
   ========================================================= */


/* =========================================================
   01. ROOT POPUP
   ========================================================= */

.hhc-smart-popup{
    position:fixed;

    inset:0;

    z-index:2000;

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    margin:0;
    padding:20px;

    background:transparent;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    overflow:auto;

    box-sizing:border-box;

    transition:
        opacity .20s ease,
        visibility .20s ease;
}


/* =========================================================
   02. NATIVE HIDDEN
   Đây là trạng thái đóng tuyệt đối
   ========================================================= */

.hhc-smart-popup[hidden]{
    display:none !important;
}


/* =========================================================
   03. CLOSED STATE
   ========================================================= */

.hhc-smart-popup[aria-hidden="true"]{
    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;
}


/* =========================================================
   04. OPEN STATE
   ========================================================= */

.hhc-smart-popup.is-open,
.hhc-smart-popup[aria-hidden="false"]{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* =========================================================
   05. BACKDROP
   ========================================================= */

.hhc-popup-backdrop{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background:
        rgba(0,0,0,.58);

    opacity:0;

    transition:
        opacity .20s ease;
}


/* Khi mở */

.hhc-smart-popup.is-open
.hhc-popup-backdrop{
    opacity:1;
}


/* =========================================================
   06. DIALOG
   ========================================================= */

.hhc-popup-dialog{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(280px, .9fr)
        minmax(380px, 1.1fr);

    width:min(960px, 100%);

    max-height:
        calc(100vh - 40px);

    margin:auto;

    background:#FFFBED;

    border:
        1px solid rgba(255,202,0,.45);

    border-radius:16px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.24);

    overflow:hidden;

    opacity:0;

    transform:
        translateY(14px)
        scale(.985);

    transition:
        opacity .20s ease,
        transform .20s ease;

    box-sizing:border-box;
}


/* Open dialog */

.hhc-smart-popup.is-open
.hhc-popup-dialog{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   07. CLOSE BUTTON
   ========================================================= */

.hhc-popup-close{
    position:absolute;

    top:12px;
    right:12px;

    z-index:5;

    display:flex;

    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    min-width:36px;
    min-height:36px;

    margin:0;
    padding:0;

    background:#FFFBED;

    border:
        1px solid rgba(0,0,0,.12);

    border-radius:50%;

    color:#000000;

    font-size:22px;

    line-height:1;

    cursor:pointer;

    box-shadow:
        0 3px 10px rgba(0,0,0,.10);

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


.hhc-popup-close:hover,
.hhc-popup-close:focus{
    background:#FFCA00;

    border-color:#FFCA00;

    color:#000000;

    transform:
        rotate(4deg);

    outline:none;
}


/* Lucide */

.hhc-popup-close
.lucide-icon-wrap{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    color:currentColor;

    line-height:0;
}


.hhc-popup-close
.lucide-local-icon{
    width:22px !important;
    height:22px !important;

    stroke:currentColor !important;
}


/* =========================================================
   08. MEDIA COLUMN
   ========================================================= */

.hhc-popup-media{
    position:relative;

    min-height:100%;

    background:#F8EAEA;

    overflow:hidden;
}


.hhc-popup-media img{
    display:block;

    width:100%;
    height:100%;

    min-height:100%;

    object-fit:cover;
}


/* Gradient nhẹ */

.hhc-popup-media::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 25%,
            rgba(0,0,0,.42) 100%
        );

    pointer-events:none;
}


/* =========================================================
   09. MEDIA BADGE
   ========================================================= */

.hhc-popup-media-badge{
    position:absolute;

    top:18px;
    left:18px;

    z-index:2;

    display:inline-flex;

    align-items:center;

    padding:
        7px 11px;

    background:#FFCA00;

    border-radius:6px;

    color:#000000;

    font-size:11px;

    font-weight:800;

    line-height:1;

    letter-spacing:.5px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.10);
}


/* =========================================================
   10. COUNTDOWN ON MEDIA
   ========================================================= */

.hhc-popup-media
.hhc-popup-countdown-wrap{
    position:absolute;

    left:18px;
    right:18px;
    bottom:18px;

    z-index:3;

    padding:13px;

    background:
        rgba(255,251,237,.94);

    border:
        1px solid rgba(255,202,0,.55);

    border-radius:10px;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* =========================================================
   11. CONTENT COLUMN
   ========================================================= */

.hhc-popup-content{
    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:
        34px
        34px
        28px;

    background:#FFFBED;

    color:#000000;

    overflow-y:auto;

    box-sizing:border-box;
}


/* =========================================================
   12. HEADING
   ========================================================= */

.hhc-popup-heading{
    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:
        0 42px
        8px 0;
}


.hhc-popup-heading
.lucide-icon-wrap{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    flex:
        0 0 26px;

    margin-top:2px;

    color:#FFCA00;

    line-height:0;
}


.hhc-popup-heading
.lucide-local-icon{
    width:23px !important;
    height:23px !important;

    stroke:currentColor !important;
}


#hhc-popup-title{
    margin:0 !important;

    color:#000000 !important;

    font-size:24px !important;

    font-weight:800 !important;

    line-height:1.28 !important;

    letter-spacing:-.2px;
}


/* =========================================================
   13. SUBTITLE
   ========================================================= */

.hhc-popup-subtitle{
    margin:
        0 0 20px;

    color:#000000;

    font-size:14px;

    font-weight:500;

    line-height:1.5;

    opacity:.66;
}


/* =========================================================
   14. FORM WRAPPER
   ========================================================= */

.hhc-popup-form{
    width:100%;
}


/* =========================================================
   15. CF7 FIELDS
   ========================================================= */

.hhc-popup-form
.wpcf7{
    margin:0;
}


.hhc-popup-form
.wpcf7-form{
    margin:0;
}


.hhc-popup-form
p{
    margin:
        0 0 12px;
}


.hhc-popup-form
input[type="text"],
.hhc-popup-form
input[type="email"],
.hhc-popup-form
input[type="tel"],
.hhc-popup-form
input[type="number"],
.hhc-popup-form
select,
.hhc-popup-form
textarea{
    width:100%;

    min-height:46px;

    margin:0;

    padding:
        10px 13px;

    background:#FFFFFF;

    border:
        1px solid rgba(0,0,0,.14);

    border-radius:7px;

    color:#000000;

    font-size:14px;

    box-shadow:none;

    outline:none;

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

    box-sizing:border-box;
}


.hhc-popup-form
textarea{
    min-height:100px;

    resize:vertical;
}


/* Placeholder */

.hhc-popup-form
input::placeholder,
.hhc-popup-form
textarea::placeholder{
    color:rgba(0,0,0,.46);
}


/* Focus */

.hhc-popup-form
input[type="text"]:focus,
.hhc-popup-form
input[type="email"]:focus,
.hhc-popup-form
input[type="tel"]:focus,
.hhc-popup-form
input[type="number"]:focus,
.hhc-popup-form
select:focus,
.hhc-popup-form
textarea:focus{
    border-color:#FFCA00;

    box-shadow:
        0 0 0 3px
        rgba(255,202,0,.15);
}


/* =========================================================
   16. CHECKBOX
   ========================================================= */

.hhc-popup-form
.wpcf7-list-item{
    margin:
        0 0 8px;
}


.hhc-popup-form
.wpcf7-list-item-label{
    color:#000000;

    font-size:13px;

    line-height:1.45;
}


/* =========================================================
   17. SUBMIT
   ========================================================= */

.hhc-popup-form
input[type="submit"],
.hhc-popup-form
button[type="submit"],
.hhc-popup-form
.wpcf7-submit{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:100%;

    min-height:46px;

    margin:
        4px 0 0;

    padding:
        10px 18px;

    background:#D83131 !important;

    border:
        1px solid #D83131 !important;

    border-radius:7px;

    color:#FFFFFF !important;

    font-size:13px;

    font-weight:800;

    line-height:1.2;

    text-align:center;

    cursor:pointer;

    box-shadow:
        0 4px 12px
        rgba(216,49,49,.18);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.hhc-popup-form
input[type="submit"]:hover,
.hhc-popup-form
button[type="submit"]:hover,
.hhc-popup-form
.wpcf7-submit:hover{
    background:#B92323 !important;

    border-color:#B92323 !important;

    color:#FFFFFF !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 16px
        rgba(216,49,49,.22);
}


/* =========================================================
   18. CF7 RESPONSE
   ========================================================= */

.hhc-popup-form
.wpcf7-response-output{
    margin:
        12px 0 0 !important;

    padding:
        10px 12px !important;

    border:
        1px solid #FFCA00 !important;

    border-radius:7px;

    background:#FFFBED;

    color:#000000;

    font-size:12px;

    line-height:1.5;
}


/* Validation */

.hhc-popup-form
.wpcf7-not-valid-tip{
    margin-top:4px;

    color:#D83131;

    font-size:11px;

    font-weight:600;
}


/* =========================================================
   19. SPINNER
   ========================================================= */

.hhc-popup-form
.wpcf7-spinner{
    margin:
        8px auto 0;
}


/* =========================================================
   20. NOTE
   ========================================================= */

.hhc-popup-note{
    margin:
        15px 0 0;

    padding-top:12px;

    border-top:
        1px solid rgba(255,202,0,.35);

    color:#000000;

    font-size:11px;

    line-height:1.5;

    opacity:.55;
}


/* =========================================================
   21. COUNTDOWN
   ========================================================= */

.hhc-popup-countdown-wrap{
    margin-top:16px;
}


.hhc-popup-countdown-inline{
    padding:
        14px;

    background:#F8EAEA;

    border:
        1px solid rgba(255,202,0,.45);

    border-radius:9px;
}


.hhc-popup-countdown-title{
    margin:
        0 0 8px;

    color:#000000;

    font-size:10px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:.8px;

    text-align:center;

    text-transform:uppercase;
}


.hhc-popup-countdown{
    display:grid;

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

    gap:7px;
}


.hhc-count-box{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    min-width:0;

    padding:
        8px 5px;

    background:#FFFBED;

    border:
        1px solid rgba(255,202,0,.50);

    border-radius:7px;
}


.hhc-count-box strong{
    display:block;

    color:#000000;

    font-size:18px;

    font-weight:800;

    line-height:1;
}


.hhc-count-box span{
    display:block;

    margin-top:4px;

    color:#000000;

    font-size:9px;

    font-weight:600;

    line-height:1;

    opacity:.55;
}


/* =========================================================
   22. ADMIN WARNING
   ========================================================= */

.hhc-popup-admin-warning{
    padding:
        12px;

    background:#F8EAEA;

    border:
        1px solid #FFCA00;

    border-radius:7px;

    color:#000000;

    font-size:13px;

    line-height:1.5;
}


/* =========================================================
   23. PAGE LOCK
   ========================================================= */

html.hhc-popup-open,
body.hhc-popup-open{
    overflow:hidden !important;
}


/* =========================================================
   24. TABLET
   ========================================================= */

@media(max-width:849px){

    .hhc-smart-popup{
        padding:
            14px;
    }


    .hhc-popup-dialog{
        grid-template-columns:
            1fr;

        width:min(620px,100%);

        max-height:
            calc(100vh - 28px);

        border-radius:13px;
    }


    .hhc-popup-media{
        min-height:190px;
        max-height:240px;
    }


    .hhc-popup-media img{
        min-height:190px;

        max-height:240px;
    }


    .hhc-popup-content{
        padding:
            26px
            22px
            22px;
    }


    #hhc-popup-title{
        font-size:
            21px !important;
    }


    .hhc-popup-close{
        top:9px;
        right:9px;

        width:34px;
        height:34px;

        min-width:34px;
        min-height:34px;
    }

}


/* =========================================================
   25. MOBILE
   ========================================================= */

@media(max-width:549px){

    .hhc-smart-popup{
        align-items:flex-start;

        padding:
            10px;
    }


    .hhc-popup-dialog{
        width:100%;

        max-height:
            calc(100dvh - 20px);

        margin:auto 0;

        border-radius:10px;
    }


    .hhc-popup-media{
        min-height:150px;
        max-height:180px;
    }


    .hhc-popup-media img{
        min-height:150px;
        max-height:180px;
    }


    .hhc-popup-media-badge{
        top:12px;
        left:12px;

        padding:
            6px 9px;

        font-size:9px;
    }


    .hhc-popup-media
    .hhc-popup-countdown-wrap{
        left:10px;
        right:10px;
        bottom:10px;

        padding:9px;
    }


    .hhc-popup-content{
        padding:
            22px
            16px
            18px;
    }


    .hhc-popup-heading{
        gap:7px;

        margin-right:36px;
    }


    .hhc-popup-heading
    .lucide-icon-wrap{
        width:22px;
        height:22px;

        flex-basis:22px;
    }


    .hhc-popup-heading
    .lucide-local-icon{
        width:20px !important;
        height:20px !important;
    }


    #hhc-popup-title{
        font-size:
            18px !important;

        line-height:
            1.3 !important;
    }


    .hhc-popup-subtitle{
        margin-bottom:14px;

        font-size:12px;
    }


    .hhc-popup-form
    input[type="text"],
    .hhc-popup-form
    input[type="email"],
    .hhc-popup-form
    input[type="tel"],
    .hhc-popup-form
    input[type="number"],
    .hhc-popup-form
    select{
        min-height:43px;

        font-size:13px;
    }


    .hhc-popup-form
    input[type="submit"],
    .hhc-popup-form
    button[type="submit"],
    .hhc-popup-form
    .wpcf7-submit{
        min-height:44px;

        font-size:12px;
    }


    .hhc-popup-countdown{
        gap:5px;
    }


    .hhc-count-box{
        padding:
            7px 3px;
    }


    .hhc-count-box strong{
        font-size:16px;
    }


    .hhc-count-box span{
        font-size:8px;
    }


    .hhc-popup-close{
        top:7px;
        right:7px;

        width:32px;
        height:32px;

        min-width:32px;
        min-height:32px;

        font-size:20px;
    }

}


/* =========================================================
   26. VERY SMALL MOBILE
   ========================================================= */

@media(max-width:380px){

    .hhc-smart-popup{
        padding:
            7px;
    }


    .hhc-popup-content{
        padding:
            20px
            13px
            15px;
    }


    #hhc-popup-title{
        font-size:
            17px !important;
    }


    .hhc-popup-countdown-title{
        font-size:9px;
    }


    .hhc-count-box strong{
        font-size:15px;
    }

}


/* =========================================================
   27. REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .hhc-smart-popup,
    .hhc-popup-backdrop,
    .hhc-popup-dialog,
    .hhc-popup-close,
    .hhc-popup-form input,
    .hhc-popup-form button{
        transition:none !important;
    }

}
/* =========================================================
   HHC POPUP - FORM SPACING FIX
   ========================================================= */

/* Khung form */
.hhc-popup-form .hhc-download-form{
    display:flex;
    flex-direction:column;

    width:100%;

    gap:0;
}


/* =========================================================
   INPUT FIELD
   ========================================================= */

.hhc-popup-form .hhc-form-field{
    display:block;

    width:100%;

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


/* Span CF7 */
.hhc-popup-form .hhc-form-field .wpcf7-form-control-wrap{
    display:block;

    width:100%;
}


/* Input */
.hhc-popup-form .hhc-form-field input{
    display:block;

    width:100%;

    margin:0 !important;

    box-sizing:border-box;
}


/* =========================================================
   DOCUMENT CHECKBOX LIST
   Tách khỏi input phía trên
   ========================================================= */

.hhc-popup-form .hhc-document-list{
    display:block;

    width:100%;

    margin:
        4px 0
        14px !important;

    padding:
        2px 0 0;
}


/* CF7 checkbox wrapper */
.hhc-popup-form .hhc-document-list .wpcf7-form-control{
    display:grid;

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

    gap:
        10px 16px;

    width:100%;
}


/* Từng checkbox */
.hhc-popup-form .hhc-document-list .wpcf7-list-item{
    display:block;

    margin:0 !important;
    padding:0;
}


/* Label */
.hhc-popup-form .hhc-document-list label{
    display:flex;

    align-items:flex-start;

    gap:8px;

    margin:0;

    cursor:pointer;
}


/* Checkbox thật */
.hhc-popup-form .hhc-document-list input[type="checkbox"]{
    width:15px;
    height:15px;

    min-width:15px;

    margin:
        2px 0 0 !important;

    flex:
        0 0 15px;
}


/* Text checkbox */
.hhc-popup-form .hhc-document-list .wpcf7-list-item-label{
    display:block;

    color:#000000;

    font-size:13px;

    font-weight:600;

    line-height:1.4;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.hhc-popup-form .hhc-form-submit{
    display:block;

    width:100%;

    margin:
        2px 0 0 !important;

    padding:0;
}


.hhc-popup-form .hhc-form-submit input[type="submit"]{
    width:100%;

    margin:0 !important;
}


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

@media(max-width:549px){

    .hhc-popup-form .hhc-form-field{
        margin-bottom:
            10px !important;
    }


    .hhc-popup-form .hhc-document-list{
        margin:
            4px 0
            12px !important;
    }


    .hhc-popup-form .hhc-document-list .wpcf7-form-control{
        grid-template-columns:
            1fr;

        gap:8px;
    }


    .hhc-popup-form .hhc-document-list .wpcf7-list-item-label{
        font-size:12px;
    }

}