/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 15 2026 | 09:20:59 */
/*==================================================
VIETTEL SOLAR CALCULATOR
Version 2.0
Responsive for Flatsome / WordPress
==================================================*/

/* RESET */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    font-size:16px;

    -webkit-text-size-adjust:100%;

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

    color:#333;

    background:#f7f8fa;

    line-height:1.6;

}

/* MEDIA */

img,
picture,
video,
canvas,
svg{

    display:block;

    max-width:100%;

    height:auto;

}

iframe{

    max-width:100%;

}

button,
input,
textarea,
select{

    font:inherit;

}

a{

    text-decoration:none;

}

/* CONTAINER */

#viettel-solar-calculator{

    width:100%;

    max-width:900px;

    margin:40px auto;

    padding:0 16px;

}

/* MAIN BOX */

.vt-box{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #ececec;

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

}

/* HEADER */

.vt-header{

    background:
    linear-gradient(
    135deg,
    #d71920,
    #ff4040
    );

    color:#fff;

    text-align:center;

    padding:28px 24px;

}

/* MAIN TITLE */

.vt-header h2{

    color:#fff;

    font-size:clamp(24px,4vw,34px);

    font-weight:800;

    line-height:1.3;

    margin-bottom:8px;

}

/* SUB TITLE */

.vt-header h3{

    color:#fff;

    font-size:clamp(18px,3vw,26px);

    font-weight:700;

    line-height:1.4;

    margin-bottom:12px;

}

/* DESCRIPTION */

.vt-header p{

    color:rgba(255,255,255,.95);

    font-size:15px;

    line-height:1.7;

    max-width:700px;

    margin:auto;

}

/*==================================================
BODY
==================================================*/

.vt-body{

    padding:28px;

}

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

.vt-input{

    margin-bottom:28px;

}

.vt-input label{

    display:block;

    margin-bottom:10px;

    font-size:16px;

    font-weight:700;

    color:#333;

}

.vt-input input{

    width:100%;

    height:56px;

    padding:0 18px;

    border:2px solid #e5e5e5;

    border-radius:12px;

    background:#fff;

    font-size:16px;

    transition:.25s;

    appearance:none;

    -webkit-appearance:none;

}

.vt-input input:focus{

    outline:none;

    border-color:#d71920;

    box-shadow:0 0 0 4px rgba(215,25,32,.12);

}

/*==================================================
GRID
==================================================*/

.vt-grid{

    display:grid;

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

    gap:18px;

    width:100%;

    align-items:stretch;

}

/*==================================================
CARD
==================================================*/

.vt-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    width:100%;

    min-width:0;

    min-height:150px;

    padding:22px;

    background:#fafafa;

    border:1px solid #ededed;

    border-left:5px solid #d71920;

    border-radius:14px;

    transition:.25s;

    overflow:hidden;

}

.vt-card:hover{

    transform:translateY(-3px);

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

}

.vt-card h4{

    color:#666;

    font-size:15px;

    font-weight:600;

    line-height:1.5;

    margin-bottom:12px;

    word-break:break-word;

    overflow-wrap:anywhere;

}

.vt-card .value{

    color:#d71920;

    font-size:clamp(22px,4vw,32px);

    font-weight:800;

    line-height:1.25;

    word-break:break-word;

    overflow-wrap:anywhere;

}

/* Card chiếm toàn bộ hàng */

.vt-card.full{

    grid-column:1 / -1;

}

/*==================================================
FOOTER
==================================================*/

.vt-footer{

    margin-top:28px;

    padding:24px;

    background:#fff5f5;

    border:1px solid #ffd9d9;

    border-radius:16px;

    text-align:center;

}

/*==================================================
NOTE
==================================================*/

.vt-footer .vt-note{

    display:block;

    margin-bottom:18px;

    font-size:16px;

    font-weight:600;

    color:#555;

    line-height:1.6;

}

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

.vt-contact-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:auto;

    max-width:330px;

    min-height:60px;

    padding:16px 22px;

    border-radius:999px;

    background:linear-gradient(135deg,#d71920,#ff4040);

    color:#fff !important;

    font-size:18px;

    font-weight:700;

    text-decoration:none !important;

    box-shadow:

    0 10px 25px rgba(215,25,32,.35);

    transition:

    transform .25s,

    box-shadow .25s,

    background .25s;

    user-select:none;

    -webkit-user-select:none;

    touch-action:manipulation;

}

.vt-contact-button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 14px 32px rgba(215,25,32,.45);

}

.vt-contact-button:active{

    transform:scale(.98);

}

.vt-contact-button span{

    color:#fff;

}

/*==================================================
ICON
==================================================*/

.phone-icon{

    display:inline-block;

    animation:ring 1.2s infinite;

}

/*==================================================
ANIMATION
==================================================*/

@keyframes ring{

0%{

transform:rotate(0deg);

}

10%{

transform:rotate(-20deg);

}

20%{

transform:rotate(18deg);

}

30%{

transform:rotate(-18deg);

}

40%{

transform:rotate(15deg);

}

50%{

transform:rotate(0deg);

}

100%{

transform:rotate(0deg);

}

}

@keyframes pulse{

0%{

box-shadow:

0 0 0 0 rgba(215,25,32,.55);

}

70%{

box-shadow:

0 0 0 18px rgba(215,25,32,0);

}

100%{

box-shadow:

0 0 0 0 rgba(215,25,32,0);

}

}

.vt-contact-button{

animation:pulse 2s infinite;

}

/* Mobile chỉ hiển thị 1 cột */

@media only screen and (max-width:768px){

    .vt-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .vt-card,
    .vt-card.full{
        grid-column:1 / -1 !important;
        width:100% !important;
        min-height:auto;
    }

}

/*==================================================
PRICE TABLE
==================================================*/

.vt-price-table{

    width:100%;

    max-width:1100px;

    margin:40px auto;

    padding:30px;

    background:#fff;

    border:1px solid #ededed;

    border-radius:18px;

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

}

/*============================*/

.vt-title{

    text-align:center;

    margin-bottom:30px;

}

.vt-title h2{

    color:#d71920;

    font-size:clamp(26px,4vw,42px);

    font-weight:800;

    line-height:1.3;

    margin-bottom:10px;

    text-transform:uppercase;

}

.vt-title p{

    color:#666;

    font-size:16px;

    line-height:1.7;

    max-width:760px;

    margin:auto auto 8px;

}

/*============================*/

.table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

    border-radius:14px;

}

/*============================*/

.vt-price-table table{

    width:100%;

    min-width:720px;

    border-collapse:collapse;

    background:#fff;

}

/*============================*/

.vt-price-table thead{

    background:#d71920;

}

.vt-price-table th{

    color:#fff;

    padding:18px 14px;

    text-align:center;

    font-size:16px;

    font-weight:700;

    line-height:1.45;

    vertical-align:middle;

    white-space:normal;

}

/*============================*/

.vt-price-table td{

    padding:18px 14px;

    text-align:center;

    font-size:16px;

    font-weight:500;

    line-height:1.6;

    color:#333;

    border-bottom:1px solid #eeeeee;

}

/*============================*/

.vt-price-table tbody tr{

    transition:.25s;

}

.vt-price-table tbody tr:nth-child(even){

    background:#fafafa;

}

.vt-price-table tbody tr:hover{

    background:#fff4f4;

}

/*============================*/

.vt-price-table td:first-child{

    font-weight:700;

    color:#d71920;

}

/*============================*/

.vt-price-table td:nth-child(2){

    font-weight:700;

}

/*============================*/

.vt-price-table .vt-note{

    margin-top:25px;

    padding:18px;

    background:#fff7f7;

    border-left:5px solid #d71920;

    border-radius:10px;

    font-size:15px;

    line-height:1.8;

    color:#555;

}

/*==================================================
FIX FLATSOME
==================================================*/

#viettel-solar-calculator *{

max-width:100%;

}

#viettel-solar-calculator .row,
#viettel-solar-calculator .col{

margin:0;

padding:0;

}

#viettel-solar-calculator{

overflow:hidden;

}

.vt-grid{

display:grid !important;

}

.vt-card{

width:100%;

min-width:0;

}

.vt-card .value{

overflow-wrap:anywhere;

word-break:break-word;

}

.table-responsive{

overflow-x:auto;

-webkit-overflow-scrolling:touch;

}

@media (max-width:768px){

.vt-price-table td{

    display:flex !important;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}

.vt-price-table td::before{

    content:attr(data-label) !important;

    display:block !important;

    flex:0 0 45%;

    color:#d71920 !important;

    font-size:14px;

    font-weight:700;

    text-align:left;

}

}

/*==========================
TABLE TO CARD MOBILE
==========================*/

@media (max-width:768px){

.table-responsive{

overflow:visible;

}

.vt-price-table table{

width:100%;

min-width:100%;

border:0;

}

.vt-price-table thead{

display:none;

}

.vt-price-table tbody{

display:block;

}

.vt-price-table tr{

display:block;

background:#fff;

margin-bottom:18px;

border-radius:14px;

overflow:hidden;

border:1px solid #ececec;

box-shadow:0 6px 18px rgba(0,0,0,.06);

}

.vt-price-table td{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 16px;

text-align:right;

border-bottom:1px solid #f2f2f2;

font-size:15px;

}

.vt-price-table td:last-child{

border-bottom:none;

}

.vt-price-table td::before{

content:attr(data-label);

font-weight:700;

color:#d71920;

text-align:left;

padding-right:15px;

}

}