/* ==========================================================================
   AnNam Spa – Trang chủ (UX Builder / Flatsome)
   Prefix: trang-chu-wat  |  Không đụng tới header & footer.

   Design token lấy theo bản chạy thật annamspa.vn:
     nâu chủ đạo #723301 · cam #fba931 · cam đậm #f89f02 · vàng #f4c117
     font Roboto Condensed · bo góc chữ ký 30px 0 30px 0
     tiêu đề section có đường line (logo AnNam) ở dưới, 116x25
   ========================================================================== */

:root {
	--trang-chu-wat-brown: #B89367;
	--trang-chu-wat-brown-soft: #502306;
	--trang-chu-wat-gold: #fba931;
	--trang-chu-wat-gold-btn: #f89f02;
	--trang-chu-wat-gold-light: #f4c117;
	--trang-chu-wat-text: #444;
	--trang-chu-wat-muted: #666;
	--trang-chu-wat-radius: 30px 0 30px 0;
	--trang-chu-wat-line: url("../../trang-chu-wat/img/logo-css.png");
	--trang-chu-wat-line-vang: url("../../trang-chu-wat/img/logo-css.png");
}

/* --------------------------------------------------------------------------
   Tiêu đề section + đường line dưới tiêu đề
   -------------------------------------------------------------------------- */

/* Style đặt trên chính element, KHÔNG chỉ trên <p>: tuỳ nội dung mà
   [ux_text] có bọc <p> hay không (nếu bắt đầu bằng thẻ inline thì không bọc). */
.trang-chu-wat-heading {
	position: relative;
	display: block;
	margin: 0;
	padding-bottom: 40px;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--trang-chu-wat-brown);
}

.trang-chu-wat-heading p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Đường line = LINE-1.png (line – logo AnNam – line) */
.trang-chu-wat-heading:before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 116px;
	height: 25px;
	background-image: var(--trang-chu-wat-line);
	background-repeat: no-repeat;
	background-size: contain;
}

.trang-chu-wat-heading--left:before {
	left: 0;
}

.trang-chu-wat-heading--center {
	text-align: center;
}

.trang-chu-wat-heading--center:before {
	left: 50%;
	transform: translateX(-50%);
}

/* Trên nền nâu: chữ trắng, line đảo thành trắng.
   Có file LINE bản vàng thì thay `--trang-chu-wat-line` và bỏ filter đi. */
.trang-chu-wat-heading--light {
	color: #fff;
	text-shadow: 4px 4px 8px rgba(118, 50, 0, 0.8);
}

.trang-chu-wat-heading--light:before {
	filter: brightness(0) invert(1);
}

/* Tiêu đề nhỏ (cột video / tin tức) */
.trang-chu-wat-heading--small {
	padding-bottom: 34px;
	font-size: 22px;
}

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */

a.button.trang-chu-wat-btn,
.trang-chu-wat-btn.button {
	background-color: var(--trang-chu-wat-gold-btn);
	color: #fff;
	border-radius: 99px;
	padding: 0 28px;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: none;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

a.button.trang-chu-wat-btn:hover,
.trang-chu-wat-btn.button:hover {
	background-color: #2C4022 ;
	box-shadow: none;
}

.trang-chu-wat-btn--center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   1. Hero slider
   -------------------------------------------------------------------------- */

.trang-chu-wat-hero-title p {
	margin: 0 0 8px;
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 4px 4px 8px rgba(118, 50, 0, 0.8);
}

.trang-chu-wat-hero-sub p {
	margin: 0 0 20px;
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: 2px 2px 6px rgba(118, 50, 0, 0.75);
}

.trang-chu-wat-hero .flickity-page-dots {
	bottom: 16px;
}

.trang-chu-wat-hero .flickity-page-dots .dot {
	width: 10px;
	height: 10px;
	background-color: transparent;
	border: 3px solid #fff;
	opacity: 1;
}

.trang-chu-wat-hero .flickity-page-dots .dot.is-selected {
	background-color: #fff;
}

/* --------------------------------------------------------------------------
   2. Về chúng tôi
   -------------------------------------------------------------------------- */

/* Ảnh nền set trong UX Builder (bg="4839", bg_pos="0% 80%").
   Bản thật để ảnh nguyên cỡ làm hoạ tiết góc dưới-trái, KHÔNG phủ kín.
   Flatsome ép `background-size: cover !important` qua class .bg-fill nên
   phải ghi đè lại, nếu không ảnh bị kéo giãn và bợt màu (rõ nhất trên mobile). */
.trang-chu-wat-about .section-bg {
	background-size: auto !important;
}

.trang-chu-wat-about-text p {
	margin-bottom: 14px;
	color: var(--trang-chu-wat-muted);
	font-size: 15px;
	line-height: 1.8;
}

.trang-chu-wat-about-text p:first-child {
	color: var(--trang-chu-wat-brown);
	font-weight: 600;
}

.trang-chu-wat-about-img img {
	border-radius: var(--trang-chu-wat-radius);
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Dịch vụ + thư viện không gian (cùng một section nền nâu)
   -------------------------------------------------------------------------- */

.trang-chu-wat-service .col-inner {
	position: relative;
	overflow: hidden;
}

.trang-chu-wat-service .box-image {
	border-radius: 0;
}

.trang-chu-wat-service .box-text {
	background-color: #fff;
	padding: 0;
}

.trang-chu-wat-service .box-text h4 {
	margin: 0;
	padding: 5px;
	background-color: #FFEABF;
	color: var(--trang-chu-wat-brown-soft);
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
}

/* Hàng slider mobile: mô tả nằm thẳng trong box-text (không có lớp phủ hover,
   vì mobile không rê chuột được). Giống cách bản thật dựng. */
.trang-chu-wat-service .box-text p {
	margin: 0;
	padding: 12px 14px 14px;
	color: var(--trang-chu-wat-muted);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	text-transform: none;
}

/* Lớp phủ hiện khi rê chuột */
.trang-chu-wat-service-hover {
	position: absolute;
	left: 5px;
	top: 5px;
	right: 5px;
	bottom: 5px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.73);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.trang-chu-wat-service .col-inner:hover .trang-chu-wat-service-hover {
	opacity: 1;
	cursor: pointer;
}

.trang-chu-wat-service-hover h5 {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.trang-chu-wat-service-hover h6 {
	display: block;
	margin: 0 0 10px;
	color: var(--trang-chu-wat-gold);
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.trang-chu-wat-service-hover p {
	margin: 0 0 14px;
	padding: 0 10px;
	color: #fff;
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
}

.trang-chu-wat-service-hover p a {
	display: inline-block;
	width: 160px;
	padding: 10px;
	border: 1px solid #B89367;
	border-radius: 40px;
	color: #fff !important;
	font-size: 13px;
	text-transform: initial;
	transition: background-color 0.3s ease;
}

.trang-chu-wat-service-hover p a:hover {
	background-color: #2C4022;
	border: none;
}

/* Đoạn giới thiệu dưới tiêu đề "AnNam Spa – Không gian thư giãn…".
   Nằm trên nền nâu của section Dịch vụ nên chữ phải sáng. */
.trang-chu-wat-intro {
	max-width: 860px;
	margin: 0 auto;
}

.trang-chu-wat-intro p {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 15px;
	line-height: 1.75;
}

.trang-chu-wat-intro p:last-child {
	margin-bottom: 0;
}

.trang-chu-wat-intro strong {
	color: #fff;
}

/* Thư viện không gian — row của [ux_image], không dùng [ux_gallery] nữa
   nên không còn caption đè lên hình. */
.trang-chu-wat-thuvien img {
	border-radius: var(--trang-chu-wat-radius);
}

/* --------------------------------------------------------------------------
   4. Cam kết từ AnNam Spa
   -------------------------------------------------------------------------- */

/* Viền do [col border="3px 3px 3px 1px" border_color=""] sinh ra div .is-border,
   hover do depth_hover="4" -> .box-shadow-4-hover. Đều là của Flatsome. */
.trang-chu-wat-commit-card .col-inner {
	height: 100%;
	border-radius: var(--trang-chu-wat-radius);
}

.trang-chu-wat-commit-card .is-border {
	border-radius: inherit;
}

/* Bản thật đặt font-size 0.9rem + canh giữa cho nội dung card */
.trang-chu-wat-commit-card {
	font-size: 0.9rem;
	text-align: center;
}

/* Neo cuộn đặt bằng <span> trong nội dung, vì UX Builder xoá _id mỗi lần lưu. */
.trang-chu-wat-anchor {
	display: block;
	position: relative;
	top: -90px;
	height: 0;
	visibility: hidden;
}

.trang-chu-wat-commit-card h3 {
	margin: 0;
	color: var(--trang-chu-wat-brown);
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.trang-chu-wat-commit-card hr {
	width: 46px;
	height: 2px;
	margin: 12px auto;
	border: 0;
	background-color: var(--trang-chu-wat-gold);
}

.trang-chu-wat-commit-card p {
	margin: 0;
	color: var(--trang-chu-wat-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. Banner "Chốn bình yên khơi nguồn năng lượng mới"
   -------------------------------------------------------------------------- */

/* Logo là <img> width cố định 400px, không scale theo % container. */
img.trang-chu-wat-cta-logo {
	display: inline-block;
	width: 400px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.trang-chu-wat-cta-title p {
	margin: 0 0 12px;
}

.trang-chu-wat-cta-title h3 {
	margin: 0;
	color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 34px;
	line-height: 1.3;
	font-weight: 700;
	text-shadow: 4px 4px 8px rgba(118, 50, 0, 0.8);
}

@media only screen and (max-width: 849px) {
	img.trang-chu-wat-cta-logo {
		width: 260px;
	}
}

/* --------------------------------------------------------------------------
   6. Không gian tại AnNam Spa + Tin làm đẹp
   -------------------------------------------------------------------------- */

/* Tiêu đề có icon bên trái — dùng [featured_box img="4903" img_width="35"]
   giống bản thật, thay cho ux_text + đường LINE.

   Flatsome để .icon-box-left là flex nhưng KHÔNG set align-items nên mặc định
   là stretch -> icon và chữ canh mép trên, nhìn lệch. Thêm center để cân.
   Khoảng cách icon–chữ đã có sẵn từ .icon-box-img + .icon-box-text
   { padding-left: 1em }, không cần thêm margin. */
.trang-chu-wat-icon-title.icon-box-left {
	align-items: center;
}

/* Flatsome đẩy ảnh icon xuống 0.2em, bỏ đi cho thẳng hàng với chữ. */
.trang-chu-wat-icon-title .icon-box-img img {
	padding-top: 0;
	display: block;
}

.trang-chu-wat-icon-title h3 {
	margin: 0;
	color: var(--trang-chu-wat-brown);
	font-family: "Roboto Condensed", sans-serif;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.trang-chu-wat-video {
	border-radius: var(--trang-chu-wat-radius);
	overflow: hidden;
}

.trang-chu-wat-posts .col.post-item .col-inner {
	border-radius: var(--trang-chu-wat-radius);
	overflow: hidden;
}

.trang-chu-wat-posts .post-item .box-image {
	border-radius: 10px;
}

.trang-chu-wat-posts .post-item .post-title {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--trang-chu-wat-brown);
}

.trang-chu-wat-posts .post-item .from_the_blog_excerpt {
	font-size: 13px;
	line-height: 1.65;
	color: var(--trang-chu-wat-muted);
}

/* --------------------------------------------------------------------------
   7. Phản hồi khách hàng
   -------------------------------------------------------------------------- */

.trang-chu-wat-review-summary-inner {
	padding: 18px 16px;
	background-color: #fff;
	border: 1px solid #cfcfcf;
}

.trang-chu-wat-review-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.trang-chu-wat-review-brand img {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
}

.trang-chu-wat-review-brand span {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--trang-chu-wat-brown);
}

.trang-chu-wat-stars {
	margin-bottom: 8px;
	color: #f5c218;
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
}

.trang-chu-wat-review-count {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--trang-chu-wat-muted);
}

.trang-chu-wat-review-link {
	display: inline-block;
	padding: 8px 18px;
	background-color: #B89367;
	border-radius: 99px;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
}

.trang-chu-wat-review-link:hover {
	background-color: #2C4022;
}

/* Card đánh giá — style đặt trên .col-inner như bản thật (.danh-gia .col-inner) */
.trang-chu-wat-danhgia .col-inner {
	padding: 9px;
	background-color: #fff;
	border: 1px solid #cfcfcf;
}

.trang-chu-wat-danhgia h3 {
	margin: 0 0 8px;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--trang-chu-wat-brown);
}

.trang-chu-wat-danhgia p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--trang-chu-wat-muted);
}

.trang-chu-wat-review-foot {
	margin-top: 4px;
}

.trang-chu-wat-review-more {
	font-size: 13px;
	font-weight: 600;
	color: var(--trang-chu-wat-brown) !important;
}

.trang-chu-wat-review-more:hover {
	color: var(--trang-chu-wat-gold-btn) !important;
}

/* --------------------------------------------------------------------------
   Slider dùng [ux_slider] gốc của Flatsome. Màu và kiểu dot do
   slider-nav-outside / slider-nav-light|dark / slider-nav-dots-simple của theme
   lo — không override. Chỉ chừa thêm chỗ bên dưới vì Flatsome đặt dot
   position:absolute; bottom:0 nên mặc định nó đè lên đáy nội dung.
   -------------------------------------------------------------------------- */

.trang-chu-wat-slider {
	padding-bottom: 28px;
}

/* --------------------------------------------------------------------------
   8. Hệ thống chi nhánh
   Dùng cho UX Block riêng (trang-chu-wat-block-chi-nhanh.txt), không nằm trên
   trang chủ. CSS enqueue toàn site nên chèn block ở trang nào cũng đúng.
   -------------------------------------------------------------------------- */

/* Thẻ chi nhánh: nền trắng + viền 2px do [col bg_color/border] của Flatsome lo.
   Bản thật để góc vuông, KHÔNG bo 30px như các card khác.
   KHÔNG set padding ở đây — UX Builder sinh CSS theo selector ID
   (#col-xxx > .col-inner) nên luôn thắng class, phải đặt padding trong shortcode. */
.trang-chu-wat-branch .col-inner {
	height: 100%;
}

/* Ảnh chi nhánh import vào có metadata sizes rỗng nên WordPress trả về file gốc
   600x600 thay vì bản 300x300 -> phải ép vừa khung 120px, nếu không sẽ tràn ra
   ngoài viền thẻ. */
.trang-chu-wat-branch .icon-box-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tên chi nhánh: gạch vàng ngắn phía trước, giống .line-tit của bản thật */
.trang-chu-wat-branches .line-tit {
	position: relative;
	display: block;
	margin: 0 0 8px;
	padding-left: 40px;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 18px;
	font-weight: 900;
	color: var(--trang-chu-wat-brown);
}

.trang-chu-wat-branches .line-tit:before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 30px;
	height: 4px;
	background-color: #ffab00;
}

/* Dòng địa chỉ + nhãn nút liên hệ: bản thật để mặc định của Flatsome,
   không ghi đè cỡ chữ / màu — chỉ chỉnh khoảng cách. */
.trang-chu-wat-branch .icon-box-text div {
	line-height: 1.6;
}

.trang-chu-wat-branch .stack .icon-box-text p {
	margin: 6px 0 0;
	line-height: 1.2;
}

.trang-chu-wat-branch .stack a.plain:hover .icon-box-img {
	transform: translateY(-2px);
}

.trang-chu-wat-branch .stack .icon-box-img {
	transition: transform 0.25s ease;
}

/* Tiêu đề khối chi nhánh dùng [title] gốc của Flatsome (giống bản thật), nên
   đường LINE gắn vào .section-title-main thay vì .trang-chu-wat-heading. */
.trang-chu-wat-title .section-title {
	border-bottom: 0;
	justify-content: center;
}

.trang-chu-wat-title .section-title b {
	display: none;
}

.trang-chu-wat-title .section-title-main {
	position: relative;
	margin: 0;
	padding: 0 0 40px;
	border-bottom: 0;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 4px 4px 8px rgba(118, 50, 0, 0.8);
}

/* Dùng LINE bản vàng (line-vang.png) — không cần filter đảo màu như bản nâu. */
.trang-chu-wat-title .section-title-main:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 116px;
	height: 25px;
	transform: translateX(-50%);
	background-image: var(--trang-chu-wat-line-vang);
	background-repeat: no-repeat;
	background-size: contain;
}

/* Icon ghim trước "Địa chỉ" — font fl-icons chỉ áp cho thẻ <i> */
.trang-chu-wat-branch .icon-map-pin-fill {
	margin-right: 4px;
	color: var(--trang-chu-wat-gold);
}

/* Block chi nhánh đang nằm trong vùng widget của footer nên bị bọc thêm
   .row (có max-width container) + .col (padding 0 15px) -> nội dung bị bó hẹp,
   card nhỏ hơn bản thật, lộ rõ nhất trên di động.
   Bản thật đặt section thẳng trong footer nên chiếm trọn bề ngang.
   Gỡ phần bó đó, chỉ nhắm đúng row/col đang chứa block này. */
.footer-widgets .row:has(> .col > .trang-chu-wat-branches) {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* Chừa lại 5px mỗi bên để lề trái bằng đúng bản thật (16px ở khổ 414px). */
.footer-widgets .col:has(> .trang-chu-wat-branches) {
	padding: 0 5px;
}

/* Ảnh nền vùng widget Footer 1 đặt trong Customizer chỉ sinh ra background-image,
   không kèm size/position/repeat — nên ảnh 1920x1257 bị lặp ở cỡ gốc.
   Bản thật phủ kín và canh 0% 45%, chỉnh lại cho khớp. */
.footer-1 {
	background-size: cover;
	background-position: 0% 45%;
	background-repeat: no-repeat;
}

/* Bản đồ */
.trang-chu-wat-map p {
	margin-bottom: 0;
}

.trang-chu-wat-map iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 849px) {
	.trang-chu-wat-heading {
		padding-bottom: 34px;
		font-size: 25px;
		text-align: center;
	}

	.trang-chu-wat-heading--left:before {
		left: 50%;
		transform: translateX(-50%);
	}

	.trang-chu-wat-heading--small {
		font-size: 20px;
	}

	.trang-chu-wat-hero-title p {
		font-size: 21px;
	}

	.trang-chu-wat-hero-sub p {
		font-size: 13px;
	}

	.trang-chu-wat-cta-title p {
		font-size: 22px;
	}

	.trang-chu-wat-branch .col-inner {
		padding: 16px;
	}

	.trang-chu-wat-branches .line-tit {
		font-size: 16px;
	}
}