/**
 * ==========================================================
 * NGOC WEB
 * POPUP XÁC NHẬN THUỐC TÂN DƯỢC
 * ==========================================================
 */


/* ==========================================================
   OVERLAY
   ========================================================== */

.ngoc-drug-overlay {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.45);

    box-sizing: border-box;
}


/*
 * Khi popup mở
 */
.ngoc-drug-overlay.ngoc-drug-open {

    display: flex;

}


/* ==========================================================
   POPUP
   ========================================================== */

.ngoc-drug-popup {

    position: relative;

    width: 100%;

    max-width: 430px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);

    overflow: hidden;

    box-sizing: border-box;

    animation: ngocDrugPopupIn 0.25s ease-out;

}


@keyframes ngocDrugPopupIn {

    from {

        opacity: 0;

        transform: translateY(15px) scale(0.98);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}


/* ==========================================================
   INNER
   ========================================================== */

.ngoc-drug-popup-inner {

    padding: 18px 16px 16px;

}


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

.ngoc-drug-popup h2 {

    margin: 0 0 10px;

    padding: 0;

    text-align: center;

    font-family: inherit;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;

    color: #003b8f;

}


/* ==========================================================
   INFORMATION BOX
   ========================================================== */

.ngoc-drug-info {

    margin-top: 10px;

    padding: 10px 12px;

    background: #eeeeee;

    border-radius: 4px;

    box-sizing: border-box;

}


/*
 * Tiêu đề trong box
 */

.ngoc-drug-info-title {

    margin-bottom: 4px;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

    color: #003b8f;

}


/*
 * Nội dung
 */

.ngoc-drug-info-text {

    font-family: inherit;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 400;

    color: #333333;

}


/* ==========================================================
   BUTTON AREA
   ========================================================== */

.ngoc-drug-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 13px;

}


/* ==========================================================
   BUTTON
   ========================================================== */

.ngoc-drug-btn {

    min-width: 120px;

    height: 38px;

    padding: 0 15px;

    border-radius: 20px;

    font-family: inherit;

    font-size: 11px;

    line-height: 38px;

    font-weight: 700;

    text-align: center;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

    box-sizing: border-box;

}


.ngoc-drug-btn:hover {

    transform: translateY(-1px);

}


/* ==========================================================
   QUAY VỀ TRANG CHỦ
   ========================================================== */

.ngoc-drug-btn-home {

    background: #ffffff;

    border: 1px solid #003b8f;

    color: #003b8f;

}


.ngoc-drug-btn-home:hover {

    background: #f3f6fb;

}


/* ==========================================================
   XÁC NHẬN
   ========================================================== */

.ngoc-drug-btn-confirm {

    background: #003b8f;

    border: 1px solid #003b8f;

    color: #ffffff;

}


.ngoc-drug-btn-confirm:hover {

    background: #002d70;

}


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

@media (max-width: 480px) {

    .ngoc-drug-overlay {

        padding: 15px;

    }


    .ngoc-drug-popup {

        max-width: 100%;

        border-radius: 14px;

    }


    .ngoc-drug-popup-inner {

        padding: 17px 13px 14px;

    }


    .ngoc-drug-popup h2 {

        font-size: 19px;

    }


    .ngoc-drug-actions {

        gap: 8px;

    }


    .ngoc-drug-btn {

        min-width: 0;

        width: 50%;

        padding: 0 10px;

        font-size: 10px;

    }

}
html.ngoc-drug-modal-open,
body.ngoc-drug-modal-open {

    overflow: hidden !important;

}