/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@import "./css/libs.css";
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.9.0/fonts/remixicon.css');
/* tokens */
:root{
--gold: #d4af37;
--dark-navy: #121b49;
}
/* core token elements */
/* element img-shadow */
.img.img-shadow {
padding: 30px;
}
.img.img-shadow .img-inner {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 3px;
box-shadow: 24px 24px 0 var(--primary-color);
display: block;';
}
/* abadge */
.abadge {
position: absolute;
bottom: 0;
right: 0;
background: var(--dark-navy);
color: #fff;
padding: 20px 24px;
border-radius: 3px;
text-align: center;
}
.abadge strong {
font-family: var(--fh);
font-size: 38px;
font-weight: 800;
color: var(--gold);
display: block;
line-height: 1;
}
@media (max-width: 768px) {
.abadge {
position: static;
display: inline-block;
margin-top: 16px;
border-radius: 3px;
}
}
.row.row-bg-gray {
background-color: #edf0f4;
background: linear-gradient(180deg, #f8fafc, #eef2f7);
border-radius: 16px;
padding: 36px 0;
}
/* cause-list */
.cause-list {
display: flex;
flex-direction: column;
gap: 20px
}
.cause-item {
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgb(4 36 154 / .07);
border-left: 4px solid var(--navy)
}
.cause-item:nth-child(1) {
border-color: var(--red)
}
.cause-item:nth-child(2) {
border-color: var(--navy)
}
.cause-item:nth-child(3) {
border-color: var(--gold)
}
.cause-item:nth-child(4) {
border-color: #10b981
}
.cause-item:nth-child(5) {
border-color: #8b5cf6
}
.cause-num {
font-size: .7rem;
font-weight: 900;
color: var(--red);
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 6px
}
.cause-item h3 {
font-size: 1rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 8px
}
.cause-item p {
font-size: .85rem;
color: var(--slate);
line-height: 1.7
}
/* table */
.method-table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgb(4 36 154 / .1)
}
.method-table thead tr {
background: var(--navy);
color: #fff
}
.method-table th {
padding: 16px 20px;
text-align: left;
font-size: .682rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase
}
.method-table td {
padding: 14px 20px;
font-size: .875rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
line-height: 1.6
}
.method-table tbody tr:nth-child(even) {
background: #f8fafc
}
.method-table .highlight-col {
background: #fff5f5;
font-weight: 700;
color: var(--navy)
}
.method-table thead th:nth-child(2) {
background: #04249a
}
.method-table thead th:nth-child(3) {
background: #04249a
}
.method-table thead th:nth-child(4) {
background: #04249a
}
/* homepage */
.hs-home-wrap *,.hs-home-wrap *::before,.hs-home-wrap *::after{box-sizing:border-box;margin:0;padding:0}:root{--navy:#04122b;--blue:#04249a;--red:#849b25;--gold:#d4af37;--cream:#faf8f4;--slate:#475569;--light:#fff;--white:#fff;--fh:'Be Vietnam Pro',sans-serif;--fb:'Be Vietnam Pro',sans-serif}.hs-home-wrap{font-family:var(--fb);color:var(--navy)}img{max-width:100%;display:inline-block;height:auto}a{text-decoration:none;color:inherit}.wrap{max-width:1200px;margin:0 auto;padding:0 0px}.lbl{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--red);margin-bottom:12px;display:block}.ttl{font-family:var(--fh);font-size:clamp(32px,4.5vw,52px);font-weight:800;line-height:1.4;color:var(--navy);text-transform:uppercase;margin-bottom:20px}.ttl span{color:var(--red)}/* ===== HERO — desktop cap 70vh, mobile auto ===== */#h1{position:relative;height:70vh;min-height:480px;max-height:700px;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(135deg,#04122b 0%,#04249a 50%,#04122b 100%)}#h1 .hin{position:relative;z-index:2;padding:60px 40px;max-width:1200px;margin:0 auto;width:100%}#h1 .htag{display:inline-flex;align-items:center;gap:8px;background:rgba(132,155,37,.15);border:1px solid rgba(132,155,37,.4);color:#b7cf6b;padding:5px 16px;border-radius:3px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px}#h1 h1{font-family:var(--fh);font-size:clamp(44px,7vw,80px);font-weight:800;line-height:1.15;text-transform:uppercase;color:var(--white);margin-bottom:20px}#h1 h1 em{display:block;color:var(--red);font-style:normal}#h1 .hsub{font-size:16px;color:rgba(255,255,255,.65);max-width:480px;line-height:1.7;margin-bottom:32px}#h1 .hctas{display:flex;flex-wrap:wrap;gap:12px}.bp{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:15px 32px;border-radius:3px}.bg2{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:15px 32px;border-radius:3px}/* Stats: desktop only, absolute positioned */#h1 .hstats{position:absolute;right:40px;bottom:60px;z-index:2;display:flex;flex-direction:column;gap:16px}#h1 .sn{font-family:var(--fh);font-size:44px;font-weight:800;color:var(--white);line-height:1;display:block}#h1 .sn sup{font-size:20px;color:var(--red)}#h1 .sl{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);text-align:right}/* ===== TRUST BAR ===== */#tb{background:var(--navy);padding:16px 0;overflow:hidden}#tb .tt{display:flex;gap:50px;width:max-content;animation:tscroll 30s linear infinite}@keyframes tscroll{to{transform:translateX(-50%)}}#tb .ti{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45)}#tb .ti b{color:var(--red)}/* ===== ABOUT ===== */#ab .ag{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}#ab .am{position:relative;padding-bottom:30px;padding-right:30px}#ab .ai{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;box-shadow:24px 24px 0 var(--red);display:block}#ab .abadge{position:absolute;bottom:0;right:0;background:var(--navy);color:#fff;padding:20px 24px;border-radius:3px;text-align:center}#ab .abadge strong{font-family:var(--fh);font-size:38px;font-weight:800;color:var(--gold);display:block;line-height:1}#ab .abadge span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55)}#ab p.ad{font-size:15px;color:var(--slate);line-height:1.8;margin-bottom:14px;text-align:justify}#ab .ahi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}#ab .ahb{background:var(--white);border:1px solid var(--light);border-top:3px solid var(--red);padding:16px;border-radius:3px}#ab .ahb strong{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--blue);display:block}#ab .ahb span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--slate)}/* ===== SERVICES — full inline on HTML, CSS only for hover ===== */#sv{padding:90px 0;background:var(--white)}#sv .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px;flex-wrap:wrap;gap:16px}/* hover effects only — layout via inline table */.svc-a{transition:box-shadow .25s,transform .2s}.svc-a:hover{box-shadow:0 12px 32px rgba(10,22,40,.1);transform:translateY(-3px)}.svc-a:hover img{transform:scale(1.06)}.svc-a img{transition:transform .4s ease}/* ===== PROCESS ===== */#pr{overflow:hidden}#pr .ttl{color:#fff}#pr .lbl{color:var(--gold)}#pr .ps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:60px;position:relative}#pr .ps::before{content:'';position:absolute;top:38px;left:calc(10% + 20px);right:calc(10% + 20px);height:1px;background:rgba(255,255,255,.12)}.si2{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}.snum{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;position:relative;z-index:1}.stt{font-family:var(--fh);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--white);margin-bottom:8px}.sdc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.6}/* ===== REVIEWS ===== */#rv{padding:0px 0;background:var(--white)}#rv .rg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.rc{background:var(--cream);border:1px solid var(--light);border-radius:3px;padding:30px;position:relative;overflow:hidden}.rc::before{content:'\201C';position:absolute;top:-10px;right:14px;font-size:120px;color:rgba(132,155,37,.06);line-height:1;pointer-events:none;font-family:Georgia,serif}.rstar{color:var(--gold);font-size:17px;letter-spacing:2px;margin-bottom:16px;display:block}.rtxt{font-size:14px;color:#334155;line-height:1.8;margin-bottom:20px;font-style:italic}.rau{display:flex;align-items:center;gap:12px}.rav{width:40px;height:40px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:17px;font-weight:800;color:#fff;flex-shrink:0}.ran{font-weight:700;font-size:14px;color:var(--navy)}.ral{font-size:12px;color:var(--red);letter-spacing:1px;text-transform:uppercase;font-weight:600}/* ===== SEO + FAQ ===== */#sc{padding:100px 0;background:var(--cream)}#sc .si3{display:grid;grid-template-columns:2fr 1fr;gap:70px;align-items:start}#sc .st h2{font-family:var(--fh);font-size:32px;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:18px;line-height:1.1}#sc .st h2 span{color:var(--red)}#sc .st h3{font-family:var(--fh);font-size:19px;font-weight:800;text-transform:uppercase;color:var(--blue);margin:26px 0 10px}#sc .st p{font-size:15px;color:var(--slate);line-height:1.8;margin-bottom:12px;text-align:justify}#sc .st ul{padding-left:18px;margin-bottom:12px}#sc .st ul li{font-size:15px;color:var(--slate);line-height:1.8;margin-bottom:5px}#sc .st strong{color:var(--navy)}.fl{display:flex;flex-direction:column;gap:10px}.fi{background:var(--white);border:1px solid var(--light);border-radius:3px;overflow:hidden}.fq{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--navy);padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.5px;user-select:none;gap:10px}.fq::after{content:'+';font-size:20px;color:var(--red);font-weight:300;transition:transform .3s;flex-shrink:0}.fi.open .fq::after{transform:rotate(45deg)}.fa{font-size:14px;color:var(--slate);line-height:1.7;padding:0 20px;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}.fi.open .fa{max-height:200px;padding:0 20px 16px}/* ===== CTA ===== */#ct{padding:0 0px 0px}#ct .cb{border-radius:3px;padding:60px 0px;position:relative;overflow:visible;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}#ct .cb::before{content:'';position:absolute;right:-80px;top:-80px;width:350px;height:350px;border-radius:50%;background:rgba(132,155,37,.1)}#ct .ctxt{position:relative;z-index:2}#ct .ctxt h2{font-family:var(--fh);font-size:clamp(28px,3.5vw,46px);font-weight:800;text-transform:uppercase;color:var(--white);line-height:1.4;margin-bottom:14px}#ct .ctxt h2 span{color:var(--red)}#ct .ctxt p{font-size:14px;color:rgba(255,255,255,.95);line-height:1.7}#ct .cact{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;flex-shrink:0;min-width:260px}#ct .cphn{background:var(--red);color:#fff;font-family:var(--fh);font-size:22px;font-weight:800;padding:18px 32px;border-radius:3px;letter-spacing:1px;text-align:center;white-space:nowrap;display:block}#ct .cphn small{display:block;font-size:10px;font-weight:600;letter-spacing:3px;opacity:.7;margin-bottom:3px}#ct .czlo{border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:14px 32px;border-radius:3px;text-align:center;display:block}#ct .cadr{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:.5px;text-align:center}/* ===== FOOTER ===== */#fb{background:var(--navy);padding:20px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}#fb .fbb{font-family:var(--fh);font-size:18px;font-weight:800;color:#fff;letter-spacing:3px}#fb .fbb span{color:var(--red)}#fb p{font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.5px}/* ===== STICKY CTA — bottom-left to avoid back-to-top ===== */#stk{position:fixed;bottom:24px;left:24px;z-index:9000;display:flex;flex-direction:column;gap:10px;align-items:flex-start;opacity:0;pointer-events:none;transition:opacity .3s}#stk.show{opacity:1;pointer-events:auto}.sb{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:50px;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.22);white-space:nowrap}.sc2{background:var(--red)}.sz{background:var(--blue)}/* ===== RESPONSIVE ===== *//* Tablet 768–1024 */@media(max-width:1024px){ #ct .cb{grid-template-columns:1fr;padding:0px 0px} #ct .cact{width:100%;flex-direction:row;flex-wrap:wrap} #ct .cphn,#ct .czlo{flex:1;min-width:200px}}/* Mobile <768 — all single column */@media(max-width:768px){ .wrap{padding:0 0px} /* Hero: auto height, stats hidden, text compact */ #h1{height:auto;min-height:360px;max-height:none} #h1 .hin{padding:50px 20px 50px} #h1 .hstats{display:none} #h1 h1{font-size:clamp(38px,10vw,56px)} #h1 .hsub{font-size:15px;max-width:100%} #h1 .hctas{flex-direction:column} #h1 .hctas a{text-align:center;justify-content:center;width:100%} /* Trust bar: no animation */ #tb .tt{animation:none} /* About: single column, remove offset badge */#ab .ag{grid-template-columns:1fr;gap:50px} #ab .am{padding-bottom:0;padding-right:0} #ab .ai{box-shadow:none;border-radius:6px} #ab .abadge{position:static;display:inline-block;margin-top:16px;border-radius:3px} #ab .ahi{grid-template-columns:1fr 1fr} /* Services: 1 column via responsive override of inline table */ /* We use a style tag trick: target the table cells */ #sv{padding:60px 0} #sv .sh{flex-direction:column;align-items:flex-start} /* Override table to stack on mobile */ #sv table{width:100%!important;border-spacing:0!important} #sv table t.hs-home-wrap{display:block;width:100%} #sv table tr{display:block;width:100%} #sv table td{display:block!important;width:100%!important;padding:0 0 20px 0!important} #sv table td:last-child{padding-bottom:0!important} /* Process: 2 col then 1 */ #pr .ps{grid-template-columns:1fr 1fr;gap:30px} #pr .ps::before{display:none} /* Reviews: 1 col */ #rv{padding:0px 0} #rv .rg{grid-template-columns:1fr} /* SEO/FAQ: single column */ #sc{padding:60px 0} #sc .si3{grid-template-columns:1fr;gap:40px} /* CTA: single column, full width buttons */ #ct{padding:0 20px 60px} #ct .cb{grid-template-columns:1fr;padding:0px 0px;gap:30px} #ct .cact{width:100%;flex-direction:column;min-width:0} #ct .cphn,#ct .czlo{width:100%;text-align:center} #ct .cphn{font-size:26px;padding:20px} /* Footer */ #fb{padding:20px;justify-content:center;text-align:center} /* Sticky: smaller on mobile */ #stk{bottom:16px;left:16px;gap:8px} .sb{font-size:12px;padding:10px 14px}}/* Very small phones */@media(max-width:400px){ #pr .ps{grid-template-columns:1fr} #ab .ahi{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.hs-home-wrap *{animation:none!important;transition:none!important}}
@keyframes phone-shake-minimal{0%{transform:rotate(0)}10%{transform:rotate(-15deg)}20%{transform:rotate(15deg)}30%{transform:rotate(-15deg)}40%{transform:rotate(0)}100%{transform:rotate(0)}}.shake-icon-minimal{animation:phone-shake-minimal 2s infinite;display:inline-flex;align-items:center;justify-content:center}
@keyframes phone-shake-minimal{0%{transform:rotate(0)}10%{transform:rotate(-15deg)}20%{transform:rotate(15deg)}30%{transform:rotate(-15deg)}40%{transform:rotate(0)}100%{transform:rotate(0)}}.shake-icon-minimal{animation:phone-shake-minimal 2s infinite;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
/* services pages */
:root {
--navy: #021146;
--red: #849b25;
--gold: #d4af37;
--slate: #475569;
--radius: 24px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.hs-wrap a {
text-decoration: none;
color: inherit;
}
.hs-wrap img {
display: block;
max-width: 100%;
}
.hs-fade {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.hs-fade.on {
opacity: 1;
transform: none;
}
.hs-hero {
position: relative;
overflow: hidden;
min-height: 500px;
background: radial-gradient(
circle at top right,
rgb(132 155 37 / 0.2) 0,
transparent 55%
),
linear-gradient(135deg, #04122b 0, #04249a 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 50px 20px;
box-shadow: 0 20px 50px rgb(4 18 43 / 0.15);
}
.hs-badge {
background: rgb(132 155 37 / 0.18);
color: #b7cf6b;
padding: 7px 20px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid rgb(132 155 37 / 0.35);
margin-bottom: 20px;
display: inline-block;
}
.hs-hero h1 {
color: #fff;
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 900;
line-height: 1.4;
margin-bottom: 18px;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.hs-hero h1 em {
color: var(--gold);
font-style: normal;
}
.hs-hero p {
color: rgb(255 255 255 / 0.82);
font-size: clamp(0.9rem, 1.8vw, 1.05rem);
max-width: 700px;
margin: 0 auto 32px;
}
.hs-cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.hs-btn-main {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--red);
color: #fff;
padding: 15px 32px;
border-radius: 50px;
font-weight: 800;
font-size: 0.95rem;
transition: filter 0.2s, transform 0.15s;
box-shadow: 0 8px 20px rgb(132 155 37 / 0.3);
}
.hs-btn-main:hover {
filter: brightness(1.12);
transform: scale(1.04);
color: #fff;
}
.hs-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgb(255 255 255 / 0.1);
color: #fff;
padding: 14px 28px;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
border: 1px solid rgb(255 255 255 / 0.25);
transition: background 0.2s;
}
.hs-btn-ghost:hover {
background: rgb(255 255 255 / 0.2);
color: #fff;
}
.hs-hero-stats {
display: flex;
gap: 28px;
margin-top: 32px;
flex-wrap: wrap;
justify-content: center;
}
.hs-stat-item {
text-align: center;
}
.hs-stat-item strong {
display: block;
font-size: 1.7rem;
font-weight: 900;
color: var(--gold);
}
.hs-stat-item span {
font-size: 0.7rem;
color: rgb(255 255 255 / 0.6);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sec {
padding: 0px 0px;
}
.sec-sm {
padding: 44px 20px;
}
@media (max-width: 600px) {
.sec {
padding: 0px 0px;
}
}
.sec-tag {
display: inline-block;
background: rgb(4 36 154 / 0.08);
color: var(--navy);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 50px;
border-left: 3px solid var(--red);
margin-bottom: 12px;
}
.sec-title {
font-size: clamp(1.35rem, 2.8vw, 2.05rem);
font-weight: 900;
color: var(--navy);
margin-bottom: 10px;
line-height: 1.25;
}
.sec-lead {
color: var(--slate);
font-size: 0.92rem;
max-width: 680px;
margin-bottom: 32px;
line-height: 1.7;
}
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: center;
}
@media (max-width: 900px) {
.grid2 {
grid-template-columns: 1fr;
}
}
.grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.grid3 {
grid-template-columns: 1fr;
}
}
.price-table {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 36px rgb(4 36 154 / 0.11);
}
.price-head {
background: var(--navy);
color: #fff;
padding: 18px 26px;
display: flex;
justify-content: space-between;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.price-row {
padding: 16px 26px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f1f5f9;
}
.price-row:last-child {
border-bottom: none;
}
.price-row:hover {
background: #f8fafc;
}
.price-row span {
font-size: 0.88rem;
font-weight: 700;
color: var(--navy);
}
.price-row strong {
font-size: 0.95rem;
font-weight: 900;
color: var(--red);
}
.price-note {
padding: 14px 26px;
background: #fffbeb;
font-size: 0.76rem;
color: #92400e;
border-top: 1px solid #fde68a;
}
.sit-card {
background: #fff;
border-radius: 22px;
padding: 28px;
border: 1px solid #e2e8f0;
transition: box-shadow 0.25s, transform 0.25s;
display: flex;
flex-direction: column;
height: 100%;
}
.sit-card:hover {
box-shadow: 0 15px 36px rgb(4 36 154 / 0.08);
transform: translateY(-5px);
border-color: #bdd3f0;
}
.sit-icon {
width: 56px;
height: 56px;
background: #edf4ff;
color: var(--navy);
font-size: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.sit-card h3 {
font-size: 1.15rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 12px;
}
.sit-card p {
font-size: 0.85rem;
color: var(--slate);
line-height: 1.6;
flex-grow: 1;
margin-bottom: 20px;
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px;
border: 2px solid var(--navy);
color: var(--navy);
border-radius: 50px;
font-weight: 800;
font-size: 0.85rem;
transition: all 0.2s;
}
.btn-outline:hover {
background: var(--navy);
color: #fff;
}
.danger-item {
background: #fff5f5;
border-radius: 14px;
padding: 18px;
border-left: 4px solid var(--red);
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 14px;
}
.danger-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
background: rgb(132 155 37 / 0.1);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
}
.danger-item h4 {
font-size: 0.88rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 3px;
}
.danger-item p {
font-size: 0.78rem;
color: var(--slate);
}
.process-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
position: relative;
}
@media (max-width: 900px) {
.process-steps {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
}
.process-steps::before {
content: "";
position: absolute;
top: 25px;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg, var(--red), var(--navy));
z-index: 0;
}
@media (max-width: 900px) {
.process-steps::before {
display: none;
}
}
.step-box {
text-align: center;
position: relative;
z-index: 1;
}
.step-num {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--navy);
color: #fff;
font-size: 1rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
border: 3px solid var(--gold);
box-shadow: 0 4px 12px rgb(4 36 154 / 0.22);
}
.step-box h3 {
font-size: 0.8rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 3px;
}
.step-box p {
font-size: 0.72rem;
color: var(--slate);
}
.dark-box {
background: linear-gradient(135deg, #04122b, #04249a);
border-radius: var(--radius);
padding: 32px;
color: #fff;
}
.g-box {
background: rgb(255 255 255 / 0.07);
border: 1px solid rgb(212 175 55 / 0.25);
border-radius: 14px;
padding: 18px;
text-align: center;
}
.g-box strong {
display: block;
font-size: 1.4rem;
font-weight: 900;
color: var(--gold);
margin: 8px 0 3px;
}
.g-box span {
font-size: 0.72rem;
color: rgb(255 255 255 / 0.6);
}
.g-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.g-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.g-list li {
display: flex;
align-items: flex-start;
gap: 9px;
color: rgb(255 255 255 / 0.85);
font-size: 0.845rem;
line-height: 1.55;
}
.case-study {
background: #eff6ff;
border-radius: var(--radius);
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
}
@media (max-width: 900px) {
.case-study {
grid-template-columns: 1fr;
padding: 24px;
}
}
.case-img {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 14px 36px rgb(0 0 0 / 0.14);
}
.case-img img {
width: 100%;
height: 360px;
object-fit: cover;
}
.case-label {
font-size: 0.68rem;
font-weight: 900;
color: var(--red);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 7px;
}
.case-title {
font-size: 1.25rem;
font-weight: 900;
color: var(--navy);
margin-bottom: 18px;
line-height: 1.3;
}
.case-facts {
display: flex;
flex-direction: column;
gap: 11px;
}
.case-fact {
display: flex;
gap: 9px;
align-items: flex-start;
font-size: 0.84rem;
color: #334155;
line-height: 1.6;
}
.case-fact svg {
flex-shrink: 0;
margin-top: 2px;
}
.testi-card {
background: #fff;
border-radius: 18px;
padding: 24px;
border-left: 4px solid var(--gold);
box-shadow: 0 5px 20px rgb(4 36 154 / 0.07);
position: relative;
height: 100%;
}
.testi-card::before {
content: "\201C";
position: absolute;
top: 12px;
right: 18px;
font-size: 3.5rem;
color: rgb(4 36 154 / 0.06);
font-family: Georgia, serif;
line-height: 1;
}
.testi-stars {
color: var(--gold);
font-size: 0.9rem;
letter-spacing: 2px;
margin-bottom: 8px;
}
.testi-text {
font-size: 0.845rem;
color: #334155;
font-style: italic;
margin-bottom: 14px;
line-height: 1.7;
}
.testi-author {
font-weight: 800;
font-size: 0.82rem;
color: var(--navy);
}
.testi-loc {
font-size: 0.76rem;
color: var(--slate);
}
.cta-box {
background: linear-gradient(135deg, #04122b, #04249a);
border-radius: var(--radius);
padding: 56px 36px;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 0 56px;
}
.cta-box::before {
content: "";
position: absolute;
top: -40%;
left: -10%;
width: 460px;
height: 460px;
background: rgb(4 36 154 / 0.15);
border-radius: 50%;
pointer-events: none;
}
.cta-box h2 {
color: #fff;
font-size: clamp(1.35rem, 3vw, 1.9rem);
font-weight: 900;
margin-bottom: 12px;
position: relative;
z-index: 2;
}
.cta-box p {
color: rgb(255 255 255 / 0.78);
font-size: 0.92rem;
max-width: 540px;
margin: 0 auto 28px;
position: relative;
z-index: 2;
}
.cta-btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
position: relative;
z-index: 2;
}
.btn-white {
background: #fff;
color: var(--navy);
padding: 15px 32px;
border-radius: 50px;
font-weight: 900;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.15s, filter 0.2s;
}
.btn-white:hover {
transform: scale(1.05);
filter: brightness(0.97);
color: var(--navy);
}
.cta-btns .btn-zalo {
background: rgb(255 255 255 / 0.12);
color: #fff;
padding: 14px 26px;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
border: 1px solid rgb(255 255 255 / 0.25);
display: inline-flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.btn-zalo:hover {
background: rgb(255 255 255 / 0.22);
color: #fff;
}
.faq-wrap {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: #fff;
border-radius: 13px;
box-shadow: 0 3px 12px rgb(4 36 154 / 0.07);
overflow: hidden;
}
.faq-q {
width: 100%;
background: none;
border: none;
padding: 16px 22px;
text-align: left;
font-size: 0.9rem;
font-weight: 800;
color: var(--navy);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-family: inherit;
transition: color 0.2s;
}
.faq-q:hover {
color: var(--red);
}
.faq-q svg {
flex-shrink: 0;
transition: transform 0.25s;
}
.faq-item.open .faq-q svg {
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s;
}
.faq-item.open .faq-a {
max-height: 280px;
padding: 0 22px 16px;
}
.faq-a p {
font-size: 0.83rem;
color: var(--slate);
line-height: 1.7;
}
.float-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: #04122b;
border-top: 2px solid var(--red);
display: flex;
justify-content: center;
gap: 10px;
padding: 11px 16px;
}
.float-bar a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 20px;
border-radius: 50px;
font-weight: 800;
font-size: 0.85rem;
transition: filter 0.2s, transform 0.15s;
}
.float-bar a:hover {
filter: brightness(1.12);
transform: scale(1.03);
color: #fff;
}
.float-call {
background: var(--red);
color: #fff;
}
.float-zalo {
background: #0068ff;
color: #fff;
}
.page.page-id-3370 .custom-breadcrumb a,
.page.page-id-3370 .custom-breadcrumb {
color: #ffffff;
}
.page.page-id-3370 .custom-breadcrumb {
color: #ffffff;
}
.page.page-id-3370 .custom-breadcrumb a {
color: #ffffff;
}
.page.page-id-3370 .custom-breadcrumb .separator:before{
border-color: #f3f3f3;
}
.page.page-id-3370 .custom-breadcrumb .separator:before {
border-color: #f3f3f3;
}
/* Các đoạn code CSS khác của bạn ở phía dưới này */
.btn {
/* ... */
}
ul.header-nav.header-nav-main.nav.nav-left.nav-size-xlarge.nav-spacing-large.nav-uppercase {
text-align: center;
justify-content: center;
}
.moi-warn {
background: #FFF8E1;
border: 1px solid #FFC107;
padding: 9px 12px;
font-size: 12.5px;
color: #7C4D00;
margin-bottom: 14px;
display: flex;
gap: 7px;
align-items: flex-start;
border-radius: 8px;
padding-bottom: 0;
}
.combo-top-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--fs-color-secondary);
color: #fff;
font-size: 10.5px;
font-weight: 700;
padding: 4px 14px;
border-radius: 999px;
white-space: nowrap;
}
.box-border > .col-inner{
border: 1px solid #eee;;
}
.border-primary > .col-inner{
border: 1px solid var(--primary-color);
}
.border-secondary > .col-inner{
border: 1px solid var(--fs-color-secondary);
}
.border-secondary:hover > .col-inner {
background: color-mix(in srgb, var(--fs-color-secondary) 8%, transparent);
}
/* Tab dich vu verticle */
@media (min-width: 850px) {
.verticle-services .tabbed-content .nav-vertical {
padding-top: 0;
width: 35%;
width: 40% !important; /* Chiếm trọn không gian */
}
}
.verticle-services .nav-vertical+.tab-panels {
border: 1px solid #04249a0d;
border-left: 1px solid #f1f1f100;
border-radius: 0;
padding-top: 24px;
margin-bottom: 24px;
background: #f6faff;
}
.verticle-services .nav-line>li>a:before {
background-color: #03249b47;
height: 12px;
width: 12px;
border-radius: 50%;
right: 4px;
bottom: 12px;
}
/* Ghi đè cấu trúc điều hướng Flatsome thành lưới Bitcoin DeFi 3 cột */
.verticle-services .nav-vertical {
display: flex !important;
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 16px;
padding: 0;
margin: 0;
align-items: flex-start;
justify-content: space-between;
align-content: flex-start;
}
/* Biến mỗi item li thành một khối ô vuông */
.verticle-services .nav-vertical li.tab {
flex: 0 0 calc(33.333% - 11px); /* Tính toán chuẩn 3 cột trừ khoảng cách gap */
max-width: calc(33.333% - 11px);
aspect-ratio: 1 / 1; /* Tạo tỷ lệ ô vuông hoàn hảo */
margin: 0 !important;
padding: 0 !important;
border: none !important; /* Bỏ border mặc định của Flatsome */
}
/* Phong cách hiển thị bên trong thẻ A (Interactive Node) */
.verticle-services .nav-vertical li.tab > a {
display: flex !important;
flex-direction: column !important; /* Icon ở trên, chữ ở dưới */
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: 20px !important;
background-color: #ffffff !important; /* Nền Dark Matter */
border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Viền siêu mỏng */
border-radius: 16px !important; /* Rounded-2xl theo quy chuẩn */
color: #333 !important; /* Màu Stardust chữ phụ */
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
font-size: 1rem;
}
/* Loại bỏ các đường line trang trí mặc định của Flatsome */
.verticle-services .nav-vertical li.tab > a::after {
display: none !important;
}
/* Định dạng cấu trúc Text & Emoji bên trong */
.verticle-services .nav-vertical li.tab > a span {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-weight: 500;
letter-spacing: 0.05em;
}
/* Emoji / Icon phóng to tinh tế */
.verticle-services .nav-vertical li.tab img.emoji {
width: 40px !important;
height: 40px !important;
max-height: 40px !important;
margin: 0 !important;
transition: transform 0.3s ease;
}
/* --- HIỆU ỨNG TƯƠNG TÁC (MICRO-INTERACTIONS) --- */
/* Hover state: Nhấc khối nhẹ và viền chuyển màu Cam Bitcoin */
.verticle-services .nav-vertical li.tab:hover > a {
transform: translateY(-4px);
border-color: rgba(247, 147, 26, 0.5) !important; /* Cam Bitcoin 50% */
box-shadow: 0 0 25px -5px rgba(234, 88, 12, 0.2) !important; /* Đổ bóng Cam nhẹ */
}
.verticle-services .nav-vertical li.tab:hover img.emoji {
transform: scale(1.1); /* Phóng to nhẹ icon khi hover */
}
/* Active state: Trạng thái Tab đang được chọn (Luminescent Node) */
.verticle-services .nav-vertical li.tab.active > a {
background: var(--fs-color-secondary) !important; /* Trở vỠTrue Void sâu thẳm */
border-color: var(--fs-color-secondary) !important; /* Viá»n rá»±c sắc Bitcoin Orange */
color: #ffffff !important; /* Chữ chuyển cam định vị thương hiệu */
box-shadow: 0 0 30px -5px rgb(26 153 247 / 40%) !important; /* Phát sáng Luminescent */
}
.verticle-services .nav-vertical li.tab.active img.emoji {
filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.6)); /* Emoji phát quang */
filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
}
/* --- PHẢN HỒI GIAO DIỆN (RESPONSIVE STRATEGY) --- */
@media (max-width: 768px) {
/* Tablet: Chuyển sang 2 cột để không bị quá mù mịt và chật chội */
.verticle-services .nav-vertical li.tab {
flex: 0 0 calc(50% - 8px) !important;
max-width: calc(50% - 8px) !important;
}
}
@media (max-width: 480px) {
/* Mobile: 1 cột hoàn toàn để tối ưu không gian chạm ít nhất 44px */
.verticle-services .nav-vertical {
gap: 12px;
}
.verticle-services .nav-vertical li.tab {
flex: 0 0 100% !important;
max-width: 100% !important;
aspect-ratio: auto !important; /* Hủy vuông trên mobile để ôm vừa text */
}
.verticle-services .nav-vertical li.tab > a {
flex-direction: row !important; /* Chuyển sang ngang cho dễ nhìn trên màn nhỏ */
justify-content: flex-start !important;
padding: 14px 20px !important;
}
.verticle-services .nav-vertical li.tab > a span {
flex-direction: row;
gap: 16px;
}
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE ***************/
.small-col-order-4 {
order: 4;
text-align: center;
justify-content: center;
}
.small-col-text-center .col-inner.text-right {
text-align: center;
}
li.nav-icon.has-icon {
border: 1px solid #1B252F;
padding: 0 6px;
border-radius: 4px;
max-height: 34px;
background-color: #1B252F;
background: linear-gradient(to bottom, #1B252F 0%, #5A738C 100%);
color: #fff;
}
li.nav-icon.has-icon a {
line-height: 32px !important;
padding-top: 1px;
color: #fff;
}
}
.hip-wrap{background:linear-gradient(135deg,var(--navy-d),var(--navy));padding:68px 24px}
.hip-intro{text-align:center;margin-bottom:44px}
.hip-intro h2{font-size:clamp(24px,3vw,34px);font-weight:900;color:#fff;margin-bottom:8px}
.hip-intro p{font-size:14.5px;color:rgba(255,255,255,.65);max-width:520px;margin:0 auto 20px}
.hip-perks{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.hip-perk{font-size:13px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:7px}
.hip-perk .ck{color:#4ADE80;font-weight:700}
.hip-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto}
.hip-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--rad);padding:28px;transition:.2s}
.hip-card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.hip-tier{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px}
.hip-title{font-size:19px;font-weight:800;color:#fff;margin-bottom:18px}
.hip-row{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.hip-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.hip-icon.p{background:rgba(26,107,58,.3);color:#4ADE80}
.hip-icon.s{background:rgba(10,77,140,.3);color:#60A5FA}
.hip-row-body{font-size:13px;color:rgba(255,255,255,.75)}
.hip-row-body strong{color:#fff;display:block;margin-bottom:2px}
.hip-note{font-size:12px;color:rgba(255,255,255,.4);padding:8px 12px;background:rgba(0,0,0,.2);border-radius:var(--rad-sm);margin-bottom:16px}
.btn-hip{display:block;width:100%;padding:13px;border-radius:var(--rad-sm);font-size:14px;font-weight:700;text-align:center;background:var(--orange);color:#fff;border:none;cursor:pointer;transition:.2s}
.btn-hip:hover{background:var(--orange-d)}
.white.is-outline:hover {
background-color: #fff !important;
border-color: var(--primary-color);
color: var(--primary-color) !important;
}
.h1 , .h2 , .h3 , .h4{
font-weight: 600;
}
.banner h1,
.banner .h1{
font-size: 1.8rem;
}
@media only screen and (min-width: 48em) {
.banner h1,
.banner .h1{
font-size: 3.25rem;
}
}
.font-weight-400 ,
.font-weight-400 *{
font-weight: 400 !important;
}
.text-small {
font-size: 90%;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.header-button .button.primary.is-bevel {
padding: 8px;
width: 160px;
}
@media screen and (min-width: 849px) and (max-width: 1210px){
.nav-spacing-large>li {
margin: 0 4px;
}
.nav>li>a {
font-size: 0.76rem;
letter-spacing: -1px !important;
}
}
@media screen and (min-width: 1130px) and (max-width: 1400px){
.nav-spacing-large>li {
margin: 0 8px;
}
.nav>li>a {
font-size: 0.76rem;
letter-spacing: 0px !important;
}
}
@media screen and (min-width: 849px) {
.logo-left .logo {
margin-right: 25px;
padding-left: 12px;
}
.header-full-width .container {
padding-left: 0;
}
}
input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], textarea {
border-radius: 8px;
}
.custom-section-divider {
pointer-events: none;
}
.star-rating span:before {
color: #FF9800;
content: "";
left: 0;
position: absolute;
top: 0
}
.star-rating:before,.woocommerce-page .star-rating:before {
color: #FF9800;
content: "";
float: left;
left: 0;
position: absolute;
top: 0
}
.border-radius {
border-radius: 8px;
overflow: hidden;
}
.bg-glass,
.bg-glass-col-inner > .col-inner{
background: #02071eb0;
padding: 22px;
/* position: absolute;
bottom: 20px;
left: 0;
width: 90%; */
/* transform: translateX(5.5%); */
padding: 14px 23px 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 8px;
height: auto;
overflow: hidden;
transition: all 0.3s;
z-index: 10;
}
.bg-glass-primary {
background: #02071eb0;
padding: 22px;
padding: 14px 23px 20px;
background: rgb(255 152 0 / 11%);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 8px;
height: auto;
overflow: hidden;
transition: all 0.3s;
z-index: 10;
}
.bg-white,
.bg-white-col-inner > .col-inner {
background-color: #fff;
}
.bg-gray-bottomtop .section-bg-overlay{
background: #020613;
background: linear-gradient(0deg,rgba(2, 6, 19, 1) 0%, rgba(2, 6, 19, 0) 40%);
}
.bg-lightgray-bottomtop .section-bg-overlay {
background: #020613;
background: linear-gradient(0deg, rgb(248 248 248) 0%, rgb(255 255 255 / 0%) 40%);
}
.bg-pinglight-bottomtop .section-bg-overlay {
background: linear-gradient(0deg, #ffffff63 0%, #fff3f38a 100%);
}
.bg-banner-white-bottom .banner-layers.container {
background: linear-gradient(180deg, #f8faff00 0%, #f8faff00 60%, #ffffffed 80%);
}
.bg-gradient-white-center-left .section-bg-overlay {
background-color: rgba(255, 255, 255, 0.221);
background: radial-gradient(circle at center left, #ddeffff5 3%, #edf7ffc7 56%, #ffffff1b 93%);
}
.box-shadow-col-inner > .col-inner {
box-shadow: 0px 0px 71.7px 0px rgba(0, 0, 0, 0.06);
}
.box-overlay .box-text {
position: absolute;
bottom: 20px;
left: 0px;
width: 90%;
transform: translateX(5.5%);
backdrop-filter: blur(15px);
height: auto;
z-index: 10;
padding: 14px 23px 20px;
background: rgba(255, 255, 255, 0.1);
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.1);
border-image: initial;
border-radius: 8px;
overflow: hidden;
transition: 0.3s;
}
.bg-card-pro > .col-inner {
background: linear-gradient(-150deg, #c3e17b 0%, rgb(207 238 143 / 30%) 10%, rgba(255, 255, 255, .5) 22%, #fff 100%);
}
.pl-half {
padding-left: .5rem !important;
}
.pl-half.ux-menu-link {
padding-left: 0rem !important;
}
.pl-half.ux-menu-link > a,
.pl-half.ux-menu-link > span {
padding-left: .5rem !important;
}
.pl-1x {
padding-left: 2rem !important;
}
.pl-2x {
padding: 2rem !important;
}
.p-0 {
padding: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.m-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.mb--375 {
margin-bottom: -5.3rem;
}
.mt--425 {
margin-top: -4.25rem;
}
.stack.stack-row.justify-center {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.stack.stack-row.justify-center:before,
.stack.stack-row.justify-center:after{
content: ' ';
width: 100%;
height: 1px;
border-bottom: 1px solid #ffffff70;
display: flex;
flex: 1;
}
.accordion.acc-primary .stack.stack-row.justify-center:before,
.accordion.acc-primary .stack.stack-row.justify-center:after {
border: 1px solid transparent;
}
.stack.stack-row.justify-center .button.primary.is-bevel.is-small.icon-vitam-login {
white-space: nowrap;
width: 220px;
min-width: 220px;
}
@media (min-width: 768px) {
.row.h-100-img {
height: 100%;
flex-basis: 100%;
}
.row.h-100-img > .col {
height: 100%;
}
.row.h-100-img > .col .col-inner,
.row.h-100-img > .col .img {
position: static;
}
.row.h-100-img > .col .img-inner {
position: absolute;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
}
.row.h-100-img > .col img {
position: absolute;
bottom: 0;
}
}
.img-icon-half {
width: 15px !important;
}
.bg-col-1 {
background-image: url(/wp-content/uploads/2026/02/bg-people.webp);
background-size: contain;
}
.share-vt a.icon.button.circle.is-outline.tooltip {
font-size: 1.25rem;
margin-bottom: 0;
border: 1px solid #0000001a !important;
border-radius: 8px !important;
color: #a81d1a;
}
article.type-document .entry-image img {
width: auto;
max-width: 100%;
}
.slide-padding-2x {
padding-right: 4rem;
}
.slide-padding-2x .flickity-viewport {
overflow: visible;
padding-right: 4rem;
}
.slide-padding-2x .flickity-slider {
padding-right: 4rem;
}
.slide-padding-2x .flickity-enabled {
overflow: visible
}
.slide-padding-2x .flickity-slider>.row:not(.is-selected) {
opacity: 1;
}
@media (min-width: 850px) {
.text-absolute-bottom {
position: absolute !important;
bottom: 0;
width: calc(100% - 24px);
}
}
/* icon */
.icon-date i {
width: 36px;
height: 36px;
background: #fff0 url(/wp-content/themes/flatsome-child/assets/icons/icon-svg-calendar.svg) no-repeat center;
}
.icon-date i:before {
opacity:0;
}
.icon-eye i {
width: 36px;
height: 36px;
background: #fff0 url(/wp-content/themes/flatsome-child/assets/icons/icon_design.svg) no-repeat center;
}
.icon-eye i:before {
opacity:0;
}
.icon-btn-zalo i {
width: 36px;
height: 36px;
background: #fff0 url(/wp-content/uploads/2026/04/icon-svg-zalo.svg) no-repeat center;
}
.icon-btn-zalo i:before {
display: none;
}
.icon-btn-phone i {
width: 36px;
height: 36px;
background: #fff0 url(/wp-content/uploads/2026/04/icon-svg-phone.svg) repeat center;
}
.icon-btn-phone i:before {
display: none;
}
.button.primary.icon-btn-phone i {
fill: currentColor;
width: 36px;
height: 36px;
background: #fff0 url(/wp-content/uploads/2026/04/icon-svg-phone.svg) repeat center;
filter: invert(16%) sepia(74%) saturate(4986%) hue-rotate(305deg) brightness(52%) contrast(990%);
}
.button.primary.icon-btn-phone:hover i{
filter:none;
}
.icon-btn-map i {
width: 36px;
height: 36px;
background: #fff0 url(/wp-content/uploads/2026/04/icon-svg-map.svg) no-repeat center;
}
.icon-btn-map i:before {
display: none;
}
.icon-vitam-login .icon-angle-right {
display: inline-block;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2507 3.08164C12.9653 3.08164 12.7234 3.18076 12.5252 3.379C12.3269 3.57725 12.2278 3.8191 12.2278 4.10457C12.2278 4.39004 12.3269 4.63189 12.5252 4.83014C12.7234 5.02838 12.9653 5.1275 13.2507 5.1275H18.3178V19.8291H13.2507C12.9653 19.8291 12.7234 19.9283 12.5252 20.1265C12.3269 20.3247 12.2278 20.5666 12.2278 20.8521C12.2278 21.1375 12.3269 21.3794 12.5252 21.5776C12.7234 21.7759 12.9653 21.875 13.2507 21.875H19.3407C19.6262 21.875 19.8681 21.7759 20.0663 21.5776C20.2646 21.3794 20.3637 21.1375 20.3637 20.8521V4.10457C20.3637 3.8191 20.2646 3.57725 20.0663 3.379C19.8681 3.18076 19.6262 3.08164 19.3407 3.08164H13.2507ZM8.73082 7.9584C8.92113 7.75223 9.15902 7.64914 9.44449 7.64914C9.72996 7.64914 9.96785 7.75223 10.1582 7.9584L13.9644 11.7646C14.012 11.8122 14.0556 11.8638 14.0953 11.9193C14.1349 11.9748 14.1627 12.0343 14.1785 12.0977C14.2102 12.1453 14.234 12.2047 14.2499 12.2761C14.2657 12.3475 14.2737 12.4149 14.2737 12.4783C14.2737 12.6211 14.2459 12.7519 14.1904 12.8708C14.1349 12.9898 14.0556 13.0968 13.9644 13.192L10.1582 16.9982C9.96785 17.2044 9.72996 17.3075 9.44449 17.3075C9.15902 17.3075 8.92113 17.2044 8.73082 16.9982C8.52465 16.8079 8.42156 16.57 8.42156 16.2846C8.42156 15.9991 8.52465 15.7612 8.73082 15.5709L10.8005 13.5012H2.59324C2.30777 13.5012 2.06592 13.4021 1.86768 13.2039C1.66943 13.0056 1.57031 12.7638 1.57031 12.4783C1.57031 12.1929 1.66943 11.951 1.86768 11.7528C2.06592 11.5545 2.30777 11.4554 2.59324 11.4554H10.8005L8.73082 9.38574C8.52465 9.19543 8.42156 8.95754 8.42156 8.67207C8.42156 8.3866 8.52465 8.14871 8.73082 7.9584Z' fill='white'/%3E%3C/svg%3E");
display: inline-block;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: currentColor; /* Màu icon mặc định */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2507 3.08164C12.9653 3.08164 12.7234 3.18076 12.5252 3.379C12.3269 3.57725 12.2278 3.8191 12.2278 4.10457C12.2278 4.39004 12.3269 4.63189 12.5252 4.83014C12.7234 5.02838 12.9653 5.1275 13.2507 5.1275H18.3178V19.8291H13.2507C12.9653 19.8291 12.7234 19.9283 12.5252 20.1265C12.3269 20.3247 12.2278 20.5666 12.2278 20.8521C12.2278 21.1375 12.3269 21.3794 12.5252 21.5776C12.7234 21.7759 12.9653 21.875 13.2507 21.875H19.3407C19.6262 21.875 19.8681 21.7759 20.0663 21.5776C20.2646 21.3794 20.3637 21.1375 20.3637 20.8521V4.10457C20.3637 3.8191 20.2646 3.57725 20.0663 3.379C19.8681 3.18076 19.6262 3.08164 19.3407 3.08164H13.2507ZM8.73082 7.9584C8.92113 7.75223 9.15902 7.64914 9.44449 7.64914C9.72996 7.64914 9.96785 7.75223 10.1582 7.9584L13.9644 11.7646C14.012 11.8122 14.0556 11.8638 14.0953 11.9193C14.1349 11.9748 14.1627 12.0343 14.1785 12.0977C14.2102 12.1453 14.234 12.2047 14.2499 12.2761C14.2657 12.3475 14.2737 12.4149 14.2737 12.4783C14.2737 12.6211 14.2459 12.7519 14.1904 12.8708C14.1349 12.9898 14.0556 13.0968 13.9644 13.192L10.1582 16.9982C9.96785 17.2044 9.72996 17.3075 9.44449 17.3075C9.15902 17.3075 8.92113 17.2044 8.73082 16.9982C8.52465 16.8079 8.42156 16.57 8.42156 16.2846C8.42156 15.9991 8.52465 15.7612 8.73082 15.5709L10.8005 13.5012H2.59324C2.30777 13.5012 2.06592 13.4021 1.86768 13.2039C1.66943 13.0056 1.57031 12.7638 1.57031 12.4783C1.57031 12.1929 1.66943 11.951 1.86768 11.7528C2.06592 11.5545 2.30777 11.4554 2.59324 11.4554H10.8005L8.73082 9.38574C8.52465 9.19543 8.42156 8.95754 8.42156 8.67207C8.42156 8.3866 8.52465 8.14871 8.73082 7.9584Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2507 3.08164C12.9653 3.08164 12.7234 3.18076 12.5252 3.379C12.3269 3.57725 12.2278 3.8191 12.2278 4.10457C12.2278 4.39004 12.3269 4.63189 12.5252 4.83014C12.7234 5.02838 12.9653 5.1275 13.2507 5.1275H18.3178V19.8291H13.2507C12.9653 19.8291 12.7234 19.9283 12.5252 20.1265C12.3269 20.3247 12.2278 20.5666 12.2278 20.8521C12.2278 21.1375 12.3269 21.3794 12.5252 21.5776C12.7234 21.7759 12.9653 21.875 13.2507 21.875H19.3407C19.6262 21.875 19.8681 21.7759 20.0663 21.5776C20.2646 21.3794 20.3637 21.1375 20.3637 20.8521V4.10457C20.3637 3.8191 20.2646 3.57725 20.0663 3.379C19.8681 3.18076 19.6262 3.08164 19.3407 3.08164H13.2507ZM8.73082 7.9584C8.92113 7.75223 9.15902 7.64914 9.44449 7.64914C9.72996 7.64914 9.96785 7.75223 10.1582 7.9584L13.9644 11.7646C14.012 11.8122 14.0556 11.8638 14.0953 11.9193C14.1349 11.9748 14.1627 12.0343 14.1785 12.0977C14.2102 12.1453 14.234 12.2047 14.2499 12.2761C14.2657 12.3475 14.2737 12.4149 14.2737 12.4783C14.2737 12.6211 14.2459 12.7519 14.1904 12.8708C14.1349 12.9898 14.0556 13.0968 13.9644 13.192L10.1582 16.9982C9.96785 17.2044 9.72996 17.3075 9.44449 17.3075C9.15902 17.3075 8.92113 17.2044 8.73082 16.9982C8.52465 16.8079 8.42156 16.57 8.42156 16.2846C8.42156 15.9991 8.52465 15.7612 8.73082 15.5709L10.8005 13.5012H2.59324C2.30777 13.5012 2.06592 13.4021 1.86768 13.2039C1.66943 13.0056 1.57031 12.7638 1.57031 12.4783C1.57031 12.1929 1.66943 11.951 1.86768 11.7528C2.06592 11.5545 2.30777 11.4554 2.59324 11.4554H10.8005L8.73082 9.38574C8.52465 9.19543 8.42156 8.95754 8.42156 8.67207C8.42156 8.3866 8.52465 8.14871 8.73082 7.9584Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.icon-vitam-login .icon-angle-right:before {
opacity: 0;
}
.icon-vitam-entry {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: currentColor !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6797 14.62L14.2397 12.06L11.6797 9.5' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12.0625H14.17' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6797 14.62L14.2397 12.06L11.6797 9.5' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12.0625H14.17' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6797 14.62L14.2397 12.06L11.6797 9.5' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12.0625H14.17' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color 0.3s ease;
}
.icon-btn-download .icon-angle-down,
.icon-vitam-download .icon-angle-down {
display: inline-block;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2507 3.08164C12.9653 3.08164 12.7234 3.18076 12.5252 3.379C12.3269 3.57725 12.2278 3.8191 12.2278 4.10457C12.2278 4.39004 12.3269 4.63189 12.5252 4.83014C12.7234 5.02838 12.9653 5.1275 13.2507 5.1275H18.3178V19.8291H13.2507C12.9653 19.8291 12.7234 19.9283 12.5252 20.1265C12.3269 20.3247 12.2278 20.5666 12.2278 20.8521C12.2278 21.1375 12.3269 21.3794 12.5252 21.5776C12.7234 21.7759 12.9653 21.875 13.2507 21.875H19.3407C19.6262 21.875 19.8681 21.7759 20.0663 21.5776C20.2646 21.3794 20.3637 21.1375 20.3637 20.8521V4.10457C20.3637 3.8191 20.2646 3.57725 20.0663 3.379C19.8681 3.18076 19.6262 3.08164 19.3407 3.08164H13.2507ZM8.73082 7.9584C8.92113 7.75223 9.15902 7.64914 9.44449 7.64914C9.72996 7.64914 9.96785 7.75223 10.1582 7.9584L13.9644 11.7646C14.012 11.8122 14.0556 11.8638 14.0953 11.9193C14.1349 11.9748 14.1627 12.0343 14.1785 12.0977C14.2102 12.1453 14.234 12.2047 14.2499 12.2761C14.2657 12.3475 14.2737 12.4149 14.2737 12.4783C14.2737 12.6211 14.2459 12.7519 14.1904 12.8708C14.1349 12.9898 14.0556 13.0968 13.9644 13.192L10.1582 16.9982C9.96785 17.2044 9.72996 17.3075 9.44449 17.3075C9.15902 17.3075 8.92113 17.2044 8.73082 16.9982C8.52465 16.8079 8.42156 16.57 8.42156 16.2846C8.42156 15.9991 8.52465 15.7612 8.73082 15.5709L10.8005 13.5012H2.59324C2.30777 13.5012 2.06592 13.4021 1.86768 13.2039C1.66943 13.0056 1.57031 12.7638 1.57031 12.4783C1.57031 12.1929 1.66943 11.951 1.86768 11.7528C2.06592 11.5545 2.30777 11.4554 2.59324 11.4554H10.8005L8.73082 9.38574C8.52465 9.19543 8.42156 8.95754 8.42156 8.67207C8.42156 8.3866 8.52465 8.14871 8.73082 7.9584Z' fill='white'/%3E%3C/svg%3E");
display: inline-block;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: currentColor; /* Màu icon mặc định */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2507 3.08164C12.9653 3.08164 12.7234 3.18076 12.5252 3.379C12.3269 3.57725 12.2278 3.8191 12.2278 4.10457C12.2278 4.39004 12.3269 4.63189 12.5252 4.83014C12.7234 5.02838 12.9653 5.1275 13.2507 5.1275H18.3178V19.8291H13.2507C12.9653 19.8291 12.7234 19.9283 12.5252 20.1265C12.3269 20.3247 12.2278 20.5666 12.2278 20.8521C12.2278 21.1375 12.3269 21.3794 12.5252 21.5776C12.7234 21.7759 12.9653 21.875 13.2507 21.875H19.3407C19.6262 21.875 19.8681 21.7759 20.0663 21.5776C20.2646 21.3794 20.3637 21.1375 20.3637 20.8521V4.10457C20.3637 3.8191 20.2646 3.57725 20.0663 3.379C19.8681 3.18076 19.6262 3.08164 19.3407 3.08164H13.2507ZM8.73082 7.9584C8.92113 7.75223 9.15902 7.64914 9.44449 7.64914C9.72996 7.64914 9.96785 7.75223 10.1582 7.9584L13.9644 11.7646C14.012 11.8122 14.0556 11.8638 14.0953 11.9193C14.1349 11.9748 14.1627 12.0343 14.1785 12.0977C14.2102 12.1453 14.234 12.2047 14.2499 12.2761C14.2657 12.3475 14.2737 12.4149 14.2737 12.4783C14.2737 12.6211 14.2459 12.7519 14.1904 12.8708C14.1349 12.9898 14.0556 13.0968 13.9644 13.192L10.1582 16.9982C9.96785 17.2044 9.72996 17.3075 9.44449 17.3075C9.15902 17.3075 8.92113 17.2044 8.73082 16.9982C8.52465 16.8079 8.42156 16.57 8.42156 16.2846C8.42156 15.9991 8.52465 15.7612 8.73082 15.5709L10.8005 13.5012H2.59324C2.30777 13.5012 2.06592 13.4021 1.86768 13.2039C1.66943 13.0056 1.57031 12.7638 1.57031 12.4783C1.57031 12.1929 1.66943 11.951 1.86768 11.7528C2.06592 11.5545 2.30777 11.4554 2.59324 11.4554H10.8005L8.73082 9.38574C8.52465 9.19543 8.42156 8.95754 8.42156 8.67207C8.42156 8.3866 8.52465 8.14871 8.73082 7.9584Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2507 3.08164C12.9653 3.08164 12.7234 3.18076 12.5252 3.379C12.3269 3.57725 12.2278 3.8191 12.2278 4.10457C12.2278 4.39004 12.3269 4.63189 12.5252 4.83014C12.7234 5.02838 12.9653 5.1275 13.2507 5.1275H18.3178V19.8291H13.2507C12.9653 19.8291 12.7234 19.9283 12.5252 20.1265C12.3269 20.3247 12.2278 20.5666 12.2278 20.8521C12.2278 21.1375 12.3269 21.3794 12.5252 21.5776C12.7234 21.7759 12.9653 21.875 13.2507 21.875H19.3407C19.6262 21.875 19.8681 21.7759 20.0663 21.5776C20.2646 21.3794 20.3637 21.1375 20.3637 20.8521V4.10457C20.3637 3.8191 20.2646 3.57725 20.0663 3.379C19.8681 3.18076 19.6262 3.08164 19.3407 3.08164H13.2507ZM8.73082 7.9584C8.92113 7.75223 9.15902 7.64914 9.44449 7.64914C9.72996 7.64914 9.96785 7.75223 10.1582 7.9584L13.9644 11.7646C14.012 11.8122 14.0556 11.8638 14.0953 11.9193C14.1349 11.9748 14.1627 12.0343 14.1785 12.0977C14.2102 12.1453 14.234 12.2047 14.2499 12.2761C14.2657 12.3475 14.2737 12.4149 14.2737 12.4783C14.2737 12.6211 14.2459 12.7519 14.1904 12.8708C14.1349 12.9898 14.0556 13.0968 13.9644 13.192L10.1582 16.9982C9.96785 17.2044 9.72996 17.3075 9.44449 17.3075C9.15902 17.3075 8.92113 17.2044 8.73082 16.9982C8.52465 16.8079 8.42156 16.57 8.42156 16.2846C8.42156 15.9991 8.52465 15.7612 8.73082 15.5709L10.8005 13.5012H2.59324C2.30777 13.5012 2.06592 13.4021 1.86768 13.2039C1.66943 13.0056 1.57031 12.7638 1.57031 12.4783C1.57031 12.1929 1.66943 11.951 1.86768 11.7528C2.06592 11.5545 2.30777 11.4554 2.59324 11.4554H10.8005L8.73082 9.38574C8.52465 9.19543 8.42156 8.95754 8.42156 8.67207C8.42156 8.3866 8.52465 8.14871 8.73082 7.9584Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transform: rotate(90deg);
}
.icon-btn-download .icon-angle-down:before,
.icon-vitam-download .icon-angle-down:before {
opacity: 0;
}
/* Box radius */
.row.border-radius .post-item .col-inner {
border-radius: 0.5rem;
overflow: hidden;
border-top: 1px solid #e5e5e5;
background: #fff;
}
.row.border-radius .post-item .col-inner .box {
padding-bottom: 0px;
}
.row.border-radius .post-item .box-image {
max-width: calc(100% - 1rem);
margin-top: 0.5rem;
border-radius: 0.5rem;
}
.row.border-radius .post-item .box-text {
position: static;
}
.row.border-radius .post-item .cat-label {
position: absolute;
top: 0.5rem;
left: 1rem;
border-radius: 0.4rem;
padding: 4px 12px;
line-height: 1.8;
opacity: 1;
}
.row.border-radius .post-item .cat-label.tag-label {
opacity: 1;
background: #FFE9E9;
color: var(--primary-color);
}
.row.border-radius .post-item:hover .cat-label.tag-label {
opacity: 1;
color: #FFE9E9;
background-color: var(--primary-color);
}
.row.border-radius .post-item .box-text .button {
width: calc(100% - 2rem);
display: flex;
justify-content: space-between;
align-items: center;
border: none;
border-radius: 0;
padding-left: 0;
border-top: 1px solid #ddd;
box-shadow: 0px 0px 0px #000;
font-size: .76rem;
font-weight: 500;
color: var(--fs-color-base);
text-transform: uppercase;
padding: 0.5rem 0;
/* position: absolute;
bottom: 0.5rem;
left: 1rem; */
width: calc(100% - 0rem);
z-index: 1;
order:9;
}
.row.border-radius .post-item .box-text .button:hover {
padding-left: 0;
background-color:transparent;
border-color: transparent;
border-top: 1px solid #ddd;
color: var(--primary-color);
}
.row.border-radius .post-item .box-text .post-meta {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
font-size: 0.85rem;
opacity: 1;
order: 6;
margin-top: 1rem;
}
.row.border-radius .post-item .box-text-inner.blog-post-inner {
display: flex;
flex-direction: column;
}
.row.border-radius .post-item .box-text .button:before {
content: ' ';
display: inline-block;
width: 48px;
height: 48px;
position: absolute;
right: 0;
bottom:0;
background: var(--primary-color);
background: linear-gradient(90deg, #ff6f15 0%, #F44336 100%);
border-radius: 0.5rem;
}
.row.border-radius .post-item .box-text .button:after {
content: ' ';
display: inline-block;
width: 24px;
height: 24px;
margin-top: 4px;
margin-right: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: currentColor !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6797 14.62L14.2397 12.06L11.6797 9.5' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12.0625H14.17' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6797 14.62L14.2397 12.06L11.6797 9.5' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12.0625H14.17' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.6797 14.62L14.2397 12.06L11.6797 9.5' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12.0625H14.17' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color 0.3s ease;
}
@media (max-width: 767px) {
.row.border-radius .flickity-viewport,
.row.border-radius .flickity-slider{
overflow: visible;
}
.row.border-radius.row-slider .col.post-item {
max-width: 86% !important;
}
}
/* Hover Effects imagebox */
.box .image-cover {
overflow: hidden
}
.box .image-cover::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg, transparent, transparent 30%, rgba(255,255,255,0.3));
transform: rotate(-45deg);
transition: all 1s ease;
opacity: 0;
z-index: 9;
pointer-events: none;
}
.box:hover .image-cover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%)
}
/* end Hover Effects imagebox */
.icon-box:not(.testimonial-box):not(.flex-row-col) .icon-box-text{
align-items: center;
display: flex;
} {
align-items: center;
display: flex;
}
/*icon box services*/
.services-left .icon-box {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}
.services-left .icon-box .icon-box-img {
border-radius: 8px 0 0 8px;
color: #fff;
background-color: var(--primary-color);
padding: 10px;
}
.services-left .icon-box .icon-box-text h3 {
font-size: 0.85rem
}
.services-left .icon-box:hover {
background-color: #051B39;
}
.services-left .icon-box h3{
margin-bottom: 0;
}
.services-left .icon-box:hover h3{
color: #fff;
}
.services-left .icon-box:hover .icon-box-img {
background-color: #051B39;
}
.gradient-gray-light {
/* 1. Define the gradient background */
background: linear-gradient(to bottom, #bcbcbc, #efefef, #303030);
/* 2. Clip the background to the text */
-webkit-background-clip: text;
background-clip: text;
/* 3. Make the text transparent so the background shows through */
-webkit-text-fill-color: transparent;
color: transparent; /* Fallback */
}
.gradient-golden-light {
/* 1. Thay đổi dải màu sang hướng chéo 45 độ với các mốc ánh kim */
background: linear-gradient(45deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
/* 2. Clip the background to the text */
-webkit-background-clip: text;
background-clip: text;
/* 3. Make the text transparent so the background shows through */
-webkit-text-fill-color: transparent;
color: transparent; /* Fallback */
/* Đổ bóng nhẹ phía sau để làm nổi bật text chữ vàng trên mọi loại nền */
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
}
/*documents*/
.col.document-item > .col-inner{
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.col.document-item {
border-radius: 20px;
background: #eaeaea;
margin-bottom: 24px;
padding: 1.5rem;
}
.col.document-item > .col-inner{
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 24px;
}
.col.document-item .document-text {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
width: 680px;
max-width: 100%;
flex-wrap: wrap;
}
.col.document-item .document-title {
width: 420px;
max-width: 100%;
margin-bottom: 0;
}
.col.document-item .button{
margin-bottom: 0;
}
.document-item .document-date {
height: 36px;
vertical-align: middle;
display: flex;
align-items: center;
}
@media (min-width: 768px) {
.col.document-item .document-title {
border-left: 1px solid #c2c2c2;
padding-left: 24px
}
}
@media (max-width: 767px) {
.col.document-item {
border-radius: 20px;
background: #eaeaea;
margin-bottom: 24px;
padding: 0rem;
overflow: hidden;
}
.col.document-item .document-text {
padding: 1rem;
}
.document-button-group {
display: flex;
width: 100%;
justify-content: space-between;
}
.document-button-group > a.button.is-link {
display: flex;
width: 50%;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: #e4e4e4 !important;
border-top: 1px solid #d3d3d3 !important;
margin-right: 0;
border-radius: 0 !important;
}
.document-button-group > a.button.is-link:not(:last-child) {
border-right: 1px solid #d3d3d3 !important;
}
}
/* Boxt text title */
.box-text h1, .box-text h2, .box-text h3, .box-text h4, .box-text h5, .box-text h6 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* End Boxt text title */
/* Home video box */
.home-box-videos .box-title {
font-size: 1rem;
line-height: 1.25;
text-align: center;
color: rgb(20, 38, 109);
padding-top: 0;
margin-top: 0 !important;
margin-bottom: 1rem;
}
.home-box-videos .text:not(.box-title){
font-size: 104%;
font-weight: 600;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 2.9em;
margin-top: 1rem !important;
}
/* home boxs du-an categories */
.home .acf-gallery-overlay {
display: none !important;
}
.hide-filter .fbpp-filter.fbpp-filter--dropdown {
display: none;
}
/* Equal all box experts */
.box-blog-post .box-text .post-title,
.box-blog-post .box-text .from_the_blog_excerpt {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 2.9em;
font-weight: 600;
}
.box-blog-post .box-text .from_the_blog_excerpt {
font-size: 0.85rem;
opacity: 0.6;
}
/* End Equal all box experts */
.hide-divider .is-divider {
display: none
}
/* vertical-accordion */
.vertical-accordion-container {
border-radius: 0px;
/* box-shadow: 0px 11px 40.3px 0px rgb(99 113 35 / 42%); */
}
.vertical-accordion-item:not(.active) {
background-image: none !important;
}
.accordion-index {
font-size: 10.85rem;
color: rgb(255 255 255 / 60%);
left: -5.5em;
bottom: -5.7em;
opacity: 0;
transition: all ease .6s;
}
.vertical-accordion-item.active .accordion-index {
font-size: 10.85rem;
color: rgb(255 255 255 / 60%);
left: -0.5em;
bottom: -0.7em;
opacity: 0.3;
}
.vertical-accordion-item.active {
background-blend-mode: color-dodge;
}
.accordion-title-text {
font-size: 1.25rem;
font-weight: 600;
color: #ffffff;
opacity: 1;
}
.vertical-accordion-item.active .accordion-title-text {
opacity: 0;
}
.accordion-content {
z-index: 1;
display: flex;
align-items: center;
padding-bottom: 0;
}
@media (min-width: 768px) {
.vertical-accordion-container.align-left {
gap: 12px;
}
.vertical-accordion-item:not(.active) {
max-width: 160px;
transition: all ease .3s;
}
.vertical-accordion-item:not(.active),
.vertical-accordion-item {
border-radius: 20px;
}
.accordion-icon {
opacity: 0;
}
}
/*faq accordion */
.faq-accordion .accordion_title, .faq-accordion.accordion {
box-shadow: none !important;
}
.faq-accordion .accordion-item {
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 10px 3px #d8d8d86e;
}
.faq-accordion .accordion-title,
.faq-accordion .accordion-title.active {
text-align: left;
padding-right: 2.4rem
}
.faq-accordion .accordion-title.active {
background-color: #fff;
border-color: transparent;
color: var(--primary-color);
color: #000;
box-shadow: none;
}
.faq-accordion .accordion-inner {
border-radius: 0;
}
/* home hide-readmore media box */
.h-100.row > .col > .col-inner{
height: 100%;
position: relative;
}
.hide-readmore .h-100.row > .col > .col-inner {
padding-bottom: 2rem;
}
.hide-readmore a.button.primary.expand {
position: absolute;
bottom: 0;
left: 0;
}
/* end home hide-readmore media box */
.dark h2.white {
background-clip: initial;
background: transparent;
-webkit-text-fill-color: currentColor;
}
.price-wrapper {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.footer-1 {
-webkit-animation: gradientSmooth 40s ease infinite;
animation: gradientSmooth 40s ease infinite;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background: -webkit-gradient(linear,left top,right top,from(#298dda),color-stop(#1a5bad),color-stop(#3d21af),to(#a438fc));
background: linear-gradient(90deg,#298dda,#1a5bad,#3d21af,#a438fc);
background-size: 400% 100%
}
.absolute-footer {
background-color: #000000;
background-image: linear-gradient(rgb(16 36 79), rgb(220 226 255));
background-blend-mode: multiply;
}
.footer-primary.pull-left ,
.footer-secondary.pull-right {
padding: .75em;
}
.footer-primary a {
margin-right: 1rem;
margin-left: 1rem;
padding-bottom: 1rem;
display: inline-block;
}
.footer-primary a:first-child {
margin-left: 0;
}
@media (max-width: 549px) {
.absolute-footer > .container {
display: flex;
flex-wrap: wrap;
}
.footer-primary {
order: -1;
display: flex;
border-bottom: 1px solid #4b4b4b;
}
}
.footer-certs {}
.footer-certs .col-inner {
display: flex;
justify-content: flex-start;
}
.footer-certs .col-inner .img {
width: 120px !important;
}
@media (max-width: 549px) {
.box-footer-gray > .col-inner{
background: #ffffff2b;
border-radius: 8px;
margin-bottom: 24px;
padding: 0 24px 30px;
}
}
.list-unstyled {
list-style: none;
}
.list-unstyled li {
margin-left: 0 !important;
}
footer a.icon.button.circle.is-outline.tooltip {
font-size: 1.25rem;
margin-bottom: 0;
border: 1px solid #ffffff2b !important;
border-radius: 8px !important;
}
.image-40 .img-inner img {
height: 40px;
width: auto;
}
.text-gradient-premium {
background: linear-gradient(45deg, #1a237e, #39438e, #f36d36);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.text-gradient-animated {
background: linear-gradient(to right, #39438e, #8e44ad, #3498db, #39438e);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 3s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
input[type=search] {
background-color: #fff;
border: 1px solid transparent;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
color: #333;
font-size: .97em;
height: 2.507em;
max-width: 100%;
padding: 0 .75em;
transition: color .3s, border .3s, background .3s, opacity .3s;
vertical-align: middle;
width: 100%;
}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
font-weight: 600;
color: var(--primary-color);
}
span.amount {
color: #F44336;
font-weight: 700;
white-space: nowrap;
}
a[href="#hide"] {
display: none !important;
}
.woocommerce-shop.woocommerce .shop-page-title.category-page-title.page-title {
background-color: var(--primary-color);
color: #fff;
display: flex;
order: -1;
}
.woocommerce-shop.woocommerce .shop-page-title.category-page-title.page-title .breadcrumbs ,
.woocommerce-shop.woocommerce .shop-page-title.category-page-title.page-title .breadcrumbs a{
color: #fff;
}
.woocommerce-shop.woocommerce #wrapper {
display: flex;
flex-direction: column;
}
.woocommerce-shop.woocommerce #header {
order: -2;
}
/*CF7*/
/* Tùy chỉnh tổng thể form */
.wpcf7-form {
max-width: 100%;
}
/* Loại bỏ label mặc định nếu bạn muốn chữ nằm sát line */
.wpcf7-form p {
margin-bottom: 0px;
position: relative;
}
.wpcf7-form .col {
margin: 0;
padding: 0 15px 0px;
}
.wpcf7-form label {
width: 100%;
font-weight: 400;
font-size: 0.9em;
color: #333;
letter-spacing: 1px;
}
/* Style cho các ô input và textarea kiểu đường kẻ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
border: 1px solid #222 !important; /* Ä‘Æ°á»ng gạch chân */
background-color: transparent !important;
border-radius: 8px !important;
padding: 10px 12px !important;
width: 100% !important;
box-shadow: none !important;
transition: all 0.3s ease;
}
/* Hiệu ứng khi người dùng click vào ô nhập liệu (Focus) */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
border-bottom: 1px solid var(--primary-color, #446084) !important; /* Đổi màu đường kẻ khi focus */
outline: none;
}
/* Điều chỉnh độ cao cho textarea */
.wpcf7-form textarea {
height: 80px !important;
min-height: 80px;
}
/* Tùy chỉnh nút gửi (Submit) */
.wpcf7-submit {
background-color: #f9812f !important;
color: #fff !important;
border: none !important;
padding: 2px 24px !important;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: opacity 0.3s;
cursor: pointer;
display: inline-block;
width: auto !important;
border-radius: 8px !important;
}
.wpcf7-submit:hover {
opacity: 0.8;
background-color: var(--primary-color, #446084) !important;
}
/* Xử lý thông báo lỗi/thành công */
.wpcf7-response-output {
border: none !important;
padding: 10px 0 !important;
margin: 20px 0 0 0 !important;
font-size: 0.9em;
}
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
box-shadow: none;
}
.wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea{
border: 1px solid;
}
/* section-form-normal style */
.section-form-normal .wpcf7 input[type="email"],
.section-form-normal .wpcf7 input[type="tel"],
.section-form-normal .wpcf7-form input[type="text"],
.section-form-normal .wpcf7-form input[type="email"],
.section-form-normal .wpcf7-form textarea,
.section-form-normal input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1) !important;
border-color: #ddd !important;
padding-left: 12px !important;
}
.project-thumb-slider-wrapper .flickity-prev-next-button,
.project-thumb-slider-wrapper .flickity-page-dots {
display: none
}
/* project-card */
.project-card .project-content h2 a {
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 1;
max-width: 100%;
line-height: 1.4rem;
white-space: nowrap;
}
.project-card .project-content p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 2.9em;
}
/* Top Categories Widget Area */
.category-page-row .category-top-widget-area ul.product-categories {
gap: 12px;
}
.category-page-row .category-top-widget-area ul.product-categories li.cat-item {
flex-basis: calc(50% - 6px);
border-radius: 0;
background-color: #f3f3f3;
padding-left: 16px;
}
.category-top-widget-area a.btn-layered-nav-button {
border: 1px solid #eaeaea;
padding: 6px 12px;
border-radius: 4px;
display: inline-block;
margin-right: 6px;
margin-bottom: 12px;
color: #333;
}
.category-top-widget-area a.btn-layered-nav-button.selected {
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
color: #f3f3f3;
}
.category-top-widget-area .widget {
margin-bottom: 0.5em;
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.container.category-top-widget-area {
padding: 0 20px;
margin-top: 0 !important;
}
form.woocommerce-widget-layered-nav-buttons {
margin-bottom: 0;
font-size: 0.8rem;
}
/*
* Filter
*/
/* Smaller Mobile Screens (Max width 549px) */
@media screen and (max-width: 549px) {
.box-vertical {
display: flex;
gap: 24px;
}
.box-vertical .box-image {
max-width: 40% !important;
}
.box-vertical .box-text {
padding: 0;
}
}
/* Medium Screens (Max width 850px) - Filter Sidebar */
@media (max-width: 850px) {
.sort_giuseart form {
display: inline-block;
margin-bottom: 4px;
border: 1px solid #e0e0e0;
background: #eeeeee;
padding-right: 8px;
border-radius: 4px;
}
input[type=checkbox],
input[type=radio] {
margin-right: 4px;
margin-bottom: 0px;
}
}
/* Mobile Screens (Max width 768px) */
@media (max-width: 768px) {
form.woocommerce-ordering {
display: none;
}
.category-page-row ul.product-categories {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.category-page-row ul.product-categories li.cat-item {
flex-basis: calc(50% - 6px);
width: calc(50% - 6px);
border-radius: 0;
background-color: #f3f3f3;
padding-left: 16px;
display: flex;
font-size: 84%;
border-radius: 6px;
}
.shop-page-title.category-page-title.dark.featured-title.page-title .medium-flex-wrap .flex-col:nth-child(1),
.shop-page-title.category-page-title.dark.featured-title.page-title .medium-flex-wrap .flex-col:nth-child(3) {
display: none;
}
button.woocommerce-widget-layered-nav-dropdown__submit {
background-color: var(--primary-color);
color: #f3f3f3;
margin-top: 0.75rem;
}
.product-bottom-widget-area .widget {
width: 100%;
margin-bottom: 20px;
}
}
/* Small Tablet/Mobile Sidebar Fixes (Max width 849px) */
@media (max-width: 849px) {
.hide-for-medium#product-sidebar {
display: flex !important;
flex-direction: column;
order: 99;
}
aside.widget_text.widget.widget_custom_html {
position: static !important;
}
}
/* Hide filter button mobile */
.row.category-page-row > .col.hide-for-medium.large-3 {
display: flex !important;
}
.category-filtering.category-filter-row.show-for-medium {
display: none !important;
}
/* Desktop Screens (Min width 850px) */
/*@media screen and (min-width: 850px) {*/
/* Filters as top bar */
.widget .is-divider {
display: none;
}
.widget.woocommerce.widget_price_filter {
flex-basis: 345px;
min-width: 390px;
max-width: 100%;
}
.category-page-row aside#woocommerce_product_categories-3 {
flex-basis: 100%;
max-width: 100%;
padding-bottom: 15px;
}
.category-page-row ul.product-categories {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.category-page-row ul.product-categories li.cat-item {
border: 1px solid #eaeaea;
padding: 0px 8px;
background: #eaeaea;
white-space: nowrap;
}
.category-page-row ul.product-categories li.cat-item a {
color: #333;
}
.category-page-row ul.product-categories li.cat-item a:hover {
color: #f98c3d;
}
/* Select2 (Layered Nav Dropdown) Styling */
.woocommerce-widget-layered-nav-dropdown {
width: 100%;
max-width: 400px;
background: #fff;
padding: 0px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 2px solid 1px solid #ededed;
border-radius: 8px;
height: 34px;
outline: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: #007cba;
box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.1);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #333;
line-height: 48px;
padding-left: 15px;
padding-right: 30px;
font-size: 15px;
font-weight: 500;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
color: #999;
font-size: 20px;
height: 36px;
line-height: 26px;
margin-right: 10px;
padding-right: 5px;
font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
color: #dc3232;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px;
width: 30px;
position: absolute;
top: 1px;
right: 1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-width: 6px 5px 0 5px;
margin-top: -3px;
}
.select2-container--default .select2-selection--single:hover .select2-selection__arrow b {
border-color: #007cba transparent transparent transparent;
}
.select2-dropdown {
border: 2px solid #e0e6ed;
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 9999;
}
.select2-results__option {
padding: 10px 15px;
font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #007cba;
color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #f1f5f9;
color: #333;
font-weight: bold;
}
/* Filter Sorting */
.sort_giuseart {
display: flex;
margin-top: 5px;
justify-content: flex-start;
}
.sort_giuseart form {
padding: 0 0 0 20px;
}
.sort_giuseart .pt-checkbox {
margin-right: 0px;
}
button.woocommerce-widget-layered-nav-dropdown__submit {
border: 1px solid #666;
background: #666;
margin-top: 10px;
border-radius: 99px;
color: #fff;
font-size: 80%;
}
/* Tùy chỉnh tổng thể Widget Sản phẩm vừa xem */
.widget_recently_viewed_products {
background: #fff;
padding: 16px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
/* Tiêu đề widget */
.widget_recently_viewed_products .widget-title {
font-size: 1.1em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
border-bottom: 2px solid var(--primary-color);
display: inline-block;
padding-bottom: 5px;
}
/* Ẩn thanh divider mặc định nếu không cần thiết */
.widget_recently_viewed_products .is-divider {
display: none;
}
/* Danh sách sản phẩm */
ul.product_list_widget {
margin: 0;
padding: 0;
list-style: none;
}
/* Từng dòng sản phẩm */
ul.product_list_widget li {
padding: 10px 8px;
padding-left: 60px;
margin-bottom: 5px;
margin-left: 0;
transition: all 0.3s ease;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/* Hiệu ứng Hover giống danh mục */
ul.product_list_widget li:hover {
background-color: color-mix(in srgb, var(--primary-color, #446084), white 95%);
transform: translateX(5px);
}
/* Link sản phẩm (bao gồm ảnh và tên) */
ul.product_list_widget li a {
display: flex;
align-items: center;
text-decoration: none;
color: #444;
font-weight: 500;
width: 100%;
}
/* Tùy chỉnh ảnh sản phẩm */
ul.product_list_widget li img {
width: 50px !important; /* Thu nhỏ ảnh để phù hợp sidebar */
height: 50px !important;
object-fit: cover;
border-radius: 4px;
margin-right: 12px;
margin-bottom: 0 !important;
}
/* Tên sản phẩm */
ul.product_list_widget li .product-title {
font-size: 0.95em;
line-height: 1.3;
transition: color 0.3s ease;
}
ul.product_list_widget li:hover .product-title {
color: var(--primary-color, #446084);
}
/* Giá sản phẩm */
ul.product_list_widget li .woocommerce-Price-amount {
display: block;
font-size: 0.9em;
font-weight: 700;
}
/* ========== PRODUCT FILTERS WRAPPER ========== */
.product-filters-wrapper {
padding: 20px;
background: #ffffff;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sort-section {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.sort-label {
font-weight: 600;
color: #333;
min-width: auto;
white-space: nowrap;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
}
.sort-options {
display: flex;
gap: 20px;
flex-wrap: wrap;
flex: 1;
align-items: center;
}
.sort-checkbox {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
/* Radio Button Styling */
.sort-checkbox input[type="radio"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #ddd;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
background: white;
position: relative;
margin-bottom: 0;
}
.sort-checkbox input[type="radio"]:hover {
border-color: var(--primary-color);
box-shadow: 0 0 8px rgba(33, 128, 160, 0.2);
}
.sort-checkbox input[type="radio"]:checked {
background: var(--primary-color);
border-color: var(--primary-color);
}
.sort-checkbox input[type="radio"]:checked::after {
content: '✓';
position: absolute;
color: white;
font-size: 12px;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sort-checkbox label {
cursor: pointer;
font-size: 14px;
color: #333;
transition: all 0.3s ease;
margin: 0;
user-select: none;
}
.sort-checkbox input[type="radio"]:checked + label {
color: var(--primary-color);
font-weight: 600;
}
.sort-checkbox input[type="radio"]:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.category-top-widget-area .widget.category-top-widget.widget_layered_nav {
flex-basis: 33%;
min-width: 390px;
max-width: 100%;
flex-basis: 100%;
}
.category-top-widget-area .widget.category-top-widget.widget_layered_nav:nth-child(n+6) {
flex-basis: 100%;
min-width: 100%;
max-width: 100%;
}
.category-top-widget-area ul.woocommerce-widget-layered-nav-list {
display: flex;
}
.category-top-widget-area ul.woocommerce-widget-layered-nav-list {
display: flex;
flex-wrap: wrap;
}
.category-top-widget-area ul.custom-price-list li,
.category-top-widget-area .widget>ul>li.woocommerce-widget-layered-nav-list__item {
border: 1px solid #eaeaea;
padding: 0px 12px;
font-size: .8rem;
border-radius: 4px;
display: inline-block;
margin-right: 6px;
margin-bottom: 12px;
color: #333;
display: inline-block;
white-space: nowrap;
position: relative;
}
.category-top-widget-area .widget>ul>li.woocommerce-widget-layered-nav-list__item {
display:flex;
align-items: center;
flex-wrap: wrap;
}
.category-top-widget-area .ux-swatch-widget-layered-nav-list__graphic {
border-radius: 50%;
overflow: hidden;
}
.category-top-widget-area .widget>ul>li a {
padding: 5px 0;
color: #111;
}
/* Style remove filter */
.remove-filter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
line-height: 1;
background-color: #f1f1f1; /* Màu nền xám nhạt */
color: #333 !important; /* Màu dấu X */
border-radius: 50%; /* Bo tròn tuyệt đối */
text-decoration: none !important;
font-size: .62rem;
line-height: 0.9;
font-weight: bold;
transition: all 0.3s ease;
margin-left: 5px;
vertical-align: middle;
text-align: center;
position: absolute;
top: -13px;
right: -9px;
}
/* Hiệu ứng khi di chuột vào (Hover) */
.remove-filter:hover {
background-color: #E91E63; /* Đổi sang màu chủ đạo của bạn */
color: #fff !important; /* Dấu X chuyển sang trắng */
transform: rotate(90deg); /* Xoay nhẹ dấu X */
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
/* Loại bỏ gạch chân mặc định của thẻ a trong Flatsome */
.remove-filter:after {
display: none !important;
}
/* Biến :before thành nút remove filter */
.category-top-widget-area .widget li.chosen a:before {
content: "✕"; /* Nội dung dấu X */
display: flex;
align-items: center;
justify-content: center;
/* Kích thước và hình dáng */
width: 20px;
height: 20px;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
color: #333 !important;
border-radius: 50%;
/* Font và căn lề */
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
/* Định vị absolute */
position: absolute;
top: -10px;
right: -10px;
/* Hiệu ứng */
transition: all 0.3s ease;
z-index: 1;
opacity:1;
transform: rotate(0deg);
}
.category-top-widget-area .widget li.chosen a:before {
}
/* Loại bỏ các icon mặc định khác của Flatsome nếu có */
.category-top-widget-area .widget li.chosen a:after {
display: none !important;
}
.category-top-widget-area .widget li.chosen a:hover:before{
opacity: 1;
transform: rotate(90deg);
background-color: #E91E63; /* Đổi sang màu chủ đạo của bạn */
color: #fff !important;
}
/* Tổng thể widget dựa trên style html1 */
.widget_custom_html .box-promotion {
border: 1px solid #E0E0E0;
box-sizing: border-box;
border-radius: 4px;
margin-bottom: 20px;
box-shadow: 0 3px 6px #0000000f;
overflow: hidden;
padding-top: 0 !important; /* Reset padding để header sát mép */
}
/* Tiêu đề widget đồng bộ với .box-km-title */
.widget_custom_html .widget-title {
font-weight: bold;
font-size: 16px;
line-height: 21px;
text-align: center;
text-transform: uppercase;
color: #f5875a !important; /* Màu cam từ html1 */
background: #F4F4F4;
padding: 12px 15px;
margin-bottom: 0 !important;
border-bottom: 1px solid #E0E0E0;
display: block;
}
/* Ẩn gạch ngang mặc định của Flatsome nếu có */
.widget_custom_html .is-divider {
display: none;
}
/* Nội dung danh sách */
.widget_custom_html .main-textwidget {
padding: 1rem;
background: #fff;
}
.widget_custom_html .textwidget ul {
list-style: none;
margin-left: 0;
margin-bottom: 0;
}
.widget_custom_html .textwidget ul li {
font-size: 14px;
line-height: 20px;
color: #555555;
position: relative;
padding-left: 15px; /* Tạo khoảng trống cho icon */
margin-bottom: 12px;
display: flex;
align-items: center;
min-height: 24px;
}
/* Định dạng Icon/Ảnh */
.widget_custom_html .textwidget ul li img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 22px !important;
height: 22px !important;
object-fit: contain;
/* Hiệu ứng lọc màu nếu bạn muốn icon đồng bộ màu cam (tùy chọn) */
/* filter: sepia(100%) saturate(300%) hue-rotate(-15deg); */
}
.widget_custom_html .box-promotion ul li {
left: 0px;
padding-left: 30px;
}
/* Đường kẻ ngăn cách giữa các dòng */
.widget_custom_html .textwidget ul li:not(:last-child) {
border-bottom: 1px dashed #eee; /* Nét đứt nhẹ nhàng hơn */
padding-bottom: 10px;
}
/* Hiệu ứng hover cho mục danh sách */
.widget_custom_html .textwidget ul li:hover {
color: #000;
}
/* Responsive */
@media (max-width: 768px) {
.widget_custom_html .widget-title {
font-size: 15px;
}
}
/* Style box-contact-info */
.post-sidebar #secondary {
height: 100%;
}
.post-sidebar .widget_custom_html {
position: sticky;
top: 30px;
}
#product-sidebar .widget_text.widget.widget_custom_html,
#product-sidebar .textwidget.custom-html-widget {
height: 100%;
}
.box-contact-info {
position: -webkit-sticky; /* Hỗ trợ Safari */
position: sticky;
top: 30px; /* Khoảng cách từ đỉnh màn hình khi cuộn */
background: #fff;
z-index: 99; /* Tăng z-index để không bị các thành phần khác đè lên */
border: 1px solid #E0E0E0;
box-sizing: border-box;
border-radius: 4px;
margin-bottom: 20px;
box-shadow: 0 3px 6px #0000000f;
/* KHÔNG dùng overflow: hidden ở đây */
}
/* Bo góc cho phần tiêu đề để thay thế cho overflow:hidden ở cha */
.box-contact-info .box-contact-title {
padding: 11px 15px;
background: #F4F4F4;
border-bottom: 1px solid #E0E0E0;
border-radius: 4px 4px 0 0; /* Bo 2 góc trên */
}
/* Bo góc cho phần nội dung cuối */
.box-contact-info .box-contact-content {
border-radius: 0 0 4px 4px; /* Bo 2 góc dưới */
padding: 15px;
background: #fff;
}
.box-contact-info .box-contact-title {
padding: 11px 15px;
background: #F4F4F4;
border-bottom: 1px solid #E0E0E0;
}
.box-contact-info .box-contact-title .maintitle {
font-weight: bold;
font-size: 16px;
line-height: 21px;
text-transform: uppercase;
color: #f5875a; /* Màu cam chủ đạo */
display: flex;
align-items: center;
}
.box-contact-info .box-contact-content {
font-size: 14px;
line-height: 1.6;
padding: 15px;
color: #555555;
background: #fff;
}
.box-contact-info .slogan {
color: #231F20;
font-weight: 500;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed #E0E0E0;
}
.box-contact-info .contact-list {
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.box-contact-info .contact-list li {
position: relative;
padding-left: 25px;
margin-bottom: 8px;
display: block;
}
/* Tạo dấu chấm màu cam đồng bộ với list-style của html1 */
.box-contact-info .contact-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: #f5875a;
border-radius: 50%;
}
.box-contact-info .contact-list li strong {
color: #333;
margin-right: 5px;
}
.box-contact-info .contact-list li a {
color: #446084;
transition: color 0.2s;
}
.box-contact-info .contact-list li a:hover {
color: #f5875a;
text-decoration: underline;
}
/* map contact */
.bage-primary-small {
font-size: x-small;
padding: 2px 8px 4px;
background: var(--primary-color);
color: #fff;
border-radius: 6px;
display: inline-block;
}
.bage-primary-small p {
padding-bottom: 0;
margin-bottom: 0px;
}
.bage-primary-small a {
color: #fff;
}
.box-map-emb .col-inner {
border: 1px solid #ffffff;
border-radius: 4px;
box-shadow: 3px 9px 20px #00000014;
padding: 12px;
margin: auto;
margin-left: 12px !important;
margin-top: -180px;
max-width: calc(100% - 24px);
height: 160px;
overflow: auto;
}
/*hstoc-list*/
.hstoc-list .ux-menu-link.flex.menu-item:not(.pl-half.bg-white):hover a,
.hstoc-list .ux-menu-link.flex.menu-item.actived:not(.pl-half.bg-white) a {
position: relative;
color: #fff2f2;
}
.hstoc-list .ux-menu-link.flex.menu-item:hover {
background: #f36e39;
}
.hstoc-list .ux-menu-link.flex.menu-item:hover a:before,
.hstoc-list .ux-menu-link.flex.menu-item.actived a:before {
content: ' ';
position: absolute;
left: -15px;
right: 0;
top: 0;
height: 100%;
width: calc(100% + 30px);
z-index: -1;
background: #f36e39;
font-weight: 600;
color: #fff2f2;
}
/*lpwtoc*/
aside.widget_lpwtoc_widget {
position: sticky;
top: 90px;
}
body.single .lwptoc > div {
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
border-radius: 8px;
}
body.single .lwptoc_item_number {
font-weight: bold;
color: var(--fs-color-base);
margin-right: 10px;
min-width: 15px;
font-size: 0.9em;
}
body.single .lwptoc-light .lwptoc_i A {
color: var(--fs-color-base);
}
.lwptoc-notInherit .lwptoc_i DIV A {
border: none !important;
text-decoration: none !important;
}
.widget_lpwtoc_widget .lwptoc-notInherit .lwptoc_i DIV A:hover {
border-bottom: 1px dotted transparent !important;
}
.widget_lpwtoc_widget .lwptoc-notInherit .lwptoc_i DIV A:hover {
border-bottom: 1px dotted !important;
color: var(--play-video-color);
}
/*Ring cirle animation*/
/* 1. Thiết lập chung cho các nút để vòng tròn lan tỏa từ tâm */
.buttonizer-button {
position: relative;
z-index: 1;
}
/* 2. Tạo hiệu ứng vòng tròn bằng pseudo-element */
.buttonizer-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 50%;
/* Màu vòng tròn - có thể chỉnh sang màu cam #f5875a cho đồng bộ site */
background-color: inherit;
opacity: 0.6;
z-index: -1;
animation: ring-circle 2s infinite ease-out;
}
/* 3. Tạo thêm một vòng tròn thứ hai để hiệu ứng dày và mượt hơn */
.buttonizer-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: inherit;
opacity: 0.4;
z-index: -1;
animation: ring-circle 2s infinite ease-out 0.5s; /* Chạy trễ hơn 0.5s */
}
/* 4. Định nghĩa chuyển động lan tỏa */
@keyframes ring-circle {
0% {
width: 100%;
height: 100%;
opacity: 0.6;
}
100% {
width: 180%; /* Độ lớn của vòng tròn khi tỏa ra */
height: 180%;
opacity: 0;
}
}
/* 5. Giữ cho icon và label nằm trên cùng */
.buttonizer-icon-0-0-14,
.buttonizer-image-0-0-22,
.buttonizer-icon-0-0-28 {
position: relative;
z-index: 2;
}
/* Ghi đè icon search trên Header */
.header-search.header-search-dropdown.has-icon.has-dropdown.menu-item-has-children {
position: absolute;
right: 10px;
width: 70px;
}
.header-search.header-search-dropdown.has-icon.has-dropdown.menu-item-has-children .nav-top-link.icon {
opacity: 1;
border: none;
}
@media screen and (min-width: 0) {
.searchform-wrapper.form-flat .flex-col:last-of-type {
position: absolute;
top:-41px;
left:30px;
}
.searchform-wrapper .flex-row {
background-color: #f5f5f5;
border-radius: 8px;
border: 1px solid #ddd;
transition: all 0.3s ease;
overflow: visible;
}
header#header #ux-search-dropdown.nav-dropdown {
display: block;
padding: 0;
position: fixed;
top: 0;
left: 0;
padding-top: 70px;
background: transparent;
width: 100%;
}
.header-wrapper.stuck li.current-dropdown > #ux-search-dropdown.nav-dropdown {
top: 102px;
right: 0;
left: 0;
width: 100%;
position: fixed;
box-shadow: none;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
padding-top: 15px !important;
}
.header-search-form-wrapper {
max-width: 100%;
margin: 0 auto;
}
.searchform-wrapper .ux-search-submit {
background-color: transparent !important;
color: #666 !important;
border: none !important;
padding: 0px 22px !important;
height: 30px !important;
min-width: auto !important;
transition: color 0.3s ease;
}
.searchform .button.icon i {
position: absolute;
left: 14px;
top: 10px;
color: #1B252F;
}
.searchform-wrapper .searchform:before {
content: "Tìm kiếm";
display:flex;
padding-left: 20px;
font-weight: 500;
margin-bottom: 8px;
}
header#header .nav-dropdown li.html {
padding: 15px 20px 30px;
background: #fff;
}
}
@media screen and (min-width: 849px) {
.header-search.header-search-dropdown.has-icon.has-dropdown.menu-item-has-children {
position: absolute;
right: 10px;
width: 160px;
}
.header-search.header-search-dropdown.has-icon.has-dropdown.menu-item-has-children .nav-top-link.icon {
opacity: 0;
}
header#header #ux-search-dropdown.nav-dropdown {
display: block;
padding: 0;
position: fixed;
top: 0;
transform: none;
left: 0 !important;
padding-top: 109px;
background: transparent;
width: 100%;
max-width: 100% !important;
}
}
.searchform .icon-search::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
#localstore_search_form .select-resize-ghost,
#localstore_search_form .select2-container .select2-choice,
#localstore_search_form .select2-container .select2-selection,
#localstore_search_form input[type=date],
#localstore_search_form input[type=email],
#localstore_search_form input[type=number],
#localstore_search_form input[type=password],
#localstore_search_form input[type=search],
#localstore_search_form input[type=tel],
#localstore_search_form input[type=text],
#localstore_search_form input[type=url],
#localstore_search_form select,
#localstore_search_form textarea {
background-color: #f4f5f6;
border: 1px solid #f4f5f6;
border-radius: 20px;
padding-left: 20px;
}
div#map {
min-height: 40vh;
}
.hethongnhua {
border: 1px solid #eaeaea;
box-shadow: 0 3px 6px #0000000a;
border-radius: 6px;
margin-bottom: .5rem;
}
.box-badge .box-text {
bottom: 0;
border-radius: 0 0 4px 4px;
}
.box-form {
padding: 30px;
border-radius: 10px;
background: #ffffff66;
box-shadow: 0 3px 9px #00000005;
}
.bg-gray {
background-color: #ffffff;
border: 1px solid #e2e2e2;
padding-top: 8px;
}
.section-bg-lightgray .section-bg.fill {
background-color: #f8f8f8;
}
.payment-icons.inline-block {
display: none;
}
/*top-form download*/
.topform-download {
padding-top: 40px;
}
/* 1. Thiết lập container chính thành hàng ngang */
.topform-download .form-vertical-profile {
display: flex;
flex-wrap: nowrap; /* Đảm bảo không bị nhảy dòng */
align-items: flex-start; /* Căn đỉnh các phần tử */
gap: 10px; /* Khoảng cách giữa ô input và nút */
width: 100%;
}
/* 2. Loại bỏ margin mặc định của thẻ p mà Contact Form 7 tự sinh ra */
.topform-download .form-vertical-profile p {
margin: 0;
width: 100%;
}
/* 3. Phần ô nhập liệu (chiếm phần lớn không gian) */
.topform-download .field-item {
flex: 1; /* Để ô input tự co giãn lấp đầy khoảng trống */
}
/* 4. Phần nút bấm (giữ nguyên kích thước theo nội dung) */
.topform-download .button-item {
flex: 0 0 auto;
}
/* 5. Tinh chỉnh input và button để khớp chiều cao */
.topform-download .form-vertical-profile input[type="tel"],
.topform-download .form-vertical-profile .button {
height: 45px; /* Chiều cao cố định để cả 2 bằng nhau */
margin: 0 !important; /* Xóa margin thừa */
display: block;
}
/* Tùy chọn: Responsive cho mobile - Nếu màn hình quá nhỏ thì nên nhảy thành 2 dòng */
@media (max-width: 600px) {
.topform-download .form-vertical-profile {
flex-direction: column;
}
.topform-download .button-item, .field-item {
width: 100%;
}
}
.hide-readmore .blog-post-inner .button {
display: none !important;
}
.box-text-lm56 .box-text.text-left {
max-height: 56px;
}
/* 1. Tổng thể khung mục lục */
.lwptoc_i {
background-color: #ffffff;
border: 1px solid #f8f8f8;
border-radius: 10px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
font-size: 0.95em;
margin-bottom: 20px;
}
/* 2. Header: Mục lục + Nút ẩn hiện */
.lwptoc_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.lwptoc_title {
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
}
.lwptoc_toggle_label {
font-size: 0.8em;
color: #999;
text-decoration: none;
border: 1px solid #ddd;
padding: 2px 8px;
border-radius: 4px;
transition: all 0.3s;
}
.lwptoc_toggle_label.:hover {
background-color: var(--play-video-color);
color: #fff !important;
border-color: var(--play-video-color);
}
/* 3. Danh sách các mục */
.lwptoc_items {
list-style: none;
padding: 0;
margin: 0;
}
.lwptoc_item {
margin-bottom: 0px;
line-height: 1.4;
}
.lwptoc_item a {
display: flex;
align-items: flex-start;
color: #555;
text-decoration: none;
transition: all 0.2s ease;
padding: 4px 0;
}
/* 4. Số thứ tự (1, 2, 3...) */
.lwptoc_item_number {
font-weight: bold;
color: var(--play-video-color); /* Sử dụng biến màu đã tạo */
margin-right: 10px;
min-width: 15px;
font-size: 0.9em;
}
/* 5. Nội dung chữ */
.lwptoc_item_label {
flex: 1;
}
/* 6. Hiệu ứng Hover vào từng mục */
.lwptoc_item a:hover {
color: var(--play-video-color);
}
/* 7. Trạng thái khi mục lục đang ẩn */
.lwptoc_items-visible {
display: block;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* .box-blog-post mobile */
/* Smaller Mobile Screens (Max width 549px) */
@media screen and (max-width: 549px) {
.box.box-blog-post.box-vertical {
display: flex;
gap: 24px;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 6px;
}
.box.box-blog-post.box-vertical .box-image {
max-width: 100% !important;
}
.box.box-blog-post.box-vertical .box-text {
padding: 12px;
}
}
/* FAQ */
.accordion_title,
.accordion {
box-shadow: 0 0 10px 3px #d8d8d86e;
border-radius: 4px;
overflow: hidden;
}
.accordion_title {
background: #f4f4f4;
padding: 6px 12px;
border-radius: 10px 10px 0 0;
margin-bottom: 0px
}
.accordion-title, .accordion-title.active {
margin-bottom: 0;
padding: 1.25rem 1.5rem;
font-weight: 600;
font-size: 1.25rem;
}
.accordion_title,
.accordion_title .title-head-acc{
position: relative;
z-index: 1;
box-shadow: none;
padding-bottom: 0.5rem;
margin-bottom: -0.5rem;
font-size: 1.125rem;
font-weight: 400;
}
.accordion-title p,
.accordion-title .sub-head-acc,
.accordion-title span{
font-size: 90%;
font-weight: 500;
margin-bottom: 0;
}
.accordion-title strong {
color: var(--primary-color);
}
.accordion-title.active,
.accordion-title.active strong {
background-color: var(--primary-color);
border-color: transparent;
color: #fff;
}
.accordion-title.active h2 {
color: #fff
}
.accordion-inner {
background: #fafafa;
border-radius: .4rem;
border-bottom: 1px solid #eaeaea;
}
.accordion .toggle {
left: auto;
right: 8px;
line-height: 1rem;
width: 2rem;
font-size: 0.85rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
}
.accordion .active>.toggle {
transform: translateY(-50%) rotate(-180deg);
}
@media (max-width: 767px) {
.accordion .toggle {
top: 36px;
}
}
.text-justify {
text-align: justify;
}
/* about page */
.slider-visible .flickity-viewport {
overflow: visible;
}
.slider-visible .flickity-slider > div:not(.is-selected) {
transform: scale(0.85);
opacity:0.5;
transition: all ease .3s;
}
/* timeline */
.icon-box:not(.testimonial-box) .icon-box-center .icon-box-img {
margin: 60px auto 1em;
width: 10px !important;
}
.icon-box:not(.testimonial-box) .icon-box-center .icon-box-img .icon {
background-color: var(--primary-color);
border-color: var(--primary-color);
border-radius: 50%;
height: 10px;
border: none;
width: 10px;
overflow: hidden;
transform: translateX(-1px);
}
@media screen and (min-width: 549px) {
.timeline-right .icon-box-center .icon-box-img:after {
content: "";
position: absolute;
top: 0px;
border-left: 6px solid #ffffff;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
right: -103px;
transform:rotate(180deg);
z-index: 9;
}
.timeline-left .icon-box-center .icon-box-img:after {
content: "";
position: absolute;
top: 0px;
border-left: 6px solid #ffffff;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
left: -103px;
transform:rotate(0deg);
z-index: 9;
}
.tabbed-content ul.nav.nav-tabs.nav-vertical {
padding: 12px;
background-color: #f6f6f6;
}
.tabbed-content ul.nav.nav-tabs.nav-vertical > li {
border-radius: 99px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.tabbed-content ul.nav.nav-tabs.nav-vertical > li > a:before {
content: ' ';
line-height:2.5rem;
text-align: center;
display: inline-block;
border-radius: 99px;
overflow: hidden;
padding: 0;
margin-top: 0rem;
margin-bottom: 0rem;
margin-right: 0.5rem;
width: 2.5rem;
height: 2.5rem;
background-color: #ffffff;
color: var(--primary-color);
content: "\f155";
font-family: 'dashicons';
}
.tabbed-content ul.nav.nav-tabs.nav-vertical > li.active > a:before {
background-color: var(--primary-color);
color: #fff;
}
.tabbed-content .nav.nav-tabs.nav-vertical:hover>li:not(:hover)>a:before {
opacity:1;
}
.tabbed-content .nav.nav-vertical.nav-tabs>li.active>a {
border: none;
}
}
#shop-sidebar .widget.widget_custom_html {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
#shop-sidebar .textwidget.custom-html-widget {
border: 1px solid #eee;
border-top: none;
padding: 16px;
}
#shop-sidebar .textwidget.custom-html-widget p{
margin-bottom: 0;
}
.bottom-testi {
text-align: left;
display: flex;
align-items: center;
}
.icon-box-img.testimonial-image.circle {
text-align: left;
margin-bottom: 0;
margin-right: .55rem;
}
.bottom-info .testimonial-meta {
display: flex;
flex-direction: column;
width: 100%;
}
.bottom-info .star-rating {
max-width: 120px;
text-align: left;
justify-content: flex-start;
display: flex;
margin-left: 0 !important;
}
.slider-visible-wrapper .slider-nav-reveal {
overflow: visible;
padding-right: 2rem !important;
}
.slider-visible-wrapper .flickity-viewport {
overflow: visible;
}
.flickity-slider .icon-box.testimonial-box {
border: 1px solid #e7e7e7;
background: #f8f8f8;
margin: 0.5rem;
}
.icon-box.testimonial-box.icon-box-center p{
font-style:normal;
}
.brand-row:not(.show-data) > .col > .col-inner > * {
display: none;
}
.brand-row > .col > .col-inner > .filter-form.bm-brand-filter-advanced-wrapper {
display: block;
}
@media (min-width: 768px) {
.page-template-page-blank-php.page .fbpp-filter__group {
display: flex;
flex-wrap: nowrap;
gap: 5px;
width: calc(50% - 8px);
flex-direction: row;
align-items: center;
position: relative;
padding-left: 168px;
vertical-align: middle;
}
}
/* pill-card */
/* Khung bọc ngoài cùng (Hình viên thuốc, căn giữa các phần tử theo chiều dọc) */
.icon-box.pill-card {
display: flex;
width: 260px;
max-width: 100%;
align-items: center; /* Căn giữa icon và chữ theo chiều dọc */
gap: 0px; /* Khoảng cách giữa icon và chữ */
background-color: var(--primary-color); /* Màu nền nhẹ (tùy chọn, bạn có thể đổi màu) */
padding: 0px 2px 2px; /* Khoảng cách đệm bên trong */
border-radius: 30px; /* Bo tròn tối đa để tạo thành hình viên thuốc */
border: 1px solid var(--primary-color); /* Đường viền mảnh (tùy chọn) */
box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Hiệu ứng đổ bóng nhẹ */
display: inline-flex; /* Giúp khung co giãn vừa khít theo nội dung, không bị tràn 100% dòng */
margin-bottom: 12px;
}
.pill-card .h4.uppercase {
padding-top: 4px;
}
/* Khối chứa icon */
.icon-box-img {
flex-shrink: 0;
/* width: 36px !important; /* Ghi đè hoặc đảm bảo độ rộng cố định 40px */
/* height: 42px; */
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.img-width-auto .icon-box-img {
width: inherit !important;
height: auto;
overflow: hidden;
}
/* Phần tử ảnh SVG bên trong */
.icon-box-img img {
width: 100%; /* Ảnh tự động co giãn theo khối 40px */
height: auto;
object-fit: contain;
}
/* Khối chứa chữ */
.icon-box-text {
flex-grow: 1; /* Chiếm trọn không gian còn lại */
}
/* Kiểu dáng cho tiêu đề h4 */
.icon-box-text .h4 {
margin: 0; /* Xóa margin mặc định của thẻ div/h4 để không bị lệch */
font-size: 16px; /* Kích thước chữ */
font-weight: 600; /* Độ đậm của chữ */
color: #ffffff; /* Màu chữ chính */
line-height: 1.4;
}
ul.inline-heading li::marker {
color: var(--primary-color);
}
ul.inline-heading li h3.inline,
ul.inline-heading li h3.inline + p {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem
}
/* Tạo khoảng cách nhỏ giữa tiêu đề và nội dung */
ul.inline-heading li h3.inline {
margin-right: 0px !important;
}
ul.inline-heading p {
display: inline
}
/* dich-vu-pro */
/* Căn giữa nội dung text trong hero chips */
.col.hero-chips .col-inner,
.col.hero-chips .text {
text-align: center;
}
/* Biến p chứa chip thành flex-row căn giữa */
.col.hero-chips .text > p {
display: flex;
flex-wrap: wrap; /* cho phép xuống dòng trên mobile */
justify-content: center;
align-items: center;
gap: 8px;
margin: 0;
}
/* Chip pill style */
.col.hero-chips .hero-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
border-radius: 999px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.18);
line-height: 1.4;
}
/* Loại bỏ ảnh hưởng
trong flex row */
.col.hero-chips .text > p br {
display: none;
}
.dark .hero-chip {
color: rgb(0 0 0 / 85%) !important;
background: rgb(255 255 255 / .09);
border: 1px solid rgb(67 67 67) !important;
}
/* Mobile tuning */
@media (max-width: 480px) {
.col.hero-chips .text > p {
gap: 6px;
}
.col.hero-chips .hero-chip {
padding: 6px 12px;
}
}
.tab-select {
display: none;
}
@media (max-width: 859px) {
.nav.nav-line.nav-vertical.nav-normal.nav-size-normal.nav-left {
display: none;
}
.tab-select {
display: block;
width: 100%;
padding: 8px;
}
ul.nav.nav-line.nav-vertical.nav-normal.nav-size-normal.nav-left {
display: none !important;
}
}
.acc-bordered .accordion-title,
.acc-bordered .accordion-title.active {
background-color: transparent;
border-color: transparent;
font-weight: 700;
display: flex;
flex-direction: row;
padding: .25rem 1.5rem;
background: #ffffff;
border-radius: 0rem;
margin-bottom:.5rem;
box-shadow: 0 2px 4px #3333330f;
border: 1px solid #e6e6e6;
border-radius: 8px;
}
.acc-bordered .accordion_title,
.acc-bordered .accordion {
box-shadow: 0 0 10px 3px #d8d8d800;
border-radius: 4px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.acc-bordered .accordion-title.active,
.acc-bordered .accordion-title.active strong {
background-color: var(--primary-color);
border-color: transparent;
color: #fff;
}
/* ===== [ADDED 2026-08-26] .hs-* system completion (conversion .hs-wrap -> shortcode) ===== */
.danger-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.guarantee-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hs-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgb(4 18 43 / .92) 0%,rgb(4 18 43 / .18) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px;z-index:2}
.img-frame{border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgb(0 0 0 / .18)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.situation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid2x2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hotline-cta{font-size:1.5rem;font-weight:900;color:var(--gold);display:block;margin-top:16px;letter-spacing:.05em}
.bg-light{background:linear-gradient(180deg,#f8fafc,#eef2f7);border-radius:var(--radius);border:1px solid rgb(15 23 42 / .06)}
.sec-center{text-align:center}
.info-box{background:#eff6ff;border-radius:16px;padding:20px;border-left:4px solid var(--navy);margin-bottom:20px}
.related-card{background:linear-gradient(135deg,var(--red),#b81e16);border-radius:20px;padding:24px;color:#fff}
.card-body{padding:24px}
.card-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-link{font-size:.8rem;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.sol-card{border-radius:20px;padding:28px;border:2px solid}
.sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.sol-in{background:#f0fdf4;border-color:#86efac}
.sol-out{background:#eff6ff;border-color:#bdd3f0}
@media(max-width:768px){.danger-grid,.guarantee-row,.testi-grid,.situation-grid,.sol-grid{grid-template-columns:1fr 1fr}.hs-hero-overlay{padding:60px 20px 80px}}
@media(max-width:549px){.danger-grid,.guarantee-row,.testi-grid,.situation-grid,.sol-grid{grid-template-columns:1fr}}