(inline-flex) chu KHONG dat tren
bao
ngoai. Inline-flex co lai vua khit be ngang chu, nen 2 vach luon dinh sat
2 ben chu - du co rule nao ep chieu rong the h2 di nua cung khong day
chung ra 2 mep duoc. */
.custorm-tc-wat-heading {
margin: 0 0 34px;
text-align: center;
}
.custorm-tc-wat-heading__text {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
/* fit-content + margin auto: khoi co lai vua khit chu roi tu can giua,
khong phu thuoc vao text-align thua ke tu the cha. */
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin: 0 auto;
font-size: 26px;
line-height: 1.3;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ctw-heading);
}
.custorm-tc-wat-heading__text::before,
.custorm-tc-wat-heading__text::after {
content: "";
flex: 0 0 auto;
width: 56px;
height: 1px;
background: linear-gradient(90deg, rgba(0, 155, 181, 0), var(--ctw-primary));
}
.custorm-tc-wat-heading__text::after {
background: linear-gradient(90deg, var(--ctw-primary), rgba(0, 155, 181, 0));
}
/* Bien the canh trai (section Gioi thieu): KHONG co vach 2 ben, thay bang
hoa van nho can giua ngay duoi dong chu - dung nhu thiet ke.
Cho ca khoi width:fit-content de hoa van can giua duoc theo be ngang chu. */
.custorm-tc-wat-heading--left {
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
text-align: left;
}
.custorm-tc-wat-heading--left .custorm-tc-wat-heading__text {
margin-left: 0;
font-size: 24px;
letter-spacing: 2px;
}
.custorm-tc-wat-heading--left .custorm-tc-wat-heading__text::before,
.custorm-tc-wat-heading--left .custorm-tc-wat-heading__text::after {
display: none;
}
/* Vach ngan + hinh thoi o giua, dat can giua ngay duoi dong chu */
.custorm-tc-wat-heading--left::after {
content: "";
display: block;
width: 96px;
height: 7px;
margin: 11px auto 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 7'%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23009bb5' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23009bb5'/%3E%3C/linearGradient%3E%3ClinearGradient id='r'%3E%3Cstop offset='0' stop-color='%23009bb5'/%3E%3Cstop offset='1' stop-color='%23009bb5' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect x='0' y='3' width='38' height='1' fill='url(%23l)'/%3E%3Crect x='58' y='3' width='38' height='1' fill='url(%23r)'/%3E%3Cpath d='M48 0.4 51.1 3.5 48 6.6 44.9 3.5Z' fill='%23009bb5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Nut bam: dung element [button] cua Flatsome (class .button).
Mau/kich thuoc/responsive do Flatsome lo, o day chi chinh them chi tiet. */
.custorm-tc-wat-home .button {
margin-bottom: 0;
font-weight: 600;
}
.custorm-tc-wat-home .button i {
font-size: .85em;
}
.custorm-tc-wat-home .button.is-link {
margin-right: 0;
}
/* wpautop tu chen
giua cac the nam khac dong trong nguon.
O nhung cho duoi day
chi tao khoang trong thua nen an di.
(Cac
co chu y trong feature-text / address van giu nguyen.) */
.custorm-tc-wat-promo__discount > br,
.custorm-tc-wat-feedback__name + br {
display: none;
}
/* --------------------------------------------------------------------------
1. HERO - la 1 [ux_banner], anh thiet ke lam nen
Nen gradient, canh hoa, cum anh tron VA CA duong song trang deu nam san
trong file anh => CSS o day khong ve lai bat cu trang tri nao nua.
Chu nam trong [text_box], co chu dung don vi vw de phong to/thu nho
theo banner, khong bi lech khi doi do phan giai.
-------------------------------------------------------------------------- */
.custorm-tc-wat-hero__box .text-box-content {
background: transparent;
}
.custorm-tc-wat-hero .custorm-tc-wat-hero__title {
margin: 0;
font-size: clamp(26px, 3.6vw, 64px);
line-height: 1;
font-weight: 700 !important;
letter-spacing: .09em;
color: var(--ctw-primary-dark);
}
.custorm-tc-wat-hero .custorm-tc-wat-hero__subtitle {
margin: .25em 0 0;
font-size: clamp(14px, 1.72vw, 31px);
line-height: 1.2;
font-weight: 700 !important;
letter-spacing: .13em;
color: var(--ctw-primary-dark);
}
.custorm-tc-wat-hero__desc {
margin: .9em 0 0;
font-size: clamp(11px, 1.05vw, 18px);
line-height: 1.5;
color: #4d6670;
}
.custorm-tc-wat-hero .button {
margin: 1.4em .8em 0 0;
font-size: clamp(10px, .82vw, 15px);
}
/* 4 dac diem duoi nut. Dung GRID chu khong dung flex+width%: grid chia cot
co dinh nen khong bao gio bi rot xuong dong do margin thua cua the
. */
.custorm-tc-wat-hero__features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(6px, .9vw, 16px);
margin: clamp(14px, 2vw, 34px) 0 0;
padding: 0;
list-style: none;
max-width: 26em;
}
.custorm-tc-wat-hero__feature {
margin: 0;
text-align: center;
}
/* Vong tron trang, ben trong la the cua Font Awesome.
Doi icon: sua class fa-* trong HTML. Doi co: sua font-size o day. */
.custorm-tc-wat-hero__feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: clamp(30px, 2.9vw, 52px);
height: clamp(30px, 2.9vw, 52px);
margin: 0 auto .5em;
border-radius: 50%;
background: #fff;
color: var(--ctw-primary);
font-size: clamp(13px, 1.2vw, 21px);
box-shadow: 0 4px 14px rgba(0, 155, 181, .18);
}
.custorm-tc-wat-hero__feature-text {
display: block;
font-size: clamp(14px, .76vw, 13px);
line-height: 1.4;
color: #000000;
font-weight: bold;
}
/* --------------------------------------------------------------------------
2. DICH VU NOI BAT
-------------------------------------------------------------------------- */
.custorm-tc-wat-services {
padding: 56px 0 26px;
background: #fff;
}
/* Ca card nam tren .col-inner cua cot */
.custorm-tc-wat-service > .col-inner {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--ctw-border);
border-radius: var(--ctw-radius);
box-shadow: var(--ctw-shadow);
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.custorm-tc-wat-service:hover > .col-inner {
transform: translateY(-6px);
box-shadow: var(--ctw-shadow-hover);
}
.custorm-tc-wat-service__thumb {
flex: 0 0 auto;
}
.custorm-tc-wat-service__body {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 40px 22px 24px;
text-align: center;
}
/* Vong tron teal de len mep duoi anh, ben trong la the Font Awesome */
.custorm-tc-wat-service__icon {
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--ctw-primary);
color: #fff;
font-size: 21px;
border: 3px solid #fff;
box-shadow: 0 6px 16px rgba(26, 156, 184, .35);
}
.custorm-tc-wat-service__title {
margin: 0 0 12px;
font-size: 17px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ctw-heading);
}
.custorm-tc-wat-service__desc {
flex: 1 1 auto;
margin: 0 0 18px;
font-size: 14px;
line-height: 1.7;
color: var(--ctw-text);
}
.custorm-tc-wat-service__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--ctw-primary);
text-decoration: none;
transition: gap .25s ease;
}
.custorm-tc-wat-service__link i {
font-size: 13px;
}
.custorm-tc-wat-service__link:hover {
gap: 14px;
color: var(--ctw-primary-dark);
}
/* --------------------------------------------------------------------------
3. GIOI THIEU
-------------------------------------------------------------------------- */
.custorm-tc-wat-about {
padding: 30px 0;
}
.custorm-tc-wat-about__box {
border-radius: 18px;
background: linear-gradient(135deg, var(--ctw-primary-soft-2) 0%, var(--ctw-primary-soft) 100%);
padding: 40px;
}
.custorm-tc-wat-about__text p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.85;
}
/* So lieu */
.custorm-tc-wat-stats {
display: flex;
flex-wrap: wrap;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.custorm-tc-wat-stats__item {
position: relative;
margin: 0;
padding: 0 26px;
text-align: center;
}
.custorm-tc-wat-stats__item:first-child {
padding-left: 0;
}
.custorm-tc-wat-stats__item + .custorm-tc-wat-stats__item::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 1px;
background: rgba(26, 156, 184, .3);
}
.custorm-tc-wat-stats__value {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 24px;
font-weight: 700;
color: var(--ctw-primary-dark);
line-height: 1.2;
}
.custorm-tc-wat-stats__value i {
font-size: 19px;
color: var(--ctw-primary);
}
.custorm-tc-wat-stats__label {
display: block;
margin-top: 4px;
font-size: 13px;
color: var(--ctw-text);
}
/* Nut CTA cua 2 section nay gio la element [button] roi, khong con div boc */
.custorm-tc-wat-about .button {
margin-top: 26px;
}
/* --- Cot phai: [ux_banner] lam anh nen + [text_box] la hop thong tin ---
Vi tri / kich thuoc / mau nen cua hop deu chinh trong UX Builder,
CSS o day chi lo phan bo tron goc va do bong. */
.custorm-tc-wat-about__banner {
border-radius: 14px;
overflow: hidden;
box-shadow: var(--ctw-shadow);
}
.custorm-tc-wat-about__card .text-box-content {
box-shadow: 0 10px 30px rgba(20, 100, 120, .18);
}
.custorm-tc-wat-about__card-title {
margin: 0 0 14px;
font-size: 14px;
font-weight: 700;
line-height: 1.45;
letter-spacing: .3px;
text-transform: uppercase;
color: var(--ctw-heading);
}
.custorm-tc-wat-about__list {
margin: 0 0 14px;
padding: 0;
list-style: none;
}
/* Icon la flex item chu KHONG dat absolute: chu tu dong thut vao dung bang
be ngang icon + gap, khong the de len nhau du chu dai bao nhieu dong. */
.custorm-tc-wat-about__list li {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 8px;
font-size: 13px;
line-height: 1.55;
color: var(--ctw-text);
margin-left: 0 !important;
}
.custorm-tc-wat-about__list li i {
flex: 0 0 auto;
margin-top: .25em;
font-size: 13px;
color: var(--ctw-primary);
}
.custorm-tc-wat-about__address {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
padding: 13px 0 0;
font-size: 13px;
line-height: 1.6;
color: var(--ctw-text);
border-top: 1px dashed var(--ctw-border);
}
.custorm-tc-wat-about__address i {
flex: 0 0 auto;
margin-top: .28em;
font-size: 13px;
color: var(--ctw-primary);
}
/* --------------------------------------------------------------------------
4. KHONG GIAN (element [ux_gallery])
-------------------------------------------------------------------------- */
.custorm-tc-wat-gallery {
padding: 30px 0;
}
/* Ux_gallery luon in ra 1 the .box-text rong -> an di */
.custorm-tc-wat-gallery__grid .box-text {
display: none;
}
.custorm-tc-wat-gallery__grid .box-image {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--ctw-shadow);
}
.custorm-tc-wat-gallery__grid .box-image img {
transition: transform .45s ease;
}
.custorm-tc-wat-gallery__grid .gallery-box:hover .box-image img {
transform: scale(1.07);
}
.custorm-tc-wat-gallery .button {
margin-top: 14px;
}
/* --------------------------------------------------------------------------
5. FEEDBACK
-------------------------------------------------------------------------- */
.custorm-tc-wat-feedback {
padding: 30px 0;
}
.custorm-tc-wat-feedback__item > .col-inner {
height: 100%;
padding: 20px;
background: #fff;
border: 1px solid var(--ctw-border);
border-radius: var(--ctw-radius);
box-shadow: var(--ctw-shadow);
}
/* Hang avatar + ten, khong de row_inner day khoang cach */
.custorm-tc-wat-feedback__head {
margin-bottom: 6px !important;
}
.custorm-tc-wat-feedback__head > .col {
padding-bottom: 0;
}
.custorm-tc-wat-feedback__avatar {
max-width: 52px;
}
.custorm-tc-wat-feedback__avatar .img-inner {
border-radius: 50%;
}
.custorm-tc-wat-feedback__name {
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: #35505a;
}
.custorm-tc-wat-feedback__stars {
display: block;
font-size: 13px;
letter-spacing: 1px;
color: var(--ctw-star);
white-space: nowrap;
}
.custorm-tc-wat-feedback__text {
margin: 0;
font-size: 14px;
line-height: 1.75;
color: var(--ctw-text);
}
/* --------------------------------------------------------------------------
6. UU DAI DAC BIET
-------------------------------------------------------------------------- */
.custorm-tc-wat-promo {
padding: 20px 0 60px;
}
.custorm-tc-wat-promo__wrap > .col-inner {
position: relative;
}
/* Anh qua tang trang tri goc phai (tuy chon) */
.custorm-tc-wat-promo__gift {
position: absolute;
right: 24px;
bottom: -6px;
z-index: 3;
pointer-events: none;
}
.custorm-tc-wat-promo__box {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 34px;
padding: 30px 46px;
border-radius: 16px;
background: linear-gradient(100deg, var(--ctw-primary) 0%, #23aac6 55%, var(--ctw-primary) 100%);
box-shadow: 0 12px 30px rgba(26, 156, 184, .3);
color: #fff;
text-align: center;
}
.custorm-tc-wat-promo__box::before,
.custorm-tc-wat-promo__box::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
pointer-events: none;
}
.custorm-tc-wat-promo__box::before {
top: -110px;
left: -60px;
}
.custorm-tc-wat-promo__box::after {
bottom: -130px;
right: -40px;
}
.custorm-tc-wat-promo__col {
position: relative;
z-index: 2;
}
.custorm-tc-wat-promo__title {
margin: 0;
font-size: 27px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
text-transform: uppercase;
}
.sli-tc-wat .flickity-page-dots .dot{
border: 3px solid #009bb5;
}
.dln-scc-tc-wat span{
color: #009bb5;
}
.custorm-tc-wat-promo__subtitle {
margin: 4px 0 0;
font-size: 14px;
color: rgba(255, 255, 255, .9) !important;
}
.custorm-tc-wat-promo__discount {
display: flex;
align-items: center;
gap: 14px;
}
.custorm-tc-wat-promo__label {
max-width: 90px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-align: left;
}
.custorm-tc-wat-promo__percent {
font-size: 46px;
font-weight: 700;
line-height: 1;
}
.custorm-tc-wat-promo__percent sup {
font-size: 22px;
top: -.5em;
}
.custorm-tc-wat-promo__note {
max-width: 90px;
font-size: 14px;
line-height: 1.4;
text-align: left;
}
/* --------------------------------------------------------------------------
7. RESPONSIVE
Moc breakpoint theo dung Flatsome:
<= 849px = medium (span__md) - tablet
<= 549px = small (span__sm) - dien thoai
-------------------------------------------------------------------------- */
/* ===== Laptop nho / tablet ngang ===== */
@media (max-width: 1200px) {
.custorm-tc-wat-service__body { padding: 38px 16px 22px; }
.custorm-tc-wat-service__title { font-size: 16px; letter-spacing: 1px; }
.custorm-tc-wat-service__desc { font-size: 13px; }
}
/* ===== Tablet: cac cot bat dau xep chong ===== */
@media (max-width: 849px) {
/* -- Tieu de section -- */
.custorm-tc-wat-heading { margin-bottom: 26px; }
.custorm-tc-wat-heading__text::before,
.custorm-tc-wat-heading__text::after { width: 36px; }
.custorm-tc-wat-heading__text {
font-size: 20px;
letter-spacing: 2px;
white-space: normal;
}
/* -- Hero: 4 dac diem thanh the trang, xep luoi 2x2, icon trai - chu phai -- */
.custorm-tc-wat-hero__features {
grid-template-columns: repeat(2, 1fr);
gap: 0;
max-width: none;
margin-top: 18px;
padding: 4px 6px;
background: #fff;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(0, 155, 181, .12);
}
.custorm-tc-wat-hero__feature {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
text-align: left;
}
/* Duong ke ngan tao luoi chu thap giua 4 o */
.custorm-tc-wat-hero__feature:nth-child(odd) {
border-right: 1px solid var(--ctw-border);
}
.custorm-tc-wat-hero__feature:nth-child(1),
.custorm-tc-wat-hero__feature:nth-child(2) {
border-bottom: 1px solid var(--ctw-border);
}
.custorm-tc-wat-hero__feature-icon {
width: 42px;
height: 42px;
margin: 0;
flex: 0 0 auto;
font-size: 17px;
}
.custorm-tc-wat-hero__feature-text {
font-size: 12px;
text-align: left;
}
/* -- Dich vu -- */
.custorm-tc-wat-services { padding: 40px 0 16px; }
/* -- Gioi thieu -- */
.custorm-tc-wat-about { padding: 20px 0; }
.custorm-tc-wat-about__box { padding: 24px; }
.custorm-tc-wat-about__text p { font-size: 14px; line-height: 1.75; }
.custorm-tc-wat-stats__item { padding: 0 14px; }
.custorm-tc-wat-stats__value { font-size: 20px; }
/* Chu trong hop showroom nho lai cho vua chieu cao banner */
.custorm-tc-wat-about__card-title { font-size: 13px; margin-bottom: 10px; }
.custorm-tc-wat-about__list li { font-size: 12px; margin-bottom: 6px; }
.custorm-tc-wat-about__address { font-size: 12px; padding-top: 10px; }
/* Cot trai co padding-right 20px de tach 2 cot; khi da xep chong thi bo di.
Phai dung !important vi Flatsome in ra "#col-xxxx > .col-inner" (ID, 110). */
.custorm-tc-wat-about__box > .col:first-child > .col-inner { padding-right: 0 !important; }
/* -- Khong gian / Feedback -- */
.custorm-tc-wat-gallery { padding: 20px 0; }
.custorm-tc-wat-feedback { padding: 20px 0; }
/* -- Uu dai -- */
.custorm-tc-wat-promo { padding: 10px 0 40px; }
.custorm-tc-wat-promo__box { flex-direction: column; gap: 20px; padding: 28px 20px; }
.custorm-tc-wat-promo__title { font-size: 22px; }
.custorm-tc-wat-promo__discount { justify-content: center; }
.custorm-tc-wat-promo__label,
.custorm-tc-wat-promo__note { max-width: none; text-align: center; }
.custorm-tc-wat-promo__percent { font-size: 38px; }
.custorm-tc-wat-promo__gift { display: none; }
}
/* ===== Rieng khoang tablet 550-849px =====
Trang chu co 2 banner hero: banner NGANG (anh spa_image.jpg 1672x941,
visibility "hide-for-medium") va banner DOC (anh spa_collage.png 941x1672,
visibility "show-for-medium"). Flatsome coi moi may <= 849px la "medium"
nen tablet dang an banner ngang va lay banner doc - keo anh doc ra khung
ngang thi no phong to het co, chu chim vao anh.
=> Khoang nay tra ve dung banner ngang.
Muon lam "sach" hon thi sua truc tiep o UX Builder: banner doc doi thanh
"Show for small screen", banner ngang doi thanh "Hide for small screen",
luc do co the xoa block nay. */
@media (min-width: 550px) and (max-width: 849px) {
.custorm-tc-wat-hero.show-for-medium {
display: none !important;
}
.custorm-tc-wat-hero.hide-for-medium {
display: block !important;
padding-top: 62% !important;
}
/* Text_box cua banner ngang co margin-left: -80px (thu thut ra le trai
cho ban desktop rong). O khung tablet no day chu loi han ra ngoai man
hinh, nen bo di. */
.custorm-tc-wat-hero.hide-for-medium .custorm-tc-wat-hero__box {
margin-left: 0 !important;
}
}
/* ===== Dien thoai ===== */
@media (max-width: 549px) {
.custorm-tc-wat-heading { margin-bottom: 20px; }
.custorm-tc-wat-heading__text::before,
.custorm-tc-wat-heading__text::after { width: 20px; }
.custorm-tc-wat-heading__text { font-size: 18px; letter-spacing: 1.5px; }
/* -- Hero --
Cau truc can giua + day cum nut xuong day da xu ly o block <=849px.
O day la phan rieng cho dien thoai: chieu cao banner va co chu. */
/* Anh nen mobile spa_collage.png = 941 x 1672 (ty le 1 : 1.777).
Flatsome mac dinh de background-size: cover -> anh phai phong to theo
chieu cao roi cat bot 2 ben, cum anh tron to qua khien nut de len anh.
=> Ep anh vua dung BE NGANG (100% auto) va can giua, phan du tren/duoi
to bang #cae7f6 - chinh la mau 2 mep anh (mep tren #cce8f7, mep duoi
#c8e6f6, lech 2-4/255 nen mat thuong khong thay duong noi).
Chieu cao 220% la vua du chia 3 tang nhu ban thiet ke:
tren = MAHAMI / SPA & NAIL STUDIO / mo ta
giua = cum anh tron + hoa la (nam san trong file anh)
duoi = 2 nut + the 4 dac diem
Phai dung !important vi Flatsome in padding-top va background-position
ra theo ID (#banner-xxx). Doi lai o "Height > Mobile" trong UX Builder
se khong con tac dung - muon doi chieu cao thi sua o day. */
.custorm-tc-wat-hero.show-for-medium {
padding-top: 220% !important;
background-color: #cae7f6;
}
.custorm-tc-wat-hero.show-for-medium .bg {
background-size: 100% auto !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-color: #cae7f6;
}
/* Cho text_box phu kin chieu cao banner de co the day nhom NUT + DAC DIEM
xuong day, chua khoang trong o giua cho cum anh tron lo ra.
Dong thoi bo margin am -80px va vi tri x/y cua ban desktop. */
.custorm-tc-wat-hero .custorm-tc-wat-hero__box {
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 5% 6% 6% !important;
}
/* Flatsome in ra 3 lop: .text-box > .text-box-content > .text-inner
va class .text-left (do text_align="left") nam o LOP TRONG CUNG.
=> flex + can giua phai dat o .text-inner; dat o .text-box-content la
khong an gi ca (no chi co dung 1 con). */
.custorm-tc-wat-hero__box .text-box-content {
height: 100%;
}
.custorm-tc-wat-hero__box .text-inner {
display: flex;
flex-direction: column;
height: 100%;
text-align: center;
}
/* Co chu do theo be ngang man hinh (vw) chu khong phai px co dinh, nen
may to may nho deu giu dung ty le nhu ban thiet ke.
Subtitle 7.6vw la muc vua du de "SPA & NAIL STUDIO" nam gon 1 dong. */
.custorm-tc-wat-hero .custorm-tc-wat-hero__title {
font-size: 12.6vw;
letter-spacing: .05em;
}
.custorm-tc-wat-hero .custorm-tc-wat-hero__subtitle {
margin-top: .06em;
font-size: 7.6vw;
letter-spacing: .04em;
}
.custorm-tc-wat-hero__desc {
max-width: 20em;
margin: .8em auto 0;
font-size: clamp(13px, 3.4vw, 18px);
}
/* 2 nut xep doc, keo full be ngang cho de bam.
3 class de thang ".banner .button" cua Flatsome (xem ghi chu o tren). */
.custorm-tc-wat-hero .text-inner .button {
display: block;
width: 100%;
margin: 10px 0 0;
font-size: clamp(13px, 3.4vw, 17px);
line-height: 2.8em;
min-height: 0;
}
/* Dat lai sau rule .button o tren: shorthand "margin" cua no ghi de
margin-top:auto khai bao o block <=849px, mat luon hieu ung day xuong. */
.custorm-tc-wat-hero .custorm-tc-wat-hero__desc + p,
.custorm-tc-wat-hero .custorm-tc-wat-hero__desc + .button {
margin-top: auto;
}
/* The 4 dac diem 2x2 (ke thua tu <=849px), thu gon cho vua tang duoi */
.custorm-tc-wat-hero__features { margin-top: 16px; }
.custorm-tc-wat-hero__feature { padding: clamp(9px, 2.6vw, 14px) clamp(8px, 2.4vw, 14px); gap: clamp(7px, 2.2vw, 12px); }
.custorm-tc-wat-hero__feature-icon {
width: clamp(30px, 7.8vw, 40px);
height: clamp(30px, 7.8vw, 40px);
font-size: clamp(12px, 3.3vw, 17px);
}
.custorm-tc-wat-hero__feature-text { font-size: clamp(10.5px, 2.8vw, 13px); }
/* -- Dich vu: 2 the / hang -- */
.custorm-tc-wat-services { padding: 32px 0 10px; }
.custorm-tc-wat-services .col { padding-bottom: 22px; }
.custorm-tc-wat-service__body { padding: 32px 12px 18px; }
.custorm-tc-wat-service__icon { top: -22px; width: 44px; height: 44px; font-size: 18px; }
.custorm-tc-wat-service__title { font-size: 14px; letter-spacing: .5px; margin-bottom: 8px; }
.custorm-tc-wat-service__desc { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.custorm-tc-wat-service__link { font-size: 13px; }
.custorm-tc-wat-service__link i { font-size: 12px; }
/* -- Gioi thieu -- */
.custorm-tc-wat-about__box { padding: 20px 16px; }
.custorm-tc-wat-stats { justify-content: space-between; }
.custorm-tc-wat-stats__item { flex: 1 1 0; padding: 0 4px; }
.custorm-tc-wat-stats__item + .custorm-tc-wat-stats__item::before { display: none; }
.custorm-tc-wat-stats__value { font-size: 17px; gap: 5px; }
.custorm-tc-wat-stats__value i { font-size: 15px; }
.custorm-tc-wat-stats__label { font-size: 11px; line-height: 1.35; }
.custorm-tc-wat-about .button { display: block; width: 100%; margin-right: 0; }
/* -- Feedback -- */
.custorm-tc-wat-feedback__item > .col-inner { padding: 16px; }
.custorm-tc-wat-feedback__text { font-size: 13px; }
/* -- Uu dai -- */
.custorm-tc-wat-promo { padding: 6px 0 30px; }
.custorm-tc-wat-promo__box { padding: 24px 16px; }
.custorm-tc-wat-promo__title { font-size: 19px; }
.custorm-tc-wat-promo__percent { font-size: 34px; }
.custorm-tc-wat-promo__col .button { display: block; width: 100%; margin-right: 0; }
}