/* custom.css */
.vt-toc-wrapper{background: rgb(255, 255, 255); border: 1px solid rgb(255, 236, 236); border-radius: 16px; box-shadow: rgba(238, 0, 51, 0.08) 0px 10px 25px; overflow: hidden; margin: 0px; font-family: Arial, Helvetica, sans-serif; max-width: 100%;}
.vt-toc-header{background: linear-gradient(90deg, rgb(238, 0, 51) 0px, rgb(185, 28, 28) 100%); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; color: rgb(255, 255, 255);}
.toc-title-group{display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; text-transform: uppercase; color: rgb(255, 255, 255) !important;}
.toc-title-group a{color: rgb(255, 255, 255) !important;}
.toc-toggle-btn{color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.2); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; transition: 0.3s;}
.toc-toggle-btn:hover{background: rgb(255, 255, 255); color: rgb(238, 0, 51);}
.toc-toggle-btn.rotated i{transform: rotate(180deg);}
.toc-toggle-btn i{transition: transform 0.3s; font-size: 14px;}
.vt-toc-body{padding: 15px 20px; background: rgb(255, 255, 255); transition: 0.4s; max-height: 1000px; opacity: 1;}
.vt-toc-body.collapsed{max-height: 0px; padding-top: 0px; padding-bottom: 0px; opacity: 0; overflow: hidden;}
.vt-toc-body ul{list-style: none; padding: 0px; margin: 0px;}
.vt-toc-body > ul > li{margin-bottom: 8px; border-bottom: 1px dashed rgb(240, 240, 240); padding-bottom: 8px;}
.vt-toc-body > ul > li:last-child{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;}
.vt-toc-body ul li{padding-left: 0px !important;}
.vt-toc-body ul li::before{content: "" !important;}
.vt-toc-body a{text-decoration: none; color: rgb(51, 51, 51); font-size: 14px; font-weight: 600; display: block; transition: color 0.2s; line-height: 1.5;}
.vt-toc-body a:hover{color: rgb(238, 0, 51);}
.toc-num{color: rgb(238, 0, 51); font-weight: 800; margin-right: 5px;}
.vt-toc-body ul ul{margin-top: 5px; padding-left: 20px; border-left: 2px solid rgb(238, 238, 238); margin-left: 5px;}
.vt-toc-body ul ul li{margin-bottom: 4px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px;}
.vt-toc-body ul ul a{font-weight: 400; font-size: 13.5px; color: rgb(85, 85, 85);}
.vt-toc-body ul ul a:hover{color: rgb(238, 0, 51);}
.main-title{font-size: 22px; font-weight: 800; color: rgb(51, 51, 51); margin-bottom: 25px; text-transform: uppercase;}
@media only screen and (max-width: 768px){
.main-title{font-size: 18px;}
}
.vd-compare-box{overflow-x: auto; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 20px; margin: 20px 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
.vd-table{width: 100%; border-collapse: collapse; min-width: 400px;}
.vd-table th{background: rgb(248, 249, 250); padding: 15px; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.5px; color: rgb(102, 102, 102); border-bottom: 2px solid rgb(238, 238, 238);}
.vd-table td{padding: 16px; border-bottom: 1px solid rgb(241, 241, 241); vertical-align: middle; color: rgb(51, 51, 51);}
.vd-col-label{width: 25%; font-weight: 600; text-align: left; background: rgb(255, 255, 255);}
.vd-price{font-size: 1.2em; font-weight: 800; color: rgb(44, 62, 80); display: block;}
.text-green{color: rgb(40, 167, 69);}
.list-goi-pro{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; padding: 20px 0px;}
.card-v2{background: rgb(255, 255, 255); border-width: 4px 1px 1px; border-style: solid; border-color: rgb(228, 35, 58) rgb(240, 240, 240) rgb(240, 240, 240); border-image: none; border-radius: 12px; padding: 24px 20px; position: relative; box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 6px, rgba(0, 0, 0, 0.03) 0px 10px 15px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.card-v2:hover{transform: translateY(-7px); box-shadow: rgba(217, 35, 21, 0.15) 0px 15px 30px; border-color: rgb(255, 228, 230);}
.card-v2 .badge-top{position: absolute; top: -12px; right: 20px; background: rgb(255, 228, 230); color: rgb(185, 28, 28); font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;}
.card-v2 .badge-top[style*="background"]{box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px;}
.card-v2 .pack-name{font-size: 16px; font-weight: 700; color: rgb(63, 63, 70); margin-bottom: 8px; text-transform: uppercase; letter-spacing: -0.5px;}
.card-v2 .data-hero{font-size: 42px; font-weight: 900; color: rgb(228, 35, 58); line-height: 1; margin-bottom: 15px; display: flex; align-items: baseline; letter-spacing: -1px;}
.card-v2 .data-hero span{font-size: 16px; font-weight: 600; color: rgb(82, 82, 91); margin-left: 6px; text-transform: lowercase;}
.card-v2 .sub-info{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed rgb(229, 231, 235);}
.card-v2 .price-tag{font-size: 20px; font-weight: 800; color: rgb(24, 24, 27);}
.card-v2 .total-data{font-size: 12px; font-weight: 700; color: rgb(5, 150, 105); background: rgb(236, 253, 245); padding: 4px 8px; border-radius: 6px; border: 1px solid rgb(209, 250, 229);}
.card-v2 .benefit-list{list-style: none; padding: 0px; margin: 0px 0px 20px; flex-grow: 1;}
.card-v2 .benefit-list li{font-size: 14px; color: rgb(75, 85, 99); margin-bottom: 8px; display: flex; align-items: flex-start; line-height: 1.4;}
.card-v2 .benefit-list li svg{width: 16px; height: 16px; margin-right: 8px; fill: rgb(22, 163, 74); flex-shrink: 0; margin-top: 2px;}
.card-v2 .action-area{margin-top: auto;}
.btn-reg-v2{display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, rgb(239, 68, 68) 0%, rgb(185, 28, 28) 100%); font-weight: 700; font-size: 16px; padding: 9px; border-radius: 8px; text-decoration: none; box-shadow: rgba(220, 38, 38, 0.4) 0px 4px 6px -1px; transition: 0.2s; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(255, 255, 255) !important;}
.btn-reg-v2:hover{transform: translateY(-2px); box-shadow: rgba(220, 38, 38, 0.5) 0px 10px 15px -3px; background: linear-gradient(135deg, rgb(248, 113, 113) 0%, rgb(220, 38, 38) 100%);}
.link-detail{text-align: center; font-size: 13px; color: rgb(107, 114, 128); font-weight: 500; text-decoration: none; display: block; margin-top: 12px; transition: color 0.2s;}
.link-detail:hover{color: rgb(228, 35, 58); text-decoration: underline;}
.card-v2 .benefit-list,.card-v2 .benefit-list li{list-style: none !important; padding-left: 0px !important; margin-left: 0px !important;}
.card-v2 .benefit-list li::before{content: none !important; display: none !important;}
.card-v2 .benefit-list li svg{min-width: 16px; margin-right: 8px; transform: translateY(2px);}
.section-title{text-align: center; text-transform: uppercase; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px !important; font-weight: 900 !important; color: rgb(185, 28, 28) !important; margin-bottom: 30px !important;}
@media (max-width: 768px){
.list-goi-pro{padding-left: 15px; padding-right: 15px; gap: 20px;}
.section-title{font-size: 18px !important;}
}
.seo-intro-box{background: rgb(255, 255, 255); padding: 15px; margin-bottom: 20px; border-bottom: 1px solid rgb(238, 238, 238);}
.seo-features{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin-top: 10px;}
.seo-item{display: flex; align-items: start; gap: 10px;}
.seo-item svg{width: 24px; height: 24px; fill: rgb(217, 35, 21); flex-shrink: 0; margin-top: 2px;}
.seo-item div{font-size: 13px; color: rgb(85, 85, 85); line-height: 1.4;}
.seo-item strong{color: rgb(51, 51, 51); display: block; margin-bottom: 2px; font-size: 16px;}
h1.main-title{font-size: 20px; font-weight: 800; color: rgb(185, 28, 28); text-align: center; margin: 0px 0px 10px; text-transform: uppercase;}
.seo-intro-box{background: rgb(255, 255, 255); padding: 20px 10px; margin-bottom: 30px; border-bottom: 1px solid rgb(240, 240, 240);}
.seo-features{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 15px;}
.seo-item{display: flex; align-items: flex-start; gap: 12px;}
.seo-item svg{width: 26px; height: 26px; fill: rgb(217, 35, 21); flex-shrink: 0; margin-top: 3px;}
.seo-item div{font-size: 15px; color: rgb(85, 85, 85); line-height: 1.6;}
.seo-item strong{color: rgb(17, 17, 17); display: block; margin-bottom: 3px; font-size: 15px; font-weight: 700;}
.section-title{border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important;}
@media (max-width: 768px){
.vd-compare-box{display: block; width: 100%; overflow-x: auto; position: relative; border: 1px solid rgb(238, 238, 238); border-radius: 8px; background: rgb(255, 255, 255); margin-bottom: 20px;}
.vd-table{width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0px;}
.vd-table th,.vd-table td{white-space: normal; padding: 10px; font-size: 13px; border-bottom: 1px solid rgb(238, 238, 238); border-right: 1px solid rgb(238, 238, 238); vertical-align: middle;}
.vd-table th:first-child,.vd-table td:first-child{position: sticky; left: 0px; z-index: 2; background-color: rgb(255, 255, 255); border-right: 2px solid rgb(221, 221, 221); color: rgb(238, 0, 51);}
.vd-table th:first-child{background-color: rgb(248, 249, 250); z-index: 3; color: rgb(51, 51, 51);}
}
.seo-faq-section{padding: 40px 0px 60px; background-color: rgb(255, 255, 255); border-top: 1px dashed rgb(238, 238, 238);}
.faq-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px;}
.faq-item{background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: 0.3s;}
.faq-item:hover{border-color: rgb(217, 35, 21); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 10px;}
.faq-item summary{background: rgb(248, 250, 252); padding: 15px; font-weight: 600; font-size: 15px; color: rgb(51, 51, 51); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.faq-item summary::after{content: "+"; font-size: 24px; font-weight: 400; color: rgb(217, 35, 21); flex-shrink: 0; position: static; transform: none; right: auto; top: auto;}
.faq-item[open] summary{background: rgb(255, 245, 245); color: rgb(185, 28, 28); border-bottom: 1px solid rgb(255, 228, 230);}
.faq-item[open] summary::after{content: "−"; font-size: 24px; line-height: 1;}
.faq-item summary::-webkit-details-marker{display: none;}
.faq-content{padding: 15px 20px; font-size: 14px; line-height: 1.6; color: rgb(85, 85, 85); background: rgb(255, 255, 255);}
@media (max-width: 768px){
.faq-grid{grid-template-columns: 1fr;}
}
.consult-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;}
.consult-grid h3{margin-top: 0px;}
.consult-card{border: 1px solid rgb(238, 238, 238); border-radius: 12px; background: rgb(255, 255, 255); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s;}
.consult-card:hover{transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 20px; border-color: rgb(252, 165, 165);}
.consult-header{background: rgb(255, 245, 245); padding: 15px 20px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid rgb(255, 236, 236);}
.c-icon svg{width: 36px; height: 36px; flex-shrink: 0;}
.c-title h3{margin: 0px; font-size: 16px; color: rgb(185, 28, 28); font-weight: 700;}
.c-title span{font-size: 13px; color: rgb(102, 102, 102); display: block; margin-top: 3px;}
.consult-body{padding: 20px;}
.c-reason{font-size: 14px; color: rgb(85, 85, 85); line-height: 1.5;}
@media (max-width: 768px){
.consult-grid{grid-template-columns: 1fr; gap: 15px; padding: 0px 10px;}
.consult-card{box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px;}
}
.faq-item{margin-bottom: 10px; border: 1px solid rgb(238, 238, 238); border-radius: 8px; overflow: hidden;}
.faq-item summary{background: rgb(248, 250, 252); padding: 15px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;}
.faq-item summary::after{content: "+"; font-size: 20px; font-weight: bold; color: rgb(217, 35, 21);}
.faq-item[open] summary::after{content: "-";}
.faq-content{padding: 15px; border-top: 1px solid rgb(238, 238, 238); font-size: 14px; line-height: 1.6; color: rgb(68, 68, 68); background: rgb(255, 255, 255);}
@media (max-width: 768px){
.list-goi-pro{padding: 0px; margin-top: 8px; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;}
.card-v2{min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 6px 8px !important;}
.badge-top{letter-spacing: 0.5px; font-size: 9px !important; padding: 2px 6px !important; top: -8px !important; right: 8px !important; border-radius: 4px !important; line-height: 1.2 !important;}
.pack-name{font-size: 12px !important; margin-bottom: 2px !important; margin-top: 5px !important;}
.data-hero{font-size: 18px !important;}
.data-hero span{font-size: 11px !important;}
.price-tag{font-size: 13px !important;}
.total-data{font-size: 9px !important; padding: 2px 4px !important;}
.action-area .btn-reg-v2{width: 100% !important; padding: 6px 0px !important; font-size: 11px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; white-space: nowrap !important;}
.action-area .btn-reg-v2 svg{width: 10px !important; height: 10px !important;}
.link-detail{display: block !important; text-align: center !important; font-size: 11px !important; color: rgb(102, 102, 102) !important; margin-top: 6px !important; text-decoration: none !important;}
.link-detail::after{content: " ›"; font-size: 14px; line-height: 1;}
}
.card-v2{transition: transform 0.2s, box-shadow 0.2s; position: relative !important;}
.card-v2:hover{transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; border-color: rgb(217, 35, 21);}
.link-detail::after{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; cursor: pointer;}
.action-area .btn-reg-v2{pointer-events: auto; position: relative !important; z-index: 2 !important;}
.benefit-list{margin: 10px 0px; padding: 0px; list-style: none; flex-grow: 1;}
.benefit-list li{font-size: 12px; color: rgb(85, 85, 85); margin-bottom: 4px; display: flex; align-items: center; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
.benefit-list li svg{width: 14px; height: 14px; margin-right: 4px; flex-shrink: 0; fill: rgb(217, 35, 21);}
@media (max-width: 768px){
.benefit-list li{font-size: 11px !important;}
}
.seo-intro-box{max-width: 1200px; margin: 0px auto; padding: 0px; text-align: center;}
h1.main-title{font-size: 24px; font-weight: 800; color: rgb(185, 28, 28); text-transform: uppercase; line-height: 1.3; margin: 0px 0px 20px;}
.seo-features{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-bottom: 20px;}
.seo-item{display: flex; align-items: flex-start; gap: 10px; text-align: left; background: rgb(248, 250, 252); padding: 10px; border-radius: 8px; border: 1px solid rgb(238, 238, 238);}
.seo-item svg{width: 24px; height: 24px; fill: rgb(217, 35, 21); flex-shrink: 0; margin-top: 2px;}
.seo-item div{font-size: 13px; color: rgb(85, 85, 85); line-height: 1.4;}
.seo-item strong{color: rgb(51, 51, 51); font-size: 14px; display: block; margin-bottom: 2px;}
@media (max-width: 768px){
.seo-features{scrollbar-width: none; display: flex !important; overflow-x: auto !important; gap: 12px !important; padding-bottom: 10px !important; margin-bottom: 10px !important; justify-content: flex-start !important;}
.seo-features::-webkit-scrollbar{display: none;}
.seo-item{background: rgb(248, 249, 250); border: 1px solid rgb(238, 238, 238); border-radius: 8px; min-width: 260px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; padding: 10px !important; font-size: 12px !important;}
.seo-item svg{width: 24px !important; height: 24px !important; margin-right: 10px !important; margin-top: 0px !important;}
.main-title{font-size: 18px !important; margin-bottom: 10px !important;}
}
.seo-features{display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 15px !important; margin-bottom: 25px !important;}
.seo-item{background: rgb(255, 255, 255) !important; border: 1px solid rgb(229, 231, 235) !important; border-radius: 12px !important; padding: 15px 20px !important; display: flex !important; align-items: center !important; gap: 15px !important; box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 6px -2px !important; transition: transform 0.2s !important;}
.seo-item:hover{border-color: rgb(217, 35, 21) !important; transform: translateY(-2px) !important; box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 15px -3px !important;}
.seo-item svg{flex-shrink: 0 !important; width: 38px !important; height: 38px !important; background: rgb(255, 245, 245) !important; padding: 8px !important; border-radius: 50% !important;}
.seo-item div{display: flex !important; flex-direction: column !important;}
.seo-item strong{font-size: 15px !important; color: rgb(17, 17, 17) !important; font-weight: 700 !important; margin-bottom: 2px !important; text-transform: uppercase !important;}
.seo-item span{font-size: 13px !important; color: rgb(102, 102, 102) !important; line-height: 1.4 !important;}
@media (max-width: 768px){
.seo-features{display: flex !important; overflow-x: auto !important; padding-bottom: 10px !important; gap: 10px !important;}
.seo-item{min-width: 260px !important;}
}
@media (max-width: 768px){
.list-goi-pro{display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; padding: 0px !important; margin-top: 15px !important;}
.card-v2{padding: 20px 15px !important; min-height: auto !important;}
.data-hero{font-size: 28px !important;}
.data-hero span{font-size: 14px !important;}
.pack-name{font-size: 14px !important; margin-top: 0px !important; margin-bottom: 5px !important;}
.price-tag{font-size: 20px !important;}
.action-area .btn-reg-v2{padding: 10px 0px !important; font-size: 15px !important; width: 100% !important;}
.benefit-list li{font-size: 14px !important;}
}
@media (max-width: 768px){
.seo-features{display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 15px !important; padding-bottom: 10px !important; margin-bottom: 20px !important; padding-right: 20px !important; justify-content: flex-start !important;}
.seo-item{min-width: 75vw !important; max-width: 75vw !important; flex-shrink: 0 !important; background: rgb(255, 255, 255) !important; border: 1px solid rgb(240, 240, 240) !important; border-radius: 8px !important; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px !important; display: flex !important; flex-direction: row !important; align-items: center !important; padding: 12px 15px !important; margin: 0px !important;}
.seo-features::-webkit-scrollbar{height: 3px !important; display: block !important;}
.seo-features::-webkit-scrollbar-track{border-radius: 3px; margin: 0px 10px; background: rgb(238, 238, 238) !important;}
.seo-features::-webkit-scrollbar-thumb{border-radius: 3px; background: rgb(217, 35, 21) !important;}
}
@media (min-width: 992px){
.list-goi-pro{display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important;}
.card-v2{height: 100% !important;}
}
.vt-section img,.consult-body img{display: block; max-width: 100% !important; height: auto !important; margin: 20px auto !important;}
.vt-section[style*="fffbeb"]{border-top: 4px solid rgb(245, 158, 11);}
.faq-item{margin-bottom: 0px !important; border-radius: 8px !important; border: 1px solid rgb(238, 238, 238) !important;}
.faq-item summary{padding: 15px 20px !important;}
.benefit-list img,.consult-body img{margin: 0px 10px 0px 0px !important; display: inline-block !important; vertical-align: middle !important;}
.card-v2,.consult-card,.seo-item{cursor: default; transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;}
.card-v2:hover,.consult-card:hover,.seo-item:hover{transform: translateY(-8px) !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px !important; border-color: rgb(252, 165, 165) !important;}
.btn-reg-v2:hover{transform: scale(1.05) translateY(-2px) !important; box-shadow: rgba(217, 35, 21, 0.3) 0px 10px 20px !important;}
.vt-hero-img2{display: flex; justify-content: center; align-items: center; width: 100%; margin: 25px 0px;}
.vt-hero-img2 img{max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--vt-shadow); transition: transform 0.3s;}
.vt-hero-img2 img:hover{transform: scale(1.02); box-shadow: var(--vt-shadow-hover);}
.install-section{background-color: var(--vt-bg-gray); padding: 50px 0px;}
.install-desc{text-align: center; color: var(--vt-text-gray); margin-bottom: 30px;}
.install-desc strong{color: var(--vt-red);}
.install-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 35px;}
.install-step{background: var(--vt-white); padding: 25px 20px; border-radius: 12px; box-shadow: var(--vt-shadow); border-right: 1px solid rgb(254, 226, 226); border-bottom: 1px solid rgb(254, 226, 226); border-left: 1px solid rgb(254, 226, 226); border-image: none; border-top: 4px solid var(--vt-red-border); transition: 0.3s;}
.install-step:hover{transform: translateY(-5px); box-shadow: var(--vt-shadow-hover); border-top-color: var(--vt-red);}
.install-step h3{display: flex; align-items: center; margin: 0px 0px 15px; font-size: 15px; color: var(--vt-text-main); gap: 15px;}
.step-num{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgb(200, 0, 40); color: rgb(255, 255, 255); border-radius: 50%; font-size: 16px; font-weight: 900; flex-shrink: 0; box-shadow: rgba(185, 28, 28, 0.25) 0px 4px 10px;}
.install-step p{margin: 0px; font-size: var(--font-min); color: rgb(85, 85, 85); line-height: 1.6;}
.province-note{display: flex; align-items: center; background: var(--vt-white); padding: 25px 30px; border-radius: 12px; border: 2px dashed var(--vt-red-border); box-shadow: rgba(185, 28, 28, 0.02) 0px 0px 20px inset; gap: 25px; transition: 0.3s;}
.province-note:hover{border-color: var(--vt-red); background: var(--vt-red-light);}
.province-icon{font-size: 35px; color: var(--vt-red); flex-shrink: 0; animation: 2s ease-in-out 0s infinite normal none running bounce-small;}
.province-text{color: var(--vt-text-main);}
.province-text strong{font-size: 14px; color: var(--vt-red); display: block; margin-bottom: 5px;}
@media (max-width: 768px){
.province-note{flex-direction: column; text-align: center; padding: 20px; gap: 15px;}
.province-icon{font-size: 30px;}
}
.choice-section{background-color: var(--vt-white); padding: 50px 0px;}
.choice-desc{text-align: center; color: var(--vt-text-gray); margin-top: 20px; margin-bottom: 40px;}
.choice-card{display: flex; align-items: flex-start; background: var(--vt-white); padding: 25px; border-radius: 16px; box-shadow: var(--vt-shadow); border: 1px solid rgb(254, 226, 226); transition: 0.3s; position: relative; overflow: hidden;}
.choice-card:hover{transform: translateY(-6px); box-shadow: var(--vt-shadow-hover);}
.choice-card::before{content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 5px; transition: width 0.3s;}
.choice-card:hover::before{width: 10px;}
.choice-icon{width: 65px; height: 65px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-right: 20px; flex-shrink: 0;}
.choice-content{flex: 1 1 0%;}
.choice-content h3{margin: 0px 0px 10px; font-size: 17px; color: var(--vt-text-main); font-weight: 700;}
.choice-content p{margin: 0px; font-size: 15px; color: rgb(85, 85, 85); line-height: 1.6;}
.choice-content a{text-decoration: none; font-weight: 800; transition: color 0.3s;}
.choice-content a:hover{text-decoration: underline;}
.accent-red::before{background-color: var(--vt-red);}
.accent-red .choice-icon{background: var(--vt-red-light); color: var(--vt-red); border: 1px solid rgb(254, 202, 202);}
.accent-red .choice-content a{color: var(--vt-red);}
.accent-green::before{background-color: rgb(22, 163, 74);}
.accent-green .choice-icon{background: rgb(220, 252, 231); color: rgb(22, 163, 74); border: 1px solid rgb(187, 247, 208);}
.accent-green .choice-content a{color: rgb(22, 163, 74);}
.accent-orange::before{background-color: rgb(234, 88, 12);}
.accent-orange .choice-icon{background: rgb(255, 237, 213); color: rgb(234, 88, 12); border: 1px solid rgb(254, 215, 170);}
.accent-orange .choice-content a{color: rgb(234, 88, 12);}
.accent-blue::before{background-color: rgb(79, 70, 229);}
.accent-blue .choice-icon{background: rgb(224, 231, 255); color: rgb(79, 70, 229); border: 1px solid rgb(199, 210, 254);}
.accent-blue .choice-content a{color: rgb(79, 70, 229);}
@media (max-width: 480px){
.choice-card{padding: 20px 15px;}
.choice-icon{width: 50px; height: 50px; font-size: 18px; margin-right: 15px;}
}
.choice-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.choice-icon i{display: block; line-height: 1;}
@media (max-width: 768px){
.choice-grid{grid-template-columns: 1fr; gap: 20px;}
}
@media (max-width: 480px){
.choice-card{padding: 20px 15px;}
.choice-icon{width: 50px; height: 50px; font-size: 18px; margin-right: 15px;}
}
.concept-body{display: flex; flex-direction: column; gap: 30px;}
.concept-text p{color: var(--vt-text-main); margin: 0px 0px 15px; text-align: justify;}
.concept-text strong{color: var(--vt-red); font-weight: 700;}
.concept-alert-box{display: flex; align-items: flex-start; background: rgb(139, 0, 0); padding: 25px 30px; border-radius: 12px; box-shadow: rgba(185, 28, 28, 0.25) 0px 8px 25px; color: rgb(255, 255, 255); position: relative; overflow: hidden; transition: transform 0.3s;}
.concept-alert-box:hover{transform: translateY(-3px);}
.alert-icon{font-size: 35px; color: rgb(255, 204, 204); margin-right: 25px; flex-shrink: 0; animation: 2s ease-in-out 0s infinite normal none running pulse-alert;}
.alert-content{flex: 1 1 0%;}
.alert-title{font-size: 16px; font-weight: 800; margin: 0px 0px 10px; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(255, 255, 255);}
.alert-desc{line-height: 1.6; margin: 0px; color: rgb(255, 255, 255); opacity: 0.95;}
.alert-desc strong{font-weight: 800; background: rgba(255, 255, 255, 0.15); padding: 2px 6px; border-radius: 4px; color: rgb(255, 228, 230) !important;}
@media (max-width: 768px){
.section-title{font-size: 18px;}
.concept-alert-box{flex-direction: column; padding: 20px;}
.alert-icon{margin-right: 0px; margin-bottom: 15px; font-size: 30px;}
}
.seo-intro-box{padding-bottom: 25px; margin-top: 15px;}
.main-title{color: var(--vt-red, #b91c1c); font-size: 26px; text-align: center; font-weight: 900; margin-bottom: 20px; text-transform: uppercase; line-height: 1.4; text-shadow: rgba(0, 0, 0, 0.05) 1px 1px 2px;}
.seo-authority-intro{line-height: 1.7; text-align: justify; background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 245, 245) 100%); padding: 22px 25px; border-radius: 12px; box-shadow: rgba(185, 28, 28, 0.05) 0px 4px 15px; margin-bottom: 35px; color: var(--vt-text-main, #333); border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(254, 226, 226); border-image: none;}
.seo-authority-intro strong{color: var(--vt-red, #b91c1c);}
.seo-features{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 25px;}
.seo-item{display: flex; align-items: center; background: var(--vt-white, #fff); padding: 20px; border-radius: 12px; box-shadow: rgba(185, 28, 28, 0.06) 0px 4px 15px; border: 1px solid rgb(254, 226, 226); transition: 0.3s; position: relative; overflow: hidden;}
.seo-item:hover{transform: translateY(-5px); box-shadow: rgba(185, 28, 28, 0.12) 0px 10px 25px; border-color: rgb(252, 165, 165);}
.seo-icon{font-size: 22px; color: var(--vt-red, #b91c1c); background: rgb(255, 245, 245); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 18px; flex-shrink: 0; border: 2px solid rgb(255, 228, 230); transition: 0.4s;}
.seo-item:hover .seo-icon{background: var(--vt-red, #b91c1c); color: rgb(255, 255, 255); transform: rotateY(180deg); border-color: var(--vt-red, #b91c1c);}
.seo-content{display: flex; flex-direction: column;}
.seo-content strong{font-size: 15px; color: var(--vt-text-main, #333); margin-bottom: 5px; font-weight: 800;}
.seo-content span{font-size: 12.5px; color: var(--vt-text-gray, #666); line-height: 1.4;}
@media (max-width: 768px){
.seo-features{grid-template-columns: 1fr;}
.main-title{font-size: 22px;}
.seo-authority-intro{padding: 18px;}
}
.vt-crosslink-section{background-color: rgb(249, 250, 251); padding: 50px 0px; border-top: 1px solid rgb(234, 234, 234);}
.vt-crosslink-heading{font-size: 20px; color: var(--vt-text-main, #333); margin-bottom: 30px; padding-left: 15px; border-left: 5px solid var(--vt-red, #b91c1c); font-weight: 800; text-transform: uppercase;}
.vt-crosslink-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px;}
.vt-crosslink-card{display: block; background: rgb(255, 255, 255); padding: 22px 25px; border-radius: 12px; text-decoration: none; border: 1px solid rgb(234, 234, 234); box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 10px; transition: 0.3s; position: relative; overflow: hidden;}
.vt-crosslink-card::before{content: ""; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 4px; background: var(--vt-red, #b91c1c); transform: scaleY(0); transition: transform 0.3s; transform-origin: center bottom;}
.vt-crosslink-card:hover{border-color: rgb(252, 165, 165); box-shadow: rgba(185, 28, 28, 0.08) 0px 8px 25px; transform: translateY(-3px);}
.vt-crosslink-card:hover::before{transform: scaleY(1);}
.cl-title{color: var(--vt-red, #b91c1c); font-size: 14.5px; font-weight: 700; margin: 0px 0px 8px; display: flex; align-items: center;}
.cl-title i{font-size: 14px; margin-right: 12px; color: var(--vt-red-border, #fca5a5); transition: transform 0.3s, color 0.3s;}
.vt-crosslink-card:hover .cl-title i{transform: translateX(6px); color: var(--vt-red, #b91c1c);}
.cl-desc{color: rgb(85, 85, 85); font-size: 12.5px; margin: 0px; line-height: 1.5; padding-left: 32px;}
@media (max-width: 480px){
.vt-crosslink-card{padding: 18px 20px;}
.cl-title{font-size: 13.5px;}
.cl-desc{font-size: 12px;}
}
.vt-final-cta{padding: 60px 0px; background-color: var(--vt-white, #ffffff);}
.cta-banner-wrapper{background: linear-gradient(135deg, var(--vt-red, #b91c1c) 0%, #8b0000 100%); border-radius: 20px; padding: 50px 30px; text-align: center; box-shadow: rgba(185, 28, 28, 0.25) 0px 15px 35px; color: rgb(255, 255, 255); position: relative; overflow: hidden;}
.cta-banner-wrapper::before{content: ""; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;}
.cta-banner-wrapper::after{content: ""; position: absolute; bottom: -40px; left: -40px; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;}
.cta-content{position: relative; z-index: 2;}
.cta-heading{font-size: 26px; margin: 0px 0px 15px; font-weight: 800; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; color: rgb(255, 255, 255) !important;}
.cta-subtext{font-size: 15px; color: rgba(255, 255, 255, 0.9); margin-bottom: 35px;}
.cta-subtext strong{color: rgb(255, 255, 255); font-weight: 800; background: rgba(0, 0, 0, 0.15); padding: 4px 10px; border-radius: 6px;}
.cta-action{margin-bottom: 30px;}
.cta-hotline-btn{display: inline-flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); color: var(--vt-red, #b91c1c); padding: 18px 45px; border-radius: 50px; font-size: 22px; font-weight: 900; text-decoration: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 25px; transition: 0.3s; animation: 2s ease 0s infinite normal none running pulse-white;}
.cta-hotline-btn i{margin-right: 15px; font-size: 24px;}
.cta-hotline-btn:hover{transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 30px; background: rgb(255, 245, 245); color: rgb(153, 27, 27);}
.cta-commit{font-size: 13.5px; color: rgba(255, 255, 255, 0.9);}
.cta-commit i{color: rgb(74, 222, 128); margin-right: 5px;}
.cta-commit .divider{margin: 0px 12px; color: rgba(255, 255, 255, 0.4);}
@media (max-width: 768px){
.cta-banner-wrapper{padding: 40px 20px;}
.cta-heading{font-size: 20px; line-height: 1.4;}
.cta-hotline-btn{font-size: 18px; width: 100%; padding: 15px 20px;}
.cta-commit{display: flex; flex-direction: column; gap: 12px;}
.cta-commit .divider{display: none;}
}
.price-wrap{width: 100%; margin: 0px auto 10px; padding: 0px;}
.price-title{background: linear-gradient(rgb(200, 16, 46) 0%, rgb(155, 11, 34) 100%); color: rgb(255, 255, 255); text-align: center; font-weight: bold; font-size: clamp(13px, 3.6vw, 16px); padding: 12px 4px; border-radius: 8px 8px 0px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); text-shadow: rgba(0, 0, 0, 0.15) 0px 1px 1px;}
table.price-table{border-radius: 0px 0px 8px 8px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px; width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; background: rgb(255, 255, 255) !important; margin: 0px !important;}
.price-table tr{background: transparent !important;}
.price-table img{display: inline-block !important; margin: 0px !important;}
table.price-table th,table.price-table td{border-width: medium medium 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(241, 212, 212); border-image: none; text-align: center; vertical-align: middle; font-size: clamp(11px, 3vw, 13px); line-height: 1.3; word-break: keep-all; overflow-wrap: normal; hyphens: none; padding: 10px 4px !important;}
table.price-table td + td,table.price-table th + th{border-left: 1px solid rgb(247, 227, 227);}
table.price-table tbody tr:nth-child(2n+1) td{background: rgb(255, 255, 255);}
table.price-table tbody tr:nth-child(2n) td{background: rgb(253, 242, 242);}
table.price-table tbody tr:last-child td{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;}
.benefit{color: rgb(17, 17, 17); text-align: center; word-break: normal; overflow-wrap: break-word;}
.benefit strong{color: rgb(200, 16, 46); font-weight: bold; font-size: clamp(11.5px, 3vw, 13px);}
.benefit .text-muted{display: block; color: rgb(102, 102, 102); font-style: italic; font-weight: normal; font-size: clamp(10px, 2.5vw, 11.5px); margin-top: 3px; line-height: 1.25;}
.price-table td:last-child{text-align: center !important; vertical-align: middle !important; padding: 6px 3px !important;}
@media (max-width: 360px){
.price-wrap{padding: 0px;}
table.price-table th,table.price-table td{padding: 6px 2px;}
}
/* template.css */
.luu-y2{height: 100%; margin-top: 10px; margin-bottom: 15px; text-align: justify; padding: 10px; width: auto; background: rgb(255, 247, 245); border-left: 2px solid rgb(236, 78, 79);}
.luu-y2 img{margin-bottom: 10px;}
@keyframes bounce-small {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes pulse-alert {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.1); opacity: 1; text-shadow: rgba(255, 255, 255, 0.5) 0px 0px 15px; }
}
@keyframes pulse-white {
0% { box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 0px; }
70% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 25px; }
100% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; }
}