/* ==========================================================================
   Bổ sung cho 2 trang sản phẩm — VIẾT TAY, nạp SAU 3 file tự sinh.

   Chứa hai loại thứ mà prototype không có:
     1. Chỉnh theo yêu cầu chủ dự án (tiêu đề thẻ 1 dòng).
     2. Popup "Yêu cầu nhận báo giá" dùng Contact Form 7.

   Popup KHÔNG scope trong `.tbtc-page` vì nó render ở wp_footer (ngoài
   `.tbtc-page`) để không làm đổi cấu trúc DOM đã đối chiếu 1:1 với prototype.
   Bù lại mọi class đều mang tiền tố `tbtc-modal` / `tbtc-form` nên không đụng
   Flatsome.
   ========================================================================== */

/* =========================================================================
   1. Tiêu đề thẻ sản phẩm — luôn 1 dòng, tràn thì "…"

   Thiết kế gốc không có line-clamp, mà thẻ lại cao cố định 405px với các khối
   position:absolute (__head ở top 245px, __specs ở top 315px) nên tên máy dài
   xuống 2 dòng sẽ đè lên bảng thông số. Prototype cũng vỡ y hệt.
   Đây là chỗ CỐ Ý lệch prototype theo yêu cầu.
   ====================================================================== */

.tbtc-page .card-catalog__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	/* Dự phòng cho trình duyệt không hỗ trợ -webkit-box: vẫn cắt 1 dòng. */
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Có -webkit-line-clamp thì bỏ nowrap để dấu "…" đặt đúng theo box, đồng thời
   cho phép tên ngắn vẫn hiển thị bình thường. */
@supports (-webkit-line-clamp: 1) {
	.tbtc-page .card-catalog__title {
		white-space: normal;
	}
}

/* Thẻ ở carousel "Sản phẩm tương tự" cũng cao cố định -> áp dụng như trên. */
.tbtc-page .card-featured__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================================================
   1b. Bấm vào cả khối thẻ sản phẩm là sang trang chi tiết

   CỐ TÌNH không dùng kiểu "stretched link" (phủ `::after` của thẻ <a> lên cả
   card). Cách đó gọn hơn nhưng khiến trỏ chuột vào bất kỳ đâu trong card cũng
   tính là hover thẻ <a>, nên chữ "Xem chi tiết" đổi màu và mũi tên nhích 4px —
   tức là ĐỔI GIAO DIỆN. Ở đây chỉ thêm con trỏ tay, còn việc điều hướng do
   tbtc-pages-extra.js lo, nhờ vậy mọi trạng thái hover giữ nguyên 100%.

   Đây là thay đổi hình thức duy nhất: con trỏ chuột. Không muốn thì xoá khối
   dưới đây, thẻ vẫn bấm được (chỉ là không có tín hiệu nào cho người dùng).
   ====================================================================== */

.tbtc-page .card-catalog {
	cursor: pointer;
}

/* =========================================================================
   2. Trạng thái đang tải của nút "Xem thêm"
   ====================================================================== */

.tbtc-page .catalog__more.is-loading {
	pointer-events: none;
	opacity: 0.55;
}

.tbtc-page .catalog__more.is-loading img {
	animation: tbtc-more-spin 0.9s linear infinite;
}

@keyframes tbtc-more-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Thẻ vừa được tải thêm — hiện dần cho đỡ giật. */
.tbtc-page .card-catalog.is-new {
	animation: tbtc-card-in 0.35s var(--ease, ease-out) both;
}

@keyframes tbtc-card-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   3. Popup "Yêu cầu nhận báo giá"
   Dùng lại đúng bộ token của thiết kế (màu, bo góc, bóng, typography).
   ====================================================================== */

.tbtc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--font-sans);
	color: var(--c-text);
}

.tbtc-modal.is-open {
	display: flex;
}

.tbtc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--c-navy-overlay, rgba(11, 44, 95, 0.72));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: tbtc-fade 0.2s ease-out both;
}

.tbtc-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--c-white);
	border-radius: var(--r-xl);
	box-shadow: 0 24px 64px rgba(11, 44, 95, 0.28);
	animation: tbtc-pop 0.24s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

@keyframes tbtc-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes tbtc-pop {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tbtc-modal__backdrop,
	.tbtc-modal__dialog {
		animation: none;
	}
}

/* ---- Đầu popup: dải xanh navy như dải CTA của thiết kế ------------------ */

.tbtc-modal__head {
	position: relative;
	padding: 24px 56px 24px 24px;
	background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	color: var(--c-white);
}

.tbtc-modal__eyebrow {
	margin: 0 0 6px;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffd9bd;
}

.tbtc-modal__title {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-bold);
	color: var(--c-white);
	text-transform: none;
	letter-spacing: -0.01em;
}

.tbtc-modal__desc {
	margin: 8px 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.82);
}

.tbtc-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.16);
	color: var(--c-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur, 250ms) var(--ease, ease);
}

.tbtc-modal__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.tbtc-modal__close:focus-visible {
	outline: 2px solid var(--c-white);
	outline-offset: 2px;
}

.tbtc-modal__body {
	padding: 24px;
}

/* Dòng nhắc sản phẩm đang xem */
.tbtc-modal__product {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-blue-50, #f2f7ff);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-meta);
}

.tbtc-modal__product strong {
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

/* ---- Form Contact Form 7 ---------------------------------------------- */
/* CF7 tự bọc field trong <span class="wpcf7-form-control-wrap">, nên style
   nhắm vào .wpcf7-form-control là chắc chắn nhất. */

.tbtc-modal .wpcf7 {
	margin: 0;
}

/* CF7 bọc nội dung form trong <p>; xoá margin mặc định của những <p> KHÔNG
   phải field của mình (nếu xoá cả thì mất luôn khoảng cách giữa các field). */
.tbtc-modal .wpcf7-form > p:not(.tbtc-form__field) {
	margin: 0;
}

.tbtc-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

/* Đặt kèm .tbtc-modal để thắng `.wpcf7-form > p` của CF7 về độ ưu tiên. */
.tbtc-modal .tbtc-form__field {
	display: block;
	margin: 0 0 16px;
}

/* Trong hàng 2 cột thì khoảng cách do `gap` của grid lo — bỏ margin của field
   để không cộng dồn thành 32px. */
.tbtc-modal .tbtc-form__row .tbtc-form__field {
	margin-bottom: 0;
}

/* Đặt cả trên .tbtc-modal để thắng chắc: Flatsome/CF7 có rule cho <label>
   khiến display bị tính là inline-block. */
.tbtc-modal .tbtc-form__field > label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	color: var(--c-meta);
	text-transform: none;
	letter-spacing: normal;
}

.tbtc-form__req {
	color: var(--c-orange);
}

.tbtc-modal .wpcf7-form-control-wrap {
	display: block;
}

.tbtc-modal .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-list-item-label) {
	width: 100%;
	/* KHÔNG đặt `height` ở đây: rule này có 4 class nên sẽ thắng rule riêng của
	   textarea bên dưới, làm textarea giữ nguyên 10 dòng mặc định của CF7.
	   Chiều cao khai báo riêng cho input/select và textarea. */
	min-height: 0;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--c-border-2);
	border-radius: var(--r-md);
	background: var(--c-white);
	box-shadow: none;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
	transition: border-color var(--dur, 250ms) var(--ease, ease), box-shadow var(--dur, 250ms) var(--ease, ease);
}

/* CF7 mặc định textarea 10 dòng — cao gần gấp đôi chỗ cần. Ghim 4 dòng.
   Phải thêm :not(.wpcf7-submit) cho đủ độ ưu tiên, vì rule chung phía trên có
   tới 3 class (.tbtc-modal + .wpcf7-form-control + 2 lớp :not) và đặt
   height:auto — nếu không nó thắng và textarea vẫn cao 10 dòng. */
/* Flatsome ép height cho input/select — trả lại auto để padding quyết định. */
.tbtc-modal input.wpcf7-form-control:not(.wpcf7-submit),
.tbtc-modal select.wpcf7-form-control {
	height: auto;
}

.tbtc-modal textarea.wpcf7-form-control:not(.wpcf7-submit) {
	height: 104px;
	min-height: 104px;
	resize: vertical;
}

/* CF7 luôn in sẵn khối thông báo (rỗng) và ô spinner, cả hai vẫn chiếm chỗ nên
   đáy popup bị thừa ~70px. Chỉ cho chúng chiếm chỗ khi thực sự có nội dung. */
.tbtc-modal .wpcf7-response-output:empty {
	display: none;
}

.tbtc-modal form:not(.submitting) .wpcf7-spinner {
	display: none;
}

.tbtc-modal .wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(0, 86, 214, 0.12);
	outline: none;
}

.tbtc-modal .wpcf7-form-control::placeholder {
	color: #9aa4b5;
}

/* Nút gửi — dùng lại gradient xanh của .btn--primary trong thiết kế */
.tbtc-modal .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 4px 0 0;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--r-md);
	background: linear-gradient(180deg, #1a72ee 0%, var(--c-blue) 100%);
	box-shadow: var(--sh-button, 0 8px 16px rgba(20, 130, 252, 0.08));
	font-family: var(--font-sans);
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	color: var(--c-white);
	text-transform: uppercase;
	cursor: pointer;
	transition: filter var(--dur, 250ms) var(--ease, ease);
}

.tbtc-modal .wpcf7-submit:hover {
	filter: brightness(1.08);
}

.tbtc-modal .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.tbtc-modal .wpcf7-spinner {
	margin: 8px auto 0;
}

/* Thông báo lỗi / thành công của CF7 */
.tbtc-modal .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	color: #d63638;
}

.tbtc-modal .wpcf7-form-control.wpcf7-not-valid {
	border-color: #d63638;
}

.tbtc-modal .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-width: 1px;
	border-radius: var(--r-md);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.tbtc-modal .wpcf7 form.invalid .wpcf7-response-output,
.tbtc-modal .wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #f0b849;
	background: #fff8e5;
	color: #7a5b00;
}

.tbtc-modal .wpcf7 form.sent .wpcf7-response-output {
	border-color: #00a32a;
	background: #edfaef;
	color: #00701d;
}

.tbtc-modal .wpcf7 form.failed .wpcf7-response-output,
.tbtc-modal .wpcf7 form.aborted .wpcf7-response-output {
	border-color: #d63638;
	background: #fcf0f1;
	color: #8a1f21;
}

/* ---- Mobile ----------------------------------------------------------- */

@media (max-width: 575px) {
	.tbtc-modal {
		padding: 0;
		align-items: flex-end;
	}

	.tbtc-modal__dialog {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--r-xl) var(--r-xl) 0 0;
	}

	.tbtc-modal__head {
		padding: 20px 52px 20px 20px;
	}

	.tbtc-modal__body {
		padding: 20px;
	}

	.tbtc-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* =========================================================================
   8. Khối Hỗ trợ mua hàng (Sidebar chi tiết SP)
   ====================================================================== */

/* Mặc định pdp-body__grid có 2 cột (310px 1fr) trên desktop.
   Khi có sidebar hỗ trợ, chuyển thành 3 cột. */
@media (min-width: 1200px) {
	.tbtc-page .pdp-body__grid:has(.pdp-sidebar-support) {
		grid-template-columns: 310px minmax(0, 1fr) 280px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.tbtc-page .pdp-body__grid:has(.pdp-sidebar-support) {
		grid-template-columns: 240px minmax(0, 1fr) 260px;
	}
}

.tbtc-page .pdp-sidebar-support {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-6));
	z-index: 10;
}

.tbtc-page #fixSupport {
	background: var(--c-white, #fff);
	border-radius: 12px;
}

.tbtc-page #fixSupport img { border: 0px; }
.tbtc-page #fixSupport a { text-decoration: none; }
.tbtc-page #fixSupport a:hover { text-decoration: underline; }
.tbtc-page #fixSupport .clear { clear: both; }

.tbtc-page #fixSupport .support-title {
	background: linear-gradient(to right top, #6f96f3, #164ed2);
	border-radius: 10px 10px 0 0;
	font-size: 17px;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tbtc-page #fixSupport .support-title span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tbtc-page #fixSupport .support-content {
	box-shadow: 0 5px 15px rgba(153, 153, 153, 0.2);
	border-radius: 0px 0px 12px 12px;
	padding: 10px 0px;
}

.tbtc-page #fixSupport .support-item {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	gap: 15px;
}

.tbtc-page #fixSupport .support-item .support-img {
	flex-shrink: 0;
	width: 45px;
}

.tbtc-page #fixSupport .support-item .support-text {
	flex-grow: 1;
	min-width: 0;
}

.tbtc-page #fixSupport .support-item .support-img img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: solid 2px #e0e0e0;
	object-fit: cover;
	display: block;
}

.tbtc-page #fixSupport .support-item .support-text p {
	margin: 0px;
	padding: 2px 0px;
	line-height: 1.3;
}

.tbtc-page #fixSupport .support-item .support-text p.name {
	font-weight: bold;
	color: var(--c-navy, #164ed2);
	font-size: 14px;
}

.tbtc-page #fixSupport .support-item .support-text p.tel a {
	color: var(--c-orange, #e5532a);
	font-weight: bold;
	font-size: 16px;
	white-space: nowrap;
	display: inline-block;
}

@media (max-width: 991px) {
	/* Dưới 992px, pdp-body__grid là 1 cột, sidebar xuống dưới cùng. */
	.tbtc-page .pdp-sidebar-support {
		position: static;
		margin-top: var(--sp-8);
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
}