/*
Theme Name: FWPT
Description: Deployed by Nhuong Le
Author: Nhượng Lê
Template: flatsome
Version: 3.19.7
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*** FWPT - Start ***/
.fwpt_chu_do_bong{ font-style: italic; text-shadow: 1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,2px 2px 3px #333;}
.fwpt_vien_trang{border: 1px solid #fff}
.fwpt_vien_den{border: 1px solid #000}
.fwpt_vien_mau_1{border: 1px solid var(--fs-color-primary)}
.fwpt_vien_mau_2{border: 1px solid var(--fs-color-secondary)}
.fwpt_vien_success{border: 1px solid var(--fs-color-success)}
.fwpt_vien_alert{border: 1px solid var(--fs-color-alert)}

/*** FWPT - End ***/

.product-info .share-icons .circle{border-radius:0px !important; border-bottom: 5px solid;}

.type-product .box-image a{padding: 3px; border-radius: 0 19px 0 0; border: 1px solid var(--fs-color-primary)}
.type-product .box-image img {border-radius: 0 15px 0 0}


/* FWPT - Timeline - Start */
.fwpt-vertical-timeline-section{ padding-left: 10px; padding-right: 10px; }
.fwpt-vertical-timeline-row{ padding-bottom: 2rem; border-left: 4px solid var(--primary-color); position: relative; }
.fwpt-vertical-timeline-row:last-child{border-left: 4px solid transparent;}
.fwpt-vertical-timeline-row:before{
width: 20px;
height: 20px;
content: "";
background: var(--primary-color);
position: absolute;
left: -12px;
top: -1px;
border: 4px solid var(--primary-color);
border-radius: 100%;
}
.fwpt-vertical-timeline-row:hover:before{ background: #fff; }
.fwpt-vertical-timeline-col{
border: 2px solid var(--primary-color);
border-radius: 6px;
margin-left: 23px;
margin-top: -22px;
/*box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);*/
}
.fwpt-vertical-timeline-col:before{
top: 21px;
left: -10px;
border-top: 8px solid transparent;
border-right: 8px solid var(--primary-color);
border-bottom: 8px solid transparent;
position: absolute;
content: '';
z-index: 1000;
}
.fwpt-vertical-timeline-time{
line-height: 32px;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px 10px;
background: var(--primary-color);
color: #fff;
}
.fwpt-vertical-timeline-time p{margin-bottom:0}
/* FWPT - Timeline - End */


/* DECOR BORDER 1 - START */
.fwpt_decor_border_1 {
    position: relative;
    padding: 12px; /* Khoảng cách cho viền */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.5s ease;
}
/* Tạo lớp viền chuyển động bằng pseudo-element */
.fwpt_decor_border_1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        #00f2fe, 
        #4facfe, 
        transparent 30%
    );
    animation: rotateBorder 4s linear infinite;
    z-index: 0;
}
/* Lớp phủ để tạo hiệu ứng "Glass" và giữ ảnh ở trên cùng */
.fwpt_decor_border_1 > *:first-child {
    position: relative;
    z-index: 1;
    border-radius: 15px;
    overflow: hidden;
    background: #fff; /* Đảm bảo nền ảnh không bị trong suốt */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* Hiệu ứng phóng nhẹ ảnh khi hover */
/*
.fwpt_decor_border_1 > *:first-child > *:first-child {
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
*/
/* Keyframes cho vòng xoay ánh sáng */
@keyframes rotateBorder {
    100% {
        transform: rotate(360deg);
    }
}
/* Bo góc cho chính tấm ảnh bên trong */
.fwpt_decor_border_1 > *:first-child > *:first-child {
    display: block;
    border-radius: 15px;
}
/* DECOR BORDER 1 - END */

/* DECOR BORDER 2 - START */
/* Container chính - Nơi chứa linh hồn của hiệu ứng */
.fwpt_decor_border_2 {
    position: relative;
    padding: 10px;
    background: #ccc; /* Nền đen giúp ánh sáng nổi bật hơn */
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}
/* Lớp ánh sáng chạy vòng quanh */
.fwpt_decor_border_2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        #ff00c1, /* Hồng neon */
        #00fff5, /* Xanh neon */
        #ff00c1, 
        transparent 40%
    );
    animation: rotateGlow 4s linear infinite;
    z-index: -1;
}
/* Lớp Glow lan tỏa (Phát sáng ra ngoài) */
.fwpt_decor_border_2::after {
    content: '';
    position: absolute;
    inset: 5px;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    /* Tạo độ nhòe để ánh sáng tỏa ra */
    filter: blur(25px);
    opacity: 0.8;
    background: conic-gradient(
        #ff00c1,
        #00fff5, 
        #ff00c1
    );
    animation: rotateGlow 4s linear infinite;
}
/* Khung chứa ảnh phía trong */
.fwpt_decor_border_2 > *:first-child {
    position: relative;
    background: #111;
    border-radius: 15px;
    z-index: 2;
    overflow: hidden;
}
/* Hiệu ứng khi di chuột vào (Hover) */
/*
.fwpt_decor_border_2:hover {
    transform: scale(1.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
*/
.fwpt_decor_border_2:hover::after {
    filter: blur(40px); /* Tăng độ phát sáng khi hover */
    opacity: 1;
}
/* Animation xoay */
@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Đảm bảo ảnh bo góc khớp với khung */
.fwpt_decor_border_2 > *:first-child > *:first-child {
    display: block;
    border-radius: 15px;
    transition: transform 0.5s ease;
}
/* DECOR BORDER 2 - END */

/* CHỮ CHUYỂN SẮC - START */
/* --- Chuyển sắc tĩnh tông đậm --- */
.fwpt_chu_chuyen_sac_tinh_1 {
    /* Màu: Tím đậm -> Xanh biển sâu -> Xanh lục bảo */
    background: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* --- Chuyển sắc động tông huyền ảo --- */
.fwpt_chu_chuyen_sac_dong_1 {
    /* Màu: Xanh Indigo -> Đỏ rượu -> Cam cháy -> Tím */
    background: linear-gradient(270deg, #1e3a8a, #9d174d, #92400e, #5b21b6);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    animation: moveGradient 6s ease infinite;
}
/* CHỮ CHUYỂN SẮC - END */

/* .box-text.box-text-products .price-wrapper .price span.amount, .fwpt_price_text { */
.fwpt_price_text {
    white-space: nowrap; color: #ff0000; font-weight: bold; font-style: italic; text-shadow: 1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,3px 3px 5px #333;
}

/* Hiệu ứng mượt mà cho dải màu chạy qua lại */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}