/* ==========================================================
   TRẠM 24H — lớp phủ thương hiệu lên khung mẫu Montoya
   (nạp SAU style.css của mẫu; không sửa file gốc của mẫu)
   ========================================================== */

@font-face {
	font-family: 'TRAM24 Standard';
	src: url('../fonts/TRAM24-Standard-Medium.woff2') format('woff2'),
	     url('../fonts/TRAM24-Standard-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--pink: #f92877;
	--pink2: #fb3a7c;
	--dark: #111111;
	--grey: #2a292a;
	--mat: #29c6f0;
	--gion: #f5c518;
	--protein: #4cde6a;
	--gau: #f92877;
	--white: #f4f4f4;   /* trắng thương hiệu */
}

/* ---------- Font: nội dung Be Vietnam Pro, tiêu đề TRAM24 Standard ---------- */
html, body, input, textarea, select, button {
	font-family: 'Be Vietnam Pro', sans-serif;
}
.primary-font-title,
.fullscreen-menu .flexnav > li > a,
.flexnav > li > a {
	font-family: 'TRAM24 Standard', 'Be Vietnam Pro', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Font TRAM24 rộng hơn Six Caps của mẫu → thu cỡ, nới dòng cho dấu tiếng Việt */
.hero-title {
	font-size: calc(1rem + 15vw);
	line-height: 1.12;
	padding-top: 0.08em;
}
.next-hero-title {
	font-size: calc(1rem + 11vw);
	line-height: 1.12;
	padding-top: 0.08em;
}
.big-title {
	font-size: calc(1rem + 5vw);
	line-height: 1.12;
	padding-top: 0.06em;
}
.overlapping-image .slide-caption .slide-title {
	font-size: calc(1rem + 4.2vw);
	line-height: 1.15;
	padding-top: 0.06em;
}
.list-rotator.primary-font-title li,
.list-rotator li {
	font-size: calc(1rem + 7vw);
	line-height: 1.15;
}
.fullscreen-menu .flexnav > li > a {
	font-size: calc(1rem + 5.5vw);
	line-height: 1.15;
}
.has-mask-fill { padding-top: 0.06em; }

/* ---------- Màu nhấn hồng ---------- */
.tram-pink { color: var(--pink) !important; }
::selection { background: var(--pink); color: #fff; }

.tram-eyebrow {
	color: var(--pink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.tram-sub {
	max-width: 720px;
	margin: 24px auto 0;
	opacity: 0.8;
}
.tram-sub-dark {
	max-width: 420px;
	margin-top: 24px;
	color: var(--dark);
	font-weight: 500;
}
.tram-lead { font-size: 18px; line-height: 1.7; }
.tram-lead strong { color: var(--pink); }
.tram-img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Danh sách 3 ý trong Giới thiệu */
.tram-ticks { margin-top: 24px; }
.tram-ticks .flex-list-left { color: var(--pink); flex: 0 0 60px; }

/* Cột thứ 3 (số thứ tự / icon) của danh sách dòng */
.flex-list-right { color: var(--pink); }

/* ---------- Hệ sinh thái trên nền hồng ---------- */

.tram-mascot {
	float: right;
	width: 120px;
	height: auto;
	margin: 0 0 12px 16px;
}
.accordion-content::after { content: ""; display: table; clear: both; }
.tram-3d { margin-top: 40px; }

/* ---------- Thanh toán ---------- */
.tram-promo {
	font-family: 'TRAM24 Standard', sans-serif;
	font-size: calc(1rem + 1.6vw);
	line-height: 1.3;
	text-transform: uppercase;
}
.box-icon { color: var(--pink); }

/* ---------- TRẠM LO từ A–Z: 5 ô chia đều ---------- */
.tram-az {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}
@media (max-width: 1024px) { .tram-az { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tram-az { grid-template-columns: 1fr; } }

/* ---------- Form liên hệ ---------- */
.tram-form select {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	padding: 14px 0;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.tram-form select option { background: var(--dark); color: #fff; }
.tram-form .name-box.tram-select,
.tram-form .email-box.tram-select { margin-top: 40px; }
.tram-form .message-box { margin-top: 40px; }
.tram-form-err {
	clear: both;
	color: var(--pink);
	min-height: 24px;
	padding-top: 16px;
	margin: 0;
}
.tram-form-note { clear: both; font-size: 13px; opacity: 0.6; margin-top: 24px; }
.tram-form-ok { display: none; padding: 40px 0; }
.tram-form-ok.show { display: block; }
.tram-form-ok h3 { color: var(--pink); font-size: 48px; }

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
	.hero-title { font-size: calc(1rem + 13vw); }
	.big-title { font-size: calc(1rem + 7vw); }
	.one_half, .one_fourth { width: 100%; margin-right: 0; margin-bottom: 32px; }
	.tram-form .name-box, .tram-form .email-box { width: 100%; margin-right: 0; }
	.tram-mascot { width: 90px; }
}

/* ---------- Sửa sau lần xem thử 1 ---------- */
/* Chữ nhấn hồng trong tiêu đề có hiệu ứng "tô dần" */
.dark-section .has-mask-fill.tram-pink > span,
.light-content .has-mask-fill.tram-pink > span {
	-webkit-text-fill-color: rgba(249,40,119,0.15);
	background-image: linear-gradient(#f92877, #f92877);
}
.light-content .light-section .has-mask-fill > span {
	background-image: linear-gradient(#111111, #111111);
}

/* 3 ý trong Giới thiệu */
ul.tram-ticks { list-style: none; margin: 28px 0 36px; padding: 0; }
ul.tram-ticks li {
	position: relative;
	padding: 14px 0 14px 36px;
	border-top: 1px solid rgba(255,255,255,0.12);
	font-size: 17px;
}
ul.tram-ticks li::before {
	content: "✓";
	position: absolute; left: 0; top: 13px;
	color: var(--pink); font-weight: 800;
}

/* 3 mô hình hợp tác: cột trái rộng hơn cho tên dài */
.tram-models .flex-list-left  { width: 26%; font-weight: 700; }
.tram-models .flex-list-center { width: 48%; font-size: 17px; }
.tram-models .flex-list-right { width: 26%; }
@media (max-width: 767px) {
	.tram-models .flex-list-left, .tram-models .flex-list-center, .tram-models .flex-list-right { width: 100%; }
}

/* Mascot trong khối Hệ sinh thái: ảnh nhỏ bên phải, không chiếm cả khung */
.accordion dd img.tram-mascot {
	float: right;
	width: 140px !important;
	max-width: 140px !important;
	height: auto !important;
	margin: 0 0 12px 20px;
}

/* Logo mới (chữ TRẠM 24H + VENDING MACHINE, dạng ngang) */
#logo img { height: 40px; }
@media (max-width: 767px) { #logo img { height: 30px; } }

/* ==========================================================
   NỀN TRẮNG GRAFFITI (đổi 29/09/2026) — chữ tối, hồng nhấn
   ========================================================== */
body, main {
	background-color: #f1f1f1;
}
main {
	background-image: url('../images/nen-trang-ngang.webp') !important;
	background-size: cover !important;
	background-position: center !important;
	background-attachment: fixed !important;
}
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
	main { background-image: url('../images/nen-trang-vuong.webp') !important; }
}
body, p, li, h1, h2, h3, h4, h5, h6, .flex-list, .copyright { color: #111111; }
.tram-sub, .has-opacity { color: #111111; opacity: 0.75; }

/* Chữ "tô dần": nền nhạt màu tối, tô bằng màu tối/hồng */
.has-mask-fill > span {
	-webkit-text-fill-color: rgba(17,17,17,0.12) !important;
	background-image: linear-gradient(#111111, #111111) !important;
}
.has-mask-fill.tram-pink > span {
	-webkit-text-fill-color: rgba(249,40,119,0.18) !important;
	background-image: linear-gradient(#f92877, #f92877) !important;
}

ul.tram-ticks li { border-top-color: rgba(17,17,17,0.15); }

/* Form trên nền sáng */
.tram-form select { color: #111111; border-bottom-color: rgba(17,17,17,0.3); }
.tram-form select option { background: #fff; color: #111111; }

/* Logo hồng là logo chính; qua khối nền hồng thì tối lại cho khỏi chìm */
/* Logo qua khối nền hồng: đổi sang logo TRẮNG #f4f4f4 (logo-tram-white.png, người dùng chốt 02/10/2026; thay quy tắc logo đen cũ) */
#logo img.tram-logo-dark { position: absolute; top: 0; left: 0; opacity: 0; }
header.white-header:not(.over-sidebar) #logo img.black-logo,
header.white-header:not(.over-sidebar) #logo img.white-logo { opacity: 0 !important; }
header.white-header:not(.over-sidebar) #logo img.tram-logo-dark { opacity: 1; }

/* ==========================================================
   TRANG VỀ TRẠM (about.html)
   ========================================================== */
.tram-img--plain { border-radius: 0; }
.tram-founder { max-width: 520px; margin: 0 auto; }
.tram-founder-text { padding-top: 6vw; }
.tram-role {
	color: var(--pink);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 12px;
}
.tram-quote {
	border-left: 4px solid var(--pink);
	padding: 8px 0 8px 24px;
	margin: 32px 0 0;
	font-size: 22px;
	line-height: 1.6;
	font-style: normal;
	color: #111111;
}
.tram-milestones .flex-list-left  { width: 20%; font-weight: 700; color: var(--pink); }
.tram-milestones .flex-list-center { width: 60%; }
.tram-milestones .flex-list-right { width: 20%; opacity: 0.6; }
.team-member .primary-font-title { line-height: 1.15; padding-top: 0.06em; }
@media (max-width: 767px) {
	.tram-founder-text { padding-top: 0; }
	.tram-quote { font-size: 18px; }
	.tram-milestones .flex-list-left, .tram-milestones .flex-list-center, .tram-milestones .flex-list-right { width: 100%; }
}

/* Bảng danh sách dòng trên nền sáng: chữ tối, rê chuột → nền hồng chữ trắng */
.flex-lists-wrapper { border-top: 1px solid rgba(17,17,17,0.15); }
.flex-list { border-bottom: 1px solid rgba(17,17,17,0.15); }
.flex-list > span { mix-blend-mode: normal; color: #111111; transition: color 0.2s; }
.flex-list::after { background-color: var(--pink); }
.flex-list:hover > span, .flex-list:hover > span i { color: var(--white) !important; }
.tram-milestones .flex-list-left, .flex-list-right i { color: var(--pink); }

/* ==========================================================
   FONT CHỦ ĐẠO: TRAM24 Display (đổi 29/09/2026)
   Font dày, rộng hơn → thu cỡ. Luôn VIẾT HOA vì chữ i/j thường
   của font đang mất dấu chấm (lỗi chưa sửa trong file font).
   ========================================================== */
@font-face {
	font-family: 'TRAM24 Display';
	src: url('../fonts/TRAM24-Display.woff2') format('woff2'),
	     url('../fonts/TRAM24-Display.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
.primary-font-title,
.fullscreen-menu .flexnav > li > a,
.flexnav > li > a,
.tram-promo {
	font-family: 'TRAM24 Display', 'TRAM24 Standard', 'Be Vietnam Pro', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
}
.hero-title { font-size: calc(1rem + 11vw); }
.next-hero-title { font-size: calc(1rem + 7vw); }
.big-title { font-size: calc(1rem + 3.6vw); }
.overlapping-image .slide-caption .slide-title { font-size: calc(1rem + 3vw); }
.list-rotator.primary-font-title li, .list-rotator li { font-size: calc(1rem + 5vw); }
.fullscreen-menu .flexnav > li > a { font-size: calc(1rem + 3.6vw); }
.team-member .primary-font-title { font-size: calc(1rem + 3.4vw); }
.tram-promo { font-size: calc(1rem + 1.2vw); }
@media (max-width: 767px) {
	.hero-title { font-size: calc(1rem + 10vw); }
	.big-title { font-size: calc(1rem + 5vw); }
}

/* ==========================================================
   QUY TẮC CHUNG (29/09/2026): chữ trên NỀN HỒNG luôn màu TRẮNG
   Mọi khối nền hồng gắn class "tram-on-pink".
   ========================================================== */
.tram-on-pink, .tram-on-pink h1, .tram-on-pink h2, .tram-on-pink h3,
.tram-on-pink p, .tram-on-pink dt, .tram-on-pink dd, .tram-on-pink span,
.tram-on-pink div, .tram-on-pink strong, .tram-on-pink a, .tram-on-pink i {
	color: var(--white) !important;
}
.tram-on-pink .has-mask-fill > span {
	-webkit-text-fill-color: rgba(244,244,244,0.25) !important;
	background-image: linear-gradient(#f4f4f4, #f4f4f4) !important;
}
.tram-on-pink .accordion dt,
.tram-on-pink .accordion dd { border-color: rgba(244,244,244,0.35) !important; }
.tram-on-pink .acc-button-icon { background-color: rgba(244,244,244,0.2) !important; }
.tram-on-pink .button-border,
.tram-on-pink .button-border.outline { border-color: var(--white) !important; }
.tram-sub-dark { opacity: 0.9; }

/* ==========================================================
   NÚT KIỂU WEB GỐC (viên thuốc, viền đen, bóng đổ lệch) — dùng cho nút dẫn sang Liên hệ
   ========================================================== */
.tram-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: 1.1rem 2.2rem;
	border-radius: 50px;
	background: var(--pink);
	color: var(--white) !important;
	font-weight: 800;
	font-size: 1.08rem;
	letter-spacing: .01em;
	text-decoration: none;
	border: 2.5px solid var(--dark);
	box-shadow: 4px 4px 0 var(--dark);
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease-out;
}
.tram-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--dark); }
.tram-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--dark); }

/* ==========================================================
   TRANG LIÊN HỆ — bản đồ máy đang hoạt động
   ========================================================== */
.tram-map {
	width: 100%;
	height: 520px;
	border-radius: 16px;
	border: 2.5px solid var(--dark);
	box-shadow: 6px 6px 0 var(--dark);
	z-index: 1;
}
.tram-pin span {
	display: block;
	width: 34px; height: 34px;
	background: var(--pink);
	border: 3px solid var(--white);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(17,17,17,.4);
}
.leaflet-popup-content { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px; color: var(--dark); }
.leaflet-popup-content strong { color: var(--pink); }
ul.tram-map-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	text-align: left;
}
ul.tram-map-list li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 2px 12px;
	padding: 16px 18px;
	border: 1px solid rgba(17,17,17,.15);
	border-radius: 12px;
	background: rgba(244,244,244,.7);
	cursor: pointer;
}
ul.tram-map-list li:hover { border-color: var(--pink); }
.tram-map-no {
	grid-row: span 2;
	font-family: 'TRAM24 Display', sans-serif;
	font-size: 28px;
	color: var(--pink);
}
ul.tram-map-list strong { color: var(--dark); }
ul.tram-map-list li > span:last-child { font-size: 14px; opacity: .75; }
@media (max-width: 767px) { .tram-map { height: 380px; } }
/* Nền bản đồ chuyển xám cho hợp tông trắng graffiti, ghim hồng vẫn nổi */
.tram-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.04); }

/* ==========================================================
   MÀN HÌNH CHỜ TẢI TRANG: nền hồng thương hiệu (đổi 29/09/2026)
   Chữ & thanh chạy trên nền hồng dùng trắng thương hiệu #f4f4f4
   ========================================================== */
.preloader-wrap { background: var(--pink) !important; }
.loadbar { background: var(--white) !important; }
.loadbar-inner { background: var(--pink) !important; }
.percentage-intro { color: var(--white) !important; opacity: 0.9; }
.preloader-intro { mix-blend-mode: normal !important; color: var(--pink) !important; }
.percentage { color: var(--white) !important; }

/* ==========================================================
   MENU TOÀN MÀN HÌNH: nền đen thương hiệu #111111, chữ trắng #f4f4f4 (đổi 29/09/2026)
   "Trang chủ" bấm vào sổ ra 4 mục con
   ========================================================== */
nav, .fullscreen-menu nav { background-color: var(--dark) !important; }
.fullscreen-menu .flexnav a,
.fullscreen-menu .flexnav a span,
.fullscreen-menu .flexnav .before-span span { color: var(--white) !important; }
.fullscreen-menu .flexnav li ul li a {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size: 20px;
	text-transform: none;
}
.fullscreen-menu .flexnav li ul li a:hover,
.fullscreen-menu .flexnav > li > a:hover span { color: var(--pink) !important; }

/* ==========================================================
   TRANG TIN TỨC & SỰ KIỆN (tin-tuc.html) — bố cục theo multimedia.html của mẫu
   ========================================================== */
.tram-slide-mascot { background: var(--white); }
.tram-slide-mascot img { object-fit: contain !important; padding: 8%; box-sizing: border-box; }
figure figcaption { color: var(--dark); }
.parallax-image-content h2 { color: var(--white); }

/* Nút sổ mục con của "Trang chủ": chỉ phủ đúng dòng chữ "Trang chủ", không che các mục con bên dưới
   (mẫu tính chiều cao theo font Six Caps cũ nên thò xuống che mất "Hệ sinh thái", "Thanh toán") */
.fullscreen-menu .flexnav > li > .touch-button {
	top: 0;
	height: calc((1rem + 3.6vw) * 1.15) !important;
}

/* Trang chủ: dòng khẩu hiệu dưới nút "Xem tất cả tin tức" */
.tram-tagline-1 { margin-top: 24px; }

/* ---------- Trang Quảng cáo (quang-cao.html) ---------- */
.accordion.bigger-acc dt span.primary-font-title div { font-family: inherit; }
.dark-section .tram-eyebrow { color: var(--pink) !important; }
/* logo mẫu là logo đen → đảo sang trắng trên nền đen */
.dark-section .clients-table img { filter: invert(1) brightness(0.96); }
.tram-counters .number-counter { margin: 0 auto; }
.tram-counters p { margin-top: 8px; opacity: 0.7; }
.tram-counters .number-counter::after { white-space: nowrap; }
header.white-header.tram-dark-zone:not(.over-sidebar) #logo img.tram-logo-dark { opacity: 0 !important; }
header.white-header.tram-dark-zone:not(.over-sidebar) #logo img.white-logo { opacity: 1 !important; }
.accordion.bigger-acc dt span.primary-font-title { font-family: "TRAM24 Display", "TRAM24 Standard", "Be Vietnam Pro", sans-serif; line-height: 1.25; }
.marquee-text { white-space: nowrap; width: max-content; max-width: none !important; }
/* Tiêu đề ngắt dòng chủ động: mỗi dòng giữ nguyên, không để 1 chữ rớt xuống dòng lẻ */
.tram-nowrap-lines { white-space: nowrap; }
@media only screen and (max-width: 767px) { .tram-nowrap-lines { font-size: calc(1rem + 5.2vw) !important; } }

/* Lưới logo trên nền hồng: khung góc + logo màu trắng thương hiệu */
.tram-on-pink .clients-table { background-image: url("../images/clients-middle-white.png"); }
.tram-on-pink .clients-table::before { background-image: url("../images/clients-top-white.png"); }
.tram-on-pink .clients-table::after { background-image: url("../images/clients-bottom-white.png"); }
.tram-on-pink .clients-table img { filter: brightness(0) invert(1) brightness(0.96); opacity: 0.85; }
.tram-on-pink .clients-table li:hover img { opacity: 1; }
.tram-on-pink .clients-table .overlay { background-color: rgba(244,244,244,0.12); }

/* Trang chủ: khối Ưu đãi + 4 ô icon nằm giữa danh sách thanh toán và khối Lợi ích (khoảng cách trên = dưới) */
.tram-uu-dai { margin-top: 42px; }
@media only screen and (max-width: 767px) { .tram-uu-dai { margin-top: 0; } #thanh-toan { padding-bottom: 28px; } }

/* Vòng tròn con trỏ khi rê vào băng trượt (light-cursor): mẫu để trắng, trên nền trắng không thấy → đổi hồng thương hiệu */
body.drag-cursor-white #ball { border-color: var(--pink) !important; }
.drag-cursor-white #ball-drag-x:before, .drag-cursor-white #ball-drag-x:after,
.drag-cursor-white #ball i, .drag-cursor-white #ball.with-icon i { color: var(--pink) !important; }
.light-cursor .clapat-pagination-bullet .path { stroke: var(--pink) !important; }
.light-cursor .clapat-pagination-bullet .solid-fill { fill: var(--pink) !important; }
.disable-cursor .light-cursor .slider-button-prev::after, .disable-cursor .light-cursor .slider-button-next::after { color: var(--pink) !important; }

/* Số đếm trang Quảng cáo: như mẫu (số + ký hiệu dính liền, cùng cỡ, chữ nặng 500), căn giữa cột cho khớp dòng chú thích */
.tram-counters .number-counter { font-weight: 500; margin: 0 auto; }
.tram-counters .number-counter::after { position: static; margin-left: 2px; }
.tram-counters p { text-align: center; }

/* Trang Hợp tác: tiêu đề từng hình thức + quy trình các bước đánh số */
.tram-ht-title { font-size: calc(1rem + 1.6vw); line-height: 1.2; margin: 6px 0 18px; white-space: nowrap; }
ol.tram-steps { list-style: none; counter-reset: st; padding: 0; margin: 24px 0 28px; }
ol.tram-steps li { counter-increment: st; position: relative; padding: 12px 0 12px 48px; border-top: 1px solid rgba(17,17,17,0.12); font-weight: 500; }
ol.tram-steps li:last-child { border-bottom: 1px solid rgba(17,17,17,0.12); }
ol.tram-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 12px; color: var(--pink); font-weight: 700; }
@media only screen and (max-width: 767px) { .tram-ht-title { white-space: normal; font-size: calc(1rem + 3.4vw); } }

/* Nút chữ + chấm (button-link): chấm và vòng tròn khi rê chuột màu hồng thương hiệu, mũi tên trắng #f4f4f4 */
.button-link .button-icon i { background-color: var(--pink) !important; border-color: var(--pink) !important; }
.button-link:hover .button-icon i { background-color: var(--pink) !important; border-color: var(--pink) !important; color: var(--white) !important; }

/* Trang máy (may-21-inch.html): bảng thông số 2 cột */
ul.tram-spec { list-style: none; padding: 0; margin: 0; }
ul.tram-spec li { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(17,17,17,0.12); }
ul.tram-spec li:last-child { border-bottom: 1px solid rgba(17,17,17,0.12); }
ul.tram-spec li span:first-child { color: var(--pink); font-weight: 700; white-space: nowrap; }
ul.tram-spec li span:last-child { text-align: right; font-weight: 500; }

/* Đầu trang có ảnh nền (trang máy, theo project01): phủ tối cho ảnh, chữ trắng #f4f4f4 */
#hero-bg-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.45) 55%, rgba(17,17,17,0.25) 100%); }
#hero.has-image h1, #hero.has-image h1 span, #hero.has-image p, #hero.has-image a, #hero.has-image span, #hero.has-image .button-text, #hero.has-image #info-text, #hero.has-image i { color: var(--white) !important; }
#hero.has-image .has-opacity { opacity: 0.85; }

/* Trang dòng máy (theo project01): khối nội dung rộng 1200px căn giữa như mẫu; khối 'full' vẫn tràn màn hình */
.tram-project .content-row:not(.full) { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Khối 'small' của mẫu (project03) hẹp 820px căn giữa */
.tram-project .content-row.small:not(.full) { max-width: 820px; }

/* Trang dòng máy: khối nền đen thương hiệu (project04) chữ trắng #f4f4f4 */
.tram-project .dark-section h1, .tram-project .dark-section h1 span, .tram-project .dark-section p,
.tram-project .dark-section p span, .tram-project .dark-section li span:last-child { color: var(--white) !important; }
.tram-project .dark-section ul.tram-spec li { border-color: rgba(244,244,244,0.18); }
ul.tram-spec.tram-spec-center { max-width: 640px; margin: 0 auto; text-align: left; }

/* Tiêu đề tô chữ (has-mask-fill) trên khối nền đen trang dòng máy: tô trắng #f4f4f4 */
.tram-project .dark-section .has-mask-fill > span {
	-webkit-text-fill-color: rgba(244,244,244,0.2) !important;
	background-image: linear-gradient(#f4f4f4, #f4f4f4) !important;
}

/* Khối "Máy tiếp theo" cuối trang dòng máy (02/10/2026): nền hồng, chữ trắng thương hiệu */
#project-nav.change-header, .dark-content #project-nav.change-header, .light-content #project-nav.change-header { background-color: var(--pink) !important; color: var(--white) !important; }
#project-nav.change-header .next-hero-title, #project-nav.change-header .next-hero-subtitle,
#project-nav.change-header .all-works, #project-nav.change-header .all-works .link-text,
#project-nav.change-header .next-hero-title span, #project-nav.change-header .next-hero-subtitle span,
#project-nav.change-header .link, #project-nav.change-header .link::before { color: var(--white) !important; }
/* Logo qua khối hồng này: logo trắng (tram.js gắn lớp tram-pink-zone cho header) */
header.tram-pink-zone:not(.over-sidebar) #logo img.black-logo,
header.tram-pink-zone:not(.over-sidebar) #logo img.white-logo { opacity: 0 !important; }
header.tram-pink-zone:not(.over-sidebar) #logo img.tram-logo-dark { opacity: 1 !important; }
#project-nav.change-header .next-hero-subtitle { opacity: 0.85; }
#project-nav.change-header .all-works::after { border-color: var(--white) !important; }
/* Điện thoại: dời link "Đặt Trạm ngay" xuống dưới logo cho khỏi đè */
@media (max-width: 767px) { #project-nav .all-works { top: 64px; } }

/* Chuyển giữa các trang dòng máy (02/10/2026): không hiện màn chờ tải, cuộn liền mạch.
   Lớp tram-lien-mach do đoạn script đầu trang gắn khi đến từ khối "Máy tiếp theo". */
html.tram-lien-mach .preloader-wrap { display: none !important; }
html.tram-lien-mach body::after {
  content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: var(--tram-cau-anh, none) center center / cover no-repeat;
  transform: scale(1.02); transition: opacity 0.6s ease;
}
html.tram-lien-mach.tram-cau-xong body::after { opacity: 0; }

/* Nút "Đăng ký đặt máy" đầu trang dòng máy (02/10/2026): kiểu nút viền bo tròn chuẩn, nằm trên ảnh phủ tối → viền + chữ trắng thương hiệu */
.tram-hero-btn { margin-top: 10px; }
.tram-hero-btn .button-border.outline { border-color: var(--white) !important; }
.tram-hero-btn .button-border.outline a, .tram-hero-btn .button-border.outline a span,
.tram-hero-btn .button-border.outline a span::before { color: var(--white) !important; }

/* Trang Dòng máy (dong-may.html, theo index-showcase-gallery của mẫu, 02/10/2026) */
/* Font TRAM24 Display rộng hơn font mẫu: thu cỡ chữ để "DÒNG MÁY" nằm 1 dòng */
.showcase-gallery #slide-inner-caption .slide-hero-title { font-size: 13vw !important; line-height: 1 !important; white-space: nowrap; }
@media (max-width: 767px) { .showcase-gallery #slide-inner-caption .slide-hero-title { font-size: 15vw !important; } }
/* Vòng "[ XEM ]" khi rê chuột: nền hồng, chữ trắng thương hiệu (mẫu dùng vòng mờ trắng trên nền tối) */
.tram-dong-may #ball.with-blur { background-color: rgba(249,40,119,0.9) !important; backdrop-filter: none !important; }
.tram-dong-may #ball.with-blur p, .tram-dong-may #ball p { color: var(--white) !important; }
/* Thẻ máy nền trắng trong băng "Dòng máy" trang chủ (02/10/2026): chữ đen thương hiệu (nền trắng → chữ đen) */
.overlapping-gallery .tram-the-sang .slide-caption, .overlapping-gallery .tram-the-sang .slide-caption span,
.overlapping-gallery .tram-the-sang .slide-title span, .overlapping-gallery .tram-the-sang .slide-date span,
.overlapping-gallery .tram-the-sang .slide-cat span { color: var(--black, #111111) !important; }
@media (max-width: 767px) {
  /* Điện thoại: thẻ dựng dọc, ảnh bị cắt giữa → dịch khung sang phải cho thấy máy */
  .overlapping-gallery .tram-the-sang .img-mask img { object-position: 97% 50% !important; }
}

/* Trang bài tin tức (tin-*.html, khuôn project08, 02/10/2026): thân bài canh trái, chữ thường dễ đọc */
.tram-bai { text-align: left; max-width: 720px; margin: 0 auto; }
.tram-bai p { font-size: 18px; line-height: 1.75; margin: 0 0 1.1em; color: var(--black, #111111); }
@media (max-width: 767px) { .tram-bai p { font-size: 16px; } }

/* Số trang dưới lưới tin (8 thẻ mỗi trang) */
.tram-phan-trang { display: flex; justify-content: center; gap: 12px; padding: 60px 0 20px; }
.tram-phan-trang a, .tram-phan-trang .tram-trang {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; border: 2px solid var(--black, #111111); color: var(--black, #111111);
  font-weight: 600; font-size: 16px; text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.tram-phan-trang a:hover { background: var(--black, #111111); color: var(--white); }
.tram-phan-trang .is-active { background: var(--pink); border-color: var(--pink); color: var(--white); }

/* Tiêu đề đầu trang dài (02/10/2026): font TRAM24 Display rộng, tiêu đề dài tràn mép → thu cỡ chữ */
#hero-caption .hero-title.tram-td-dai { font-size: 10.5vw !important; }
#hero-caption .hero-title.tram-td-rat-dai { font-size: 8.5vw !important; }
/* Số trang: ô bọc nút (parallax-wrap của mẫu: rê chuột thì nút hút theo chuột), bấm thì nút nhún */
.tram-phan-trang { align-items: center; }
.tram-trang-o { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; }
.tram-phan-trang a.tram-trang:active { transform: scale(0.85) !important; }