/* =============================================================================
   21-footer.css — footer + Follow + hàng liên hệ.
   Luật III.4.1

   ⛔ HIỆN CỐ Ý ĐỂ TRỐNG.
      Footer dựng bằng MỘT Block tái sử dụng `footer-toanloc` cho toàn site,
      kể cả trang Liên hệ (quyết định đã chốt 3.7-2). Icon MXH dùng phần tử
      Follow, không dựng bằng loạt Image (III.1.1).
============================================================================= */

/* =============================================================================
   TINH CHỈNH THEO AUDIT STYLE 19/08/2026 — mục 3.5
============================================================================= */

/* =============================================================================
   KHỚP PIXEL ẢNH MẪU 1440px (26/08/2026)

   Đo trực tiếp trên spec/mockup/trang-chu.jpg (native 1280px, ×1,125 quy về
   1440px): dải footer chỉ cao ~82px. Trước khi sửa, `.footer-wrapper` đo được
   **336px** — gấp hơn 4 lần — vì mọi chữ trong Block `footer-toanloc` đang
   dùng cỡ THÂN BÀI mặc định (16px) không có luật riêng nào cho footer.
   [lý do vượt panel]  `[ux_text]`/`[featured_box]` không có ô cỡ chữ riêng
              cho từng khối — cỡ chữ nhỏ "rất nhỏ" của mockup chỉ đặt được
              bằng CSS con.
============================================================================= */
/* ⛔ 4T đối chiếu bản live: chữ footer "quá tối/mờ và quá nhỏ". Hai lỗi CỘNG
   DỒN: (1) đoạn dưới chỉ đổi font-size, KHÔNG đổi `color` — nên mọi đoạn văn
   kế thừa `color_texts` của Customizer (#4E5666, xám đậm PHA CHO NỀN SÁNG),
   trên nền navy đọc gần như biến mất; (2) `.tl-footer-copyright` còn nhân
   thêm `opacity:.55/.75` khiến chữ đã tối lại càng mờ. Khai `color` TƯỜNG
   MINH cho mọi lớp chữ trong footer — đừng trông vào kế thừa (bài học lặp
   lại của chính dự án này, xem CLAUDE.md mục 28.3 "chữ tàng hình"). Cỡ chữ
   cũng nâng lên một nấc (11→13, 10→12) — mẫu đo dày hơn set cũ. */
.tl-footer .col-inner .text p,
.tl-footer .icon-box-text p {
	font-size: 13px;
	line-height: 18px;
	margin: 0;
	color: var(--tl-trang);
}

/* Email/số điện thoại: `<a>` kế thừa `color_links` toàn site (cam) — mẫu vẽ
   TRẮNG cho các đường link trong footer, chỉ chữ "SINGAPORE" của logo mới cam
   (xem `.tl-cam` bên dưới, không đụng). */
.tl-footer .icon-box-text p a {
	color: var(--tl-trang);
}
.tl-footer .icon-box-text p a:hover {
	opacity: .8;
}

/* Logo + tagline: dòng 1 "TOÀN LỘC/SINGAPORE" đậm to hơn thân bài một nấc,
   dòng 2 tagline nhỏ hơn nữa — đúng hai cỡ khác nhau đo được trên mẫu. */
.tl-footer .col.medium-3:first-child .text p:first-child {
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 4px;
	color: var(--tl-trang);
}
.tl-footer .col.medium-3:first-child .text p:last-child {
	font-size: 12px;
	line-height: 16px;
	color: var(--tl-trang);
	opacity: .8;
}

/* Icon-box liên hệ (địa chỉ/email/điện thoại): icon 22px (panel) cạnh chữ
   11px — panel canh giữa icon theo chiều dọc của cả khối, ổn với chữ nhỏ. */
.tl-footer .icon-box { margin-bottom: 4px; align-items: flex-start; }
.tl-footer .icon-box:last-child { margin-bottom: 0; }
.tl-footer .icon-box .icon-box-img { padding-top: 1px; }

/* Flatsome đệm quanh icon-box theo `em` (padding riêng của .icon, không phải
   kích thước ảnh) — dù đã hạ img_width 22→15px ở panel, khối icon vẫn cao
   27px vì phần đệm đó không đổi theo, và vì .icon-box mặc định
   `align-items:stretch` nên CỘT CHỮ (chỉ 1 dòng, ~15px) bị kéo giãn khớp
   theo cột icon cao hơn — lãng phí ~12px MỖI dòng liên hệ. Gỡ đệm + đổi
   sang flex-start (khai lại ở trên) mới về đúng chiều cao icon thật.
   ⚠ Thủ phạm THẬT không phải padding — `.icon` là `display:block` nhưng SVG
   nội tuyến bên trong nó là `display:inline`, nên hộp dòng (line box) của nó
   ăn theo `line-height` được kế thừa (25,6px = 16px × 1,6 mặc định), bất kể
   ảnh chỉ cao ~15px. Ép `line-height:0` mới sập hộp dòng về đúng kích thước
   ảnh thật (bài học cùng họ với "SVG nội tuyến mặc định display:inline" ở
   CLAUDE.md 22.3-3, lần này lộ ra qua line-height chứ không phải display). */
.tl-footer .icon-box .icon-box-img .icon,
.tl-footer .icon-box .icon-box-img .icon-inner {
	padding: 0;
	line-height: 0;
}

/* Bản quyền: đã dời vào CUỐI cột điện thoại (3 dòng: 2 SĐT + bản quyền) thay
   vì [row] riêng bên dưới — mockup đặt nó NGAY DƯỚI hai dòng điện thoại,
   không phải một hàng full-width canh giữa cả footer (đo pixel: dải chữ
   "© 2026…" bắt đầu cùng x với "0979 313 189…", không phải giữa trang). */
.tl-footer .tl-footer-copyright p {
	font-size: 11px;
	line-height: 14px;
	color: var(--tl-trang);
	opacity: .7;
	margin-top: 4px !important;
}

/* Cột "KẾT NỐI VỚI TÔI": nhãn — panel không có ô cỡ chữ/màu riêng. */
.tl-footer .tl-mxh .text p {
	font-size: 13px;
	font-weight: 700;
	color: var(--tl-trang);
	margin-bottom: 6px;
}

/* Thứ tự icon MXH đúng mẫu: Facebook · TikTok · Instagram · YouTube · Zalo.
   [lý do vượt panel]  Thuộc tính `facebook/tiktok/instagram/youtube` của
   `[follow]` đã khai ĐÚNG thứ tự này trong uxb/pages/_block-footer.php, nhưng
   Flatsome tự lặp theo DANH SÁCH MẠNG CỐ ĐỊNH của chính nó
   (helpers-frontend.php), bỏ qua thứ tự thuộc tính truyền vào — không có ô
   panel nào sắp lại. `.social-icons` đã là `display:flex` (đầu tệp này) nên
   `order` đổi được thứ tự HIỂN THỊ mà không cần đụng DOM. */
.tl-footer .tl-mxh .social-icons a.icon.facebook  { order: 1; }
.tl-footer .tl-mxh .social-icons a.icon.tiktok    { order: 2; }
.tl-footer .tl-mxh .social-icons a.icon.instagram { order: 3; }
.tl-footer .tl-mxh .social-icons a.icon.youtube   { order: 4; }
/* `.tl-zalo` là DIV RIÊNG, không phải con của `.social-icons` (Zalo dựng bằng
   [ux_image], không phải [follow] — mục 11.2 CLAUDE.md), nên `order` ở trên
   không với tới nó. Nó đã đứng SAU trong DOM ⇒ tự nhiên xếp cuối, không cần
   khai `order` thêm. */

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Text | khối: chữ "SINGAPORE" dưới logo footer
   [trang]    mọi trang (Block footer-toanloc)
   [mockup]   cả 6 — "TOÀN LỘC" trắng, "SINGAPORE" CAM
   [audit]    3.5
   [lý do vượt panel]  Chữ nằm trong một [ux_text]; panel chỉ đặt được màu cho
              CẢ khối, không tô riêng một dòng. Cửa hợp lệ duy nhất là <span>
              class đã duyệt (whitelist III.2) + CSS child.
   ⛔ Dùng --tl-cam (#EB500E) chứ KHÔNG dùng --tl-cam-chu: trên nền navy
      #010F38 thì #CE4C09 chỉ đạt 4,14:1 (TRƯỢT AA) còn #EB500E đạt 5,05:1.
      Nền tối đảo ngược thứ tự hai token so với nền sáng — đo 19/08.
   -------------------------------------------------------------------------- */
.tl-footer .tl-cam { color: var(--tl-cam); }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Follow + Image | khối: hàng mạng xã hội footer (.tl-mxh)
   [trang]    mọi trang
   [mockup]   cả 6 — 5 icon TRÒN ĐẶC màu THƯƠNG HIỆU trên một hàng
   [audit]    3.5
   [lý do vượt panel]  Hai thứ đã sửa ở PANEL, không viết CSS:
              · hình tròn đặc ← đổi style="outline" thành style="fill";
              · icon Zalo ← [ux_image] + link (đánh đổi 4T duyệt 18/08/2026).
              Còn lại đúng một thứ panel KHÔNG với tới: MÀU THƯƠNG HIỆU.
              `style="fill"` của Flatsome ánh xạ sang lớp `icon primary button
              circle` (helpers-frontend.php dòng 93) ⇒ mọi icon đều tô màu
              primary (cam). Không có ô panel nào đặt màu riêng từng mạng, mà
              mockup vẽ Facebook xanh · TikTok đen · Instagram gradient ·
              YouTube đỏ.
   -------------------------------------------------------------------------- */
.tl-footer .tl-mxh .col-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

/* dòng tiêu đề "KẾT NỐI VỚI TÔI" chiếm trọn một dòng, icon xuống dòng dưới */
.tl-footer .tl-mxh .col-inner > .text:first-child { flex: 0 0 100%; margin-bottom: 2px; }

.tl-footer .tl-mxh .social-icons { display: flex; gap: 5px; margin: 0; }

/* Flatsome treo margin-bottom 13,2px lên TỪNG icon ⇒ hộp .social-icons cao hơn
   ảnh Zalo và canh giữa bị lệch (đo 19/08). Gỡ margin đó là hai bên bằng nhau. */
.tl-footer .tl-mxh .social-icons a.icon {
	/* ⛔ KHÔNG đặt width/height ở đây. Flatsome cỡ icon theo `em`, khai px
	   cứng bị đè và ra 33px thay vì con số mình viết (đã thử 19/08).
	   Ô panel đúng là `scale` của [follow] — đang đặt 72%. */
	margin-bottom: 0;
	border: 0;
	color: var(--tl-trang);
	transition: transform var(--tl-chuyen), filter var(--tl-chuyen);
}

/* ⛔ KHÔNG viết màu thương hiệu ở đây. Đã thử và đo lại: Flatsome ép
   `.button.facebook:not(.is-outline){color:#3a589d!important}` (và tương tự cho
   tiktok/instagram/youtube), nền tròn lấy theo currentColor ⇒ mọi khai báo
   background-color của child theme đều là MÃ CHẾT. Đè được chỉ bằng !important,
   mà audit cấm thêm !important mới.
   ⇒ Dùng luôn bảng màu thương hiệu của Flatsome. Sắc độ lệch nhẹ so với mockup
     (Facebook #3A589D thay vì #1877F2) — ghi vào báo cáo, không lách luật. */

/* Zalo là [ux_image] nên không có lớp .icon của Flatsome — chỉnh riêng cho khớp
   cỡ và hình tròn của bốn icon kia. */
.tl-footer .tl-zalo { margin: 0; line-height: 0; }   /* bề rộng do panel (width="14") */
.tl-footer .tl-zalo img { width: 100%; height: auto; border-radius: 50%; display: block; }
.tl-footer .tl-zalo a { display: block; transition: transform var(--tl-chuyen); }

.tl-footer .tl-mxh .social-icons a.icon:hover,
.tl-footer .tl-zalo a:hover { transform: translateY(-2px); }

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Follow + Image | khối: hàng mạng xã hội footer
   [trang]    mọi trang, CHỈ khổ điện thoại
   [audit]    audit-mobile mục 5
   [lý do vượt panel]  Ô panel `scale` của [follow] đang để 72% — đặt vậy là để
              5 icon vừa cột span 2 hẹp Ở DESKTOP (xem 21-footer phần trên).
              Nhưng `scale` in ra `style="font-size:72%"` NỘI TUYẾN và áp cho
              MỌI khổ, trong khi ở mobile cột dồn full-width nên thừa chỗ.
              Kết quả: icon chỉ 24×24px trên điện thoại — dưới ngưỡng chạm 44px.
   ⛔ Không đè được style nội tuyến bằng selector thường (nội tuyến luôn thắng),
      và audit cấm thêm !important. Nên KHÔNG đụng vào .social-icons; thay vào
      đó đặt cỡ ngay trên chính `a.icon` — nó là phần tử con, không mang style
      nội tuyến nào, và bề rộng của nó tính theo `em` của CHÍNH nó.
   -------------------------------------------------------------------------- */
/* ⚠ ≤849 chứ KHÔNG phải ≤549: dải 550–849 là máy tính bảng và điện thoại nằm
   ngang — vẫn ngón tay, vẫn cần 44px. Đo 20/08 ở 768: 4 icon MXH chỉ 23,6px và
   Zalo 17,3px. Đây là "vùng chết" quen thuộc của dự án (CLAUDE.md 25.4). */
@media (max-width: 849px) {
	/* ⛔ Ở 550–849 cột MXH chỉ ~128px (medium-2), mà 5 icon 44px + 4 khe 10px
	   cần 260px ⇒ TRÀN PHẢI 131px. Đã dính đúng lỗi này 20/08 khi vừa nới
	   vùng chạm lên 44px. Cho xuống dòng là xong — 2 icon mỗi hàng vẫn đủ chỗ
	   (44+10+44 = 98 < 128), và không phải thu nhỏ đích chạm lại.
	   ⚠ Đừng chữa bằng cách nới `span__md` của cột: bốn cột footer cộng đúng
	     12 nấc, nới cột này là phải bóp cột khác. */
	.tl-footer .tl-mxh .social-icons {
		gap: 10px;
		flex-wrap: wrap;
	}

	.tl-footer .tl-mxh .social-icons a.icon {
		font-size: 20px;      /* cơ sở em của chính icon */
		width: 44px;
		height: 44px;
	}

	/* ⛔ BẪY 12: `width` của [ux_image] là PHẦN TRĂM và Flatsome ghi bằng bộ chọn
	   `#image_x{width:16%}` — không class nào đè nổi vì ID luôn thắng.
	   Ở ≤549 vô hại (cột rộng cả màn ⇒ 16% = 60px). Nhưng ở 550–849 footer
	   thành 4 cột, cột MXH chỉ ~92px ⇒ 16% = 14,7px, và ảnh bên trong bị
	   `max-width:100%` bó theo ⇒ đích chạm Zalo chỉ còn 11–19px.
	   🔑 Đường vòng KHÔNG cần !important: ID kia chỉ đặt `width`, nó KHÔNG đặt
	   `min-width`. Hai thuộc tính khác nhau nên không chọi nhau — `min-width`
	   của mình vẫn ăn, và nó thắng `width` khi tính bề rộng cuối cùng. */
	.tl-footer .tl-zalo { min-width: 44px; }
	.tl-footer .tl-zalo img { width: 44px; height: 44px; }
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Featured Box | khối: số điện thoại + email footer
   [trang]    mọi trang, CHỈ khổ điện thoại
   [audit]    audit-mobile mục 5
   [lý do vượt panel]  Đây là chữ trong nội dung featured_box, không có panel nào
              chỉnh vùng chạm. Biến số thành link `tel:` xong thì nó là đích chạm
              cao 20px — tức việc làm cho bấm gọi được lại đẻ ra đích chạm nhỏ.
   ⚠ Cách nới PHẢI không đẩy chữ: padding dương + margin âm bằng nhau ⇒ vùng
     bấm cao 44px mà vị trí chữ đứng yên. Đặt min-height thẳng sẽ giãn dòng và
     phá khoảng cách giữa số điện thoại với dòng nhãn ngay dưới.
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
	.tl-footer a[href^="tel:"],
	.tl-footer a[href^="mailto:"] {
		display: inline-block;
		padding: 12px 0;
		margin: -12px 0;

		/* ⛔ Ở 550–849 footer thành 4 cột hẹp, mà địa chỉ email dài 241px trong
		   cột chỉ 183px ⇒ nó TRÀN sang cột bên cạnh 83px và hộp bấm của nó
		   chồng lên hộp bấm của số điện thoại — đo được 57×20px ở khổ 550.
		   Đây mới là thủ phạm thật của cặp đè nhau ở dải này, KHÔNG phải phần
		   padding nới vùng chạm bên trên. Ép nó xuống dòng trong cột của mình. */
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	/* ⛔ Vùng chạm nới bằng padding 12px TRÊN và DƯỚI thì nó THÒ RA khỏi dòng
	   chữ 12px mỗi phía. Bốn khối liên hệ vốn xếp sát nhau (đáy khối trên =
	   đỉnh khối dưới) nên hai vùng bấm ĐÈ NHAU 12px — bộ dò va chạm bắt được
	   19/08. Nhìn thì không thấy gì vì phần đè là padding trong suốt, nhưng
	   chạm vào dải đó có thể GỌI NHẦM SỐ: vùng của 0979 313 189 lấn sang
	   +65 9180 6830.
	   Phải chừa khoảng cách ≥ 24px (12 + 12) giữa các khối thì hai vùng mới
	   rời nhau. */
	.tl-footer .icon-box { margin-bottom: 26px; }
	.tl-footer .icon-box:last-child { margin-bottom: 0; }
}

/* -----------------------------------------------------------------------------
   NHIỆM VỤ MOBILE CHUNG (27/08/2026) — nén footer cho dễ quét ở màn hẹp
   [phục vụ]  phần tử: Section + Column | khối: đệm dọc quanh footer, khe giữa
              4 cụm (Brand/Địa chỉ/Liên hệ/Mạng xã hội)
   [trang]    mọi trang, CHỈ điện thoại (≤549 — lý do đổi mốc xem dưới)
   [mockup]   Đo sống 390px trước khi sửa: đệm dọc section 24px, đệm ngang mỗi
              cột chỉ 9,8px, khe dưới mỗi cụm 19,6px. Brief xin "padding 28px
              16px, các nhóm thông tin gap 14–16px".
   [lý do vượt panel]  Đệm dọc do panel Section đặt cố định 24px, không có ô
              riêng cho khổ điện thoại; đệm ngang/khe dưới của `.col` đến từ
              công thức fluid mặc định của Flatsome, không phải panel nào ở
              đây có thể chỉnh.
   ⛔ Brief gốc xin `@media (max-width:767px)`. Cả 5 khổ brief đòi (360–430) đều
      dưới 549 nên dùng mốc 549 (luật III.4.3-3, chỉ 549/849/850).
   ⛔ KHÔNG đụng `.icon-box{margin-bottom:26px}` ở khối ngay trên — đó là an
      toàn chống ĐÈ vùng chạm tel:/mailto: (đã vá 19/08, xem chú thích dài phía
      trên), khác trục hoàn toàn với khe GIỮA 4 CỤM đang chỉnh ở đây. Hạ nó
      xuống 14–16px là làm sống lại lỗi gọi nhầm số.
   ⛔ Icon mạng xã hội (44×50, khối "social-icons" ở trên) đã nằm trong khoảng
      brief 40–44px — không đụng.
   ⚠ `padding-top/bottom` trên `.tl-footer.section` CẦN !important — soi bằng
     `CSS.getMatchedStylesForNode`: panel in giá trị ra thẳng
     `#section_xxxxxxx{padding:24px 0}` (ID, đặc hiệu 1-0-0), luôn thắng
     `.tl-footer.section` (0-2-0) bất kể thứ tự tệp. Cùng nguyên nhân gốc đã
     gặp ở `40-page-lien-he.css` (padding-top khối tiêu đề) — Flatsome in giá
     trị panel bằng bộ chọn ID mà lớp thường không chọi nổi. */
@media (max-width: 549px) {
	.tl-footer.section {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}

	.tl-footer .row.row-small > .col {
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 16px;   /* 19,6 → 16 (brief: khe giữa 4 cụm 14–16px) */
	}
}

/* -----------------------------------------------------------------------------
   [phục vụ]  phần tử: Row | khối: bề ngang dải footer
   [trang]    mọi trang
   [mockup]   ⚠ Lịch sử đổi HAI LẦN, xem kỹ trước khi sửa tiếp:
              26/08 (phiên 3) — 4T đối chiếu màn 1908px: footer bị bó khung,
                logo tụt vào x≈290 ⇒ đổi sang lề THEO TỈ LỆ %, không trần.
              27/08 — 4T đối chiếu lại: muốn footer THẲNG HÀNG với header, mà
                header cùng ngày đã bị đảo NGƯỢC LẠI (xem 20-header.css mục
                "ĐẢO LẠI 27/08") — header quay về `--tl-be-ngang` canh giữa,
                không còn "trải rộng gần full" nữa. ⇒ Footer phải ĐI THEO,
                dùng lại ĐÚNG công thức đó để ba dải (header/thân/footer) lại
                thẳng một mép như mục 24 CLAUDE.md gốc — không phải hai công
                thức khác nhau nữa.
   [lý do vượt panel]  Footer nằm NGOÀI .page-wrapper nên luật căn lề chung ở
              10-base.css không với tới, phải khai riêng ở đây.
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
	/* ⛔ Nêu đích danh `.row-small`: footer dùng [row style="small"], mà Flatsome
	   in `.row.row-small{max-width:1162.5px}` nội tuyến SAU tệp này. Hai bên
	   cùng 0-2-0 nên bản in sau thắng — xem chú thích dài ở 10-base.css. */
	.tl-footer .row,
	.tl-footer .row.row-small {
		max-width: var(--tl-be-ngang);
	}

	/* Divider dọc mờ giữa 4 cụm — mẫu vẽ một đường kẻ mảnh trắng-mờ ngăn
	   logo|địa chỉ|điện thoại|social, KHÔNG có ở trước cụm đầu tiên (logo).
	   [lý do vượt panel]  `[col]` không có thuộc tính viền/kẻ cạnh nào. */
	.tl-footer .row.row-small > .col:not(:first-child) {
		border-left: 1px solid rgba(255, 255, 255, .15);
	}
}

/* =============================================================================
   DẢI PHÁP LÝ CUỐI CHÂN TRANG (01/10/2026)
   [phục vụ]  phần tử: Row/Column/Text | khối: .tl-footer-phap-ly
   [lý do vượt panel]  `[col]` chỉ render được `bg_color` và BỘ BA
              border+border_color+border_radius (đã kiểm ở CLAUDE.md 37.1) —
              không có ô nào đặt riêng viền TRÊN, cỡ chữ hay độ mờ.
   ⚠ Khai `color` TƯỜNG MINH, không trông vào kế thừa — đúng cảnh báo đã ghi
     ở đầu tệp này (bài học "chữ tàng hình", CLAUDE.md 28.3).
============================================================================= */
.tl-footer .tl-footer-phap-ly {
	border-top: 1px solid rgba(255, 255, 255, .15);
	margin-top: 14px;
	padding-top: 12px;
}
.tl-footer .tl-footer-phap-ly .text p {
	font-size: 12px;
	line-height: 1.65;
	color: var(--tl-trang);
	opacity: .75;
	margin: 0;
}
/* Tên pháp nhân sáng hơn phần còn lại để mắt bắt được ngay. */
.tl-footer .tl-footer-phap-ly .text p strong { opacity: 1; }