/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1.40
*/

/*************** 1. KHAI BÁO FONT CHỮ (@FONT-FACE) ***************/

/* Shopee Display */
@font-face {
    font-family: 'Shopee Display';
    src: url('/wp-content/fonts/Shopee Font Full VH/ShopeeDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shopee Display';
    src: url('/wp-content/fonts/Shopee Font Full VH/ShopeeDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shopee Display';
    src: url('/wp-content/fonts/Shopee Font Full VH/ShopeeDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shopee Display';
    src: url('/wp-content/fonts/Shopee Font Full VH/ShopeeDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shopee Display';
    src: url('/wp-content/fonts/Shopee Font Full VH/ShopeeDisplay-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shopee Display';
    src: url('/wp-content/fonts/Shopee Font Full VH/ShopeeDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Shopee Text */
@font-face {
    font-family: 'Shopee Text';
    src: url('/wp-content/fonts/Shopee Font Full VH/FVHShopeeText-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*************** 2. THIẾT LẬP CHUNG (GLOBAL STYLES) ***************/

#masthead { display: none; }

body {
    font-family: 'Shopee Display', sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Shopee Display', sans-serif;
    font-weight: 700;
}

.special-text {
    font-family: 'Shopee Text', sans-serif;
}

.p_no_margin p { margin-bottom: 0; }
.ux-timer { margin: unset !important; border-spacing: unset !important; }
.ux-timer span { background-color: rgb(140, 212, 253) !important;}
.ux-timer strong { font-weight:200 !important}

/*************** 3. CÁC COMPONENT TÙY CHỈNH ***************/

/* Button & Background */
.button-buy {
    border-radius: 99px;
    padding: 10px 30px !important;
    background: linear-gradient(0deg, #006BE6, #228BFF);
}

.container-background {
    position: relative;
}

.container-background::after {
    content: "";
    position: absolute;
    bottom: 170px;
    left: calc(-50vw + 50%);
    width: calc(50vw + 60%);
    height: 80px;
    background: linear-gradient(to bottom, #006BE6, #2895FC);
    z-index: -1;
}

/* Elravie Card */
.elravie-card {
    background-color: #98d8f9;
    border-radius: 15px 0;
    overflow: hidden;
    max-width: 400px; 
    height: 460px;
    position: relative;
    font-family: 'Shopee Display', sans-serif;
}

.elravie-header {
    position: relative;
    background-color: #47a4ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.elravie-title { padding: 20px; text-align: left; width: calc(100% - 70px);}
.elravie-title strong { margin: 0; color: #fff; font-size: 15px; text-transform: none; }
.elravie-title h6 { margin: 0; color: #fff; font-weight: bold; font-size: 16px; }

.elravie-bottle {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #2b7ddd;
    border-radius: 30px 0px 8px 0px;
    width: 70px;
}

.elravie-body {
    padding: 10px 20px;
    color: #0b538e;
    line-height: 1.6;
    font-weight: 500;
    position: absolute;
    top: 80px;
}

.quote-icon { font-size: 40px; line-height: 1; opacity: 0.6; }
.quote-icon.bottom { text-align: right; }

.elravie-footer { position: absolute; bottom: 0; }
.elravie-footer span {
    background-color: #4da6e9;
    color: #fff;
    padding: 8px 25px;
    border-radius: 0 10px 0px 0;
    font-weight: bold;
    display: inline-block;
}

/* Titles & Lines */
.title_trai_nghiem { width: 417px; }
.title_white img { margin-bottom: unset !important; }
.title_white h2 { 
	background-color: white;     
	display: flex;
    justify-content: center;
    align-items: center;
}

.title_blue {
    width: fit-content;
    padding: 15px;
    background-color: #8cd4fd;
    text-align: center;
}
.title_blue h2 { margin: unset; }

.bg_blue p { background-color: #0B76EC; padding: 5px; }

.title-with-line h2, .underline h2 {
    display: flex;      
    align-items: flex-end;
    gap: 15px;
}

.title-with-line h2::after, .underline h2::before {
    content: "";
    flex: 1;
    height: 2px;
    background-color: #0066cc;
	margin-bottom:10px;
}

/* Layout Helpers */
.edit_space .col-inner, .text-aligen-center .col-inner {
    display: flex;
    flex-direction: column;
}
.edit_space .col-inner { justify-content: space-between; }
.text-aligen-center .col-inner { justify-content: center; }

/*************** 4. SHOPEE FORM (CONTACT FORM 7) ***************/

.shopee-form-container {
    max-width: 400px;
    margin: 0 auto;
}

.shopee-input-group input, 
.shopee-input-group select {
    width: 100% !important;
    padding: 12px 25px !important;
    margin-bottom: 15px !important;
    border: none !important;
    border-radius: 50px !important;
    background-color: #99d9ff !important;
    color: #333 !important;
    font-family: 'Shopee Display', sans-serif !important;
    font-size: 16px !important;
    outline: none !important;
    height: 57px !important;
}

.shopee-input-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
}

.shopee-input-group input::placeholder { color: #555; }

.shopee-submit-group { text-align: center; }
.shopee-submit-group p { display: flex; flex-direction: column; align-items: center; }

.shopee-submit-group input[type="submit"] {
    background-color: #0066ff;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    min-width: 250px;
    width: auto;
    text-transform: uppercase;
    margin-bottom: 5px !important;
}

.shopee-submit-group input[type="submit"]:hover {
    background-color: #0052cc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 10px;
    padding-left: 20px;
}

/*************** 5. MOBILE ONLY STYLES ***************/

@media only screen and (max-width: 48em) {
    .container-background::after {
        left: -25%;
        width: 150%;
        background-color: #0066FE;
		bottom: 70px;
    }
}

@media only screen and (max-width: 550px){
	.title-with-line h2::after, .underline h2::before {
		margin-bottom:6px;
	}
	.container-background::after {
        left: 0;
        width: 100%;
        background-color: #0066FE;
		bottom: 60px;
    }
	.ux-timer{font-size: 250% !important}
}