/* ============================================================================
   SOLI AI · WORDPRESS COMPAT LAYER

   File này CHỈ chứa những gì WordPress bắt buộc phải có mà bản React không có
   (admin bar, screen-reader-text, alignment của block, print). Mọi thứ khác về
   layout/typography của landing page vẫn do inline style + soli-main.css lo.

   Nạp sau soli-main.css (xem inc/enqueue.php) trên MỌI trang.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. BÙ ADMIN BAR
   Lý do: WordPress chèn #wpadminbar cao 32px (46px trên mobile) ở top:0 và tự
   thêm class .admin-bar vào <body> khi user đã đăng nhập. Header của theme là
   <header style="position:fixed;top:0"> nên nó bị admin bar che mất khi admin
   xem trang. Chỉ tụt header xuống khi CÓ .admin-bar — khách truy cập không bị
   ảnh hưởng.
   Dùng !important vì top:0 nằm trong inline style của <header> (inline luôn
   thắng stylesheet nếu không có !important). Đây là ngoại lệ duy nhất cần thiết.
   ------------------------------------------------------------------------ */
body.admin-bar > header,
body.admin-bar header[style*="fixed"] {
	top: 32px !important;
}

/* Anchor scroll: bù thêm chiều cao admin bar để tiêu đề section không bị che
   khi click menu (#pricing, #pre-register...). */
body.admin-bar [id] {
	scroll-margin-top: 32px;
}

@media screen and (max-width: 782px) {
	/* WordPress đổi admin bar sang 46px và cho nó position:absolute ở breakpoint
	   này — header fixed vẫn cần bù đúng 46px. */
	body.admin-bar > header,
	body.admin-bar header[style*="fixed"] {
		top: 46px !important;
	}

	body.admin-bar [id] {
		scroll-margin-top: 46px;
	}
}

/* ---------------------------------------------------------------------------
   2. SMOOTH SCROLL — CỐ Ý BỎ TRỐNG
   index.src.css đã có `body { @apply ... scroll-smooth }` (compile ra
   `scroll-behavior: smooth` trên body trong soli-main.css). Khai báo lại
   `html { scroll-behavior: smooth }` ở đây sẽ trùng lặp và có nguy cơ ghi đè
   hành vi scroll do soli-smooth-scroll.js điều khiển. => KHÔNG thêm.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   3. RESET NHẸ CHO MEDIA
   Lý do: ảnh do Marketing upload qua Media Library có thể rộng hơn khung chứa
   và làm tràn ngang (horizontal scroll) trên mobile.
   CẨN TRỌNG: landing page có nhiều <img>/<svg> đặt width/height cố định bằng
   inline style (logo, icon, mockup). Vì vậy CHỈ giới hạn max-width và KHÔNG
   set `height: auto` toàn cục — height:auto sẽ phá tỉ lệ các ảnh đó.
   ------------------------------------------------------------------------ */
img,
svg {
	max-width: 100%;
}

/* Chỉ ảnh trong nội dung bài viết / block mới cần height:auto để không bị méo
   khi max-width bó lại. Landing page không dùng các class này. */
.entry-content img,
.wp-block-image img,
.wp-caption img {
	height: auto;
}

/* ---------------------------------------------------------------------------
   4. .screen-reader-text
   Lý do: chuẩn accessibility của WordPress — nav menu, search form, comment
   form, skip-link đều in ra class này. Không có CSS thì text trợ năng sẽ hiện
   ra giữa trang. Đây là snippet chuẩn của WP core.
   ------------------------------------------------------------------------ */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: #ffffff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(13, 43, 34, 0.6);
	clip-path: none;
	color: #0c6b52;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100001;
}

/* ---------------------------------------------------------------------------
   5. ALIGNMENT CỦA BLOCK EDITOR
   Lý do: theme khai báo add_theme_support('align-wide'), nên block trong bài
   viết có thể mang class .alignwide / .alignfull / .aligncenter. Không có CSS
   thì các class này vô nghĩa và block sẽ không rộng ra như Marketing thấy trong
   editor. Kích thước khớp layout.contentSize/wideSize của theme.json.
   ------------------------------------------------------------------------ */
.alignwide {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

/* ---------------------------------------------------------------------------
   5A. HEADER — NÚT "ĐĂNG NHẬP" / "ĐĂNG KÝ"
   ---------------------------------------------------------------------------
   Thay cho CTA cũ #header-cta-demo ("Trải nghiệm SOLI AI") đã gỡ khỏi Header.
   CHỈ ảnh hưởng Header — các CTA ở Hero / Pricing / section / popup dùng class
   Tailwind riêng, không đụng tới.

   Viết bằng CSS THUẦN (không dùng utility Tailwind mới) để KHÔNG phải recompile
   soli-main.css — xem BUILD.md. Bảng màu lấy từ design system hiện tại:
       #059669  emerald-600  = màu nền CTA chính đang dùng trên toàn site
       #0c6b52  secondary-teal
       #ecfdf5  mint rất nhạt (nền hover)
   Tuyệt đối không dùng màu tím.

   .header-login-btn / .header-register-btn cũng chính là 2 class tracking —
   giữ nguyên tên, đừng đổi.
   ------------------------------------------------------------------------ */

.soli-header-actions {
	gap: 9px; /* khoảng cách giữa 2 nút — trong khoảng 8–10px yêu cầu */
}

.header-login-btn,
.header-register-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none;
	font-family: inherit; /* typography hiện tại của site (Poppins) */
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	padding: 9px 18px;
	/* Bo tròn hoàn toàn — đồng bộ với rounded-full của mọi CTA trên site. */
	border-radius: 999px;
	border: 1px solid transparent; /* để 2 nút LUÔN cùng chiều cao */
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease,
		box-shadow .2s ease, transform .12s ease;
}

/* SECONDARY — nền trắng, chữ + viền xanh SOLI. */
.header-login-btn {
	background: #ffffff;
	color: #0c6b52;
	border-color: rgba(5, 150, 105, 0.55);
}

.header-login-btn:hover {
	background: #ecfdf5; /* mint nhạt */
	border-color: #059669;
	color: #065f46;
}

/* PRIMARY — tái dùng đúng nền/chữ/đổ bóng của CTA cũ (bg-emerald-600 +
   shadow-md, hover bg-emerald-600/90 + shadow-lg). */
.header-register-btn {
	background: #059669;
	color: #ffffff;
	border-color: #059669;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.header-register-btn:hover {
	background: rgba(5, 150, 105, .9);
	border-color: rgba(5, 150, 105, .9);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.header-login-btn:active,
.header-register-btn:active {
	transform: scale(.98);
}

.header-login-btn:focus-visible,
.header-register-btn:focus-visible {
	outline: 2px solid #059669;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   TABLET 768–1023px — nav giữa (5 mục) và nhóm account không đủ chỗ cạnh nhau
   trên cùng một hàng: nav chiếm ~480px giữa màn hình, phần trống bên phải chỉ
   còn ~120px. Bản gốc đã bị CHỒNG CHỮ ở đúng khổ này (CTA cũ đè lên mục
   "TƯ VẤN"). Ở khoảng này dùng menu hamburger — vốn đã có sẵn và hoạt động
   đầy đủ — thay vì nav ngang.

   Làm bằng CSS thuần thay vì đổi md: → lg: trong markup, vì lg:flex/lg:hidden
   KHÔNG có trong soli-main.css đã compile (sẽ phải chạy lại Tailwind).
   ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023.98px) {
	[data-soli-header] .soli-header-nav {
		display: none !important;
	}

	[data-soli-header] .soli-header-burger {
		display: inline-flex !important;
	}

	/* Badge số lead vẫn do JS bật/tắt bằng thuộc tính hidden. */
	[data-soli-header] .soli-header-burger[hidden] {
		display: none !important;
	}
}

/* LAPTOP NHỎ 1024–1279px — nav ngang đã hiện lại nhưng chỗ trống bên phải chỉ
   còn ~220px. Thu gọn 2 nút một nấc để giữ khoảng hở an toàn với mục "TƯ VẤN"
   (đo được: 10px → ~33px). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.header-login-btn,
	.header-register-btn {
		font-size: 12.5px;
		padding: 8px 14px;
	}
}

/* 1024–1149px — sau khi thêm mục BLOG, nav dài thêm ~66px. Nav được căn giữa
   tuyệt đối nên mỗi 1px nav rộng ra sẽ ăn 0.5px vào chỗ của nhóm account ở
   bên phải; ở khổ này mép phải của "TƯ VẤN" chạm vào nút "Đăng nhập" (đo được
   chồng 2px). Hạ gap nav từ 32px xuống 20px → nav hẹp lại 60px, khoảng hở
   phục hồi về ~27px. Từ 1150px trở lên gap-8 gốc được giữ nguyên. */
@media (min-width: 1024px) and (max-width: 1149.98px) {
	[data-soli-header] .soli-header-nav {
		gap: 20px !important;
	}
}

/* MOBILE — thu nhỏ 2 nút để không làm tăng chiều cao header và không chèn logo
   / nút hamburger. */
@media (max-width: 767px) {
	.soli-header-actions {
		gap: 8px;
	}

	.header-login-btn,
	.header-register-btn {
		font-size: 12px;
		padding: 8px 13px;
	}
}

@media (max-width: 400px) {
	.header-login-btn,
	.header-register-btn {
		font-size: 11px;
		padding: 7px 11px;
	}
}

/* ---------------------------------------------------------------------------
   5C. HERO — CTA CHÍNH #hero-primary-cta
   ---------------------------------------------------------------------------
   Text đổi từ "ĐĂNG KÝ NGAY" (12 ký tự) sang "DÙNG THỬ MIỄN PHÍ NGAY" (22 ký
   tự) nên nút rộng thêm ~90px. Trên desktop chữ vẫn nằm gọn 1 dòng nhờ
   white-space:nowrap trong inline style; ở màn hẹp thì hạ cỡ chữ + padding
   theo từng nấc để nút KHÔNG tràn khỏi cột Hero và KHÔNG xuống dòng.

   CHỈ tác động tới #hero-primary-cta. Các CTA khác (Pricing, popup, section)
   không mang id này.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
	#hero-primary-cta {
		padding: 19px 26px !important;
		gap: 11px !important;
	}

	#hero-primary-cta .soli-hero-cta-label {
		font-size: 16.5px !important;
		letter-spacing: 0.4px !important;
	}
}

@media (max-width: 420px) {
	#hero-primary-cta {
		padding: 17px 20px !important;
		gap: 9px !important;
	}

	#hero-primary-cta .soli-hero-cta-label {
		font-size: 15px !important;
		letter-spacing: 0.3px !important;
	}

	#hero-primary-cta .soli-hero-cta-arrow svg {
		width: 19px;
		height: 19px;
	}
}

/* ---------------------------------------------------------------------------
   5D. SECTION TƯ VẤN (#pre-register) — CTA #cta-trial-section
   ---------------------------------------------------------------------------
   CTA thay cho form đăng ký trải nghiệm đã gỡ. Chữ "TRẢI NGHIỆM 7 NGÀY MIỄN
   PHÍ" khá dài; desktop giữ 1 dòng nhờ white-space:nowrap trong inline style,
   màn hẹp thì hạ cỡ chữ + padding theo nấc để nút không tràn khỏi section.

   CHỈ tác động tới #cta-trial-section. Các CTA khác (Hero, Pricing, popup,
   Header) không mang id này.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
	#cta-trial-section {
		padding: 15px 22px !important;
		gap: 9px !important;
		font-size: 14px !important;
	}
}

@media (max-width: 420px) {
	#cta-trial-section {
		padding: 14px 16px !important;
		gap: 8px !important;
		font-size: 12.5px !important;
		letter-spacing: 0.3px !important;
	}

	#cta-trial-section .soli-cta-section-arrow svg {
		width: 16px;
		height: 16px;
	}
}

/* ---------------------------------------------------------------------------
   5B. POPUP TRIAL (POPUP 1) — RESPONSIVE / COMPACT
   ---------------------------------------------------------------------------
   CHỈ tác động tới #soli-trial-popup (popup "Tặng bạn 7 ngày trải nghiệm").
   KHÔNG chạm popup Ebook (POPUP 2) và KHÔNG chạm form Trial ở section
   #pre-register — 2 thứ đó không mang id này.

   Kích thước gốc nằm ở inline style trong
   template-parts/global/trial-popup.php, nên các rule dưới đây bắt buộc dùng
   !important mới ghi đè được. Đây thuần tuý là CSS trình bày: không đổi id,
   không đổi class, không đụng tới bất kỳ selector nào GTM/GA4/Zalo Pixel đang
   dùng ('.soli-pop-in form' vẫn KHÔNG khớp popup này).

   Đặt ở soli-wp.css vì file này sửa trực tiếp, KHÔNG cần recompile Tailwind
   (xem BUILD.md). soli-main.css là file compile — cố ý không đụng vào.
   ------------------------------------------------------------------------ */

/* Ưu tiên dvh: trên mobile, 100vh không trừ thanh địa chỉ của trình duyệt nên
   popup có thể bị cắt mất phần đáy. dvh phản ánh đúng chiều cao khả dụng. */
@supports (height: 100dvh) {
	#soli-trial-popup {
		max-height: calc(100dvh - 32px) !important;
	}
}

/* TABLET — không vượt quá 90vw theo yêu cầu. */
@media (max-width: 1024px) {
	#soli-trial-popup {
		width: min(400px, 90vw) !important;
	}
}

/* MOBILE — GIỮ NGUYÊN lề 20px như trước khi thu gọn, để bề ngang popup trên
   điện thoại không đổi (390px → popup vẫn 350px như cũ). Chỉ bo góc nhỏ lại
   một chút cho cân đối ở khổ hẹp. */
@media (max-width: 480px) {
	[data-soli-trial-overlay] {
		padding: 20px !important;
	}

	#soli-trial-popup {
		width: min(400px, 92vw) !important;
		border-radius: 16px !important;
	}
}

/* MÀN HÌNH THẤP (laptop 768px, mobile ngang) — thu bớt lề overlay và cho phần
   nội dung tự cuộn BÊN TRONG popup thay vì popup tràn khỏi viewport.
   Phần cuộn là <div style="min-height:0;overflow-y:auto"> ngay trong dialog. */
@media (max-height: 760px) {
	[data-soli-trial-overlay] {
		padding: 12px !important;
	}

	#soli-trial-popup {
		max-height: calc(100vh - 24px) !important;
	}
}

@supports (height: 100dvh) {
	@media (max-height: 760px) {
		#soli-trial-popup {
			max-height: calc(100dvh - 24px) !important;
		}
	}
}

/* MÀN HÌNH RẤT THẤP (< 620px, ví dụ mobile xoay ngang) — bóp thêm padding thân
   popup để CTA lộ ra sớm hơn, phần dư vẫn cuộn bên trong. */
@media (max-height: 620px) {
	#soli-trial-popup [data-soli-trial-body] {
		padding: 12px 14px 14px !important;
	}
}

/* TYPOGRAPHY Ở KHỔ HẸP — heading của popup phải giữ đúng 2 dòng (điểm ngắt do
   <br /> trong markup quyết định). Ở màn rất hẹp, dòng 1 "Tặng bạn 7 ngày sử
   dụng SOLI AI" ở 18px sẽ không đủ chỗ và bị wrap thành 3 dòng, nên hạ cỡ chữ
   theo nấc. CTA cũng hạ tương ứng để không tràn nút.
   Nội dung chữ KHÔNG đổi — chỉ đổi cỡ hiển thị. */
@media (max-width: 400px) {
	#soli-trial-popup h3 {
		font-size: 16.5px !important;
	}

	#soli-trial-popup #cta-trial-popup {
		font-size: 16.5px !important;
	}
}

@media (max-width: 340px) {
	#soli-trial-popup h3 {
		font-size: 15.5px !important;
	}

	#soli-trial-popup #cta-trial-popup {
		font-size: 15px !important;
		padding: 12px 12px !important;
	}
}

/* ---------------------------------------------------------------------------
   6. Z-INDEX ADMIN BAR vs POPUP — KHÔNG CẦN SỬA GÌ (ghi chú xác nhận)
   #wpadminbar của WP core dùng z-index: 99999. Popup Ebook của theme dùng
   z-index: 100000 (xem soli-download-popup.js / markup landing), tức popup +
   overlay LUÔN nằm TRÊN admin bar. Không cần hạ z-index của #wpadminbar hay
   ẩn nó đi. Riêng .screen-reader-text:focus ở mục 4 đặt 100001 để skip-link
   vẫn thấy được khi popup đang mở.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   7. PRINT
   Lý do: khách thường in trang Hướng dẫn thanh toán / Điều khoản. Ẩn các phần
   chỉ có ý nghĩa khi tương tác (header fixed, popup, toast, admin bar) và
   chuyển chữ về đen trắng để tiết kiệm mực.
   ------------------------------------------------------------------------ */
@media print {
	#wpadminbar,
	header,
	footer,
	.soli-toast,
	.soli-toast-wrap,
	[class*="soli-overlay"],
	[class*="soli-pop"] {
		display: none !important;
	}

	body {
		background: #ffffff !important;
		color: #000000 !important;
		font-size: 12pt;
	}

	a {
		color: #000000 !important;
		text-decoration: underline;
	}

	/* In ra URL đầy đủ cho link ngoài để bản in vẫn dùng được. */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}

	h1,
	h2,
	h3,
	h4 {
		page-break-after: avoid;
	}

	img,
	figure,
	table,
	blockquote {
		page-break-inside: avoid;
	}
}