/* ============================================================
   TechTide — FAQ (page-faqs.php)
   Hero dùng .tt-ab-hero (about.css). Mỗi nhóm = section full-width, nền trắng/xám XEN KẼ + line ngang.
   Desktop: 2 cột — trái = câu hỏi ĐÁNH SỐ (tab) | line full-height | phải = đáp án ĐÓNG KHUNG (card Services).
   Mobile (≤1024): ẩn tab; cả nhóm trong 1 THẺ bo góc; mỗi câu có mũi tên →, bấm xổ đáp án.
   Card chuẩn: nền #fff, viền 1px #e2e2de, bo 6px, shadow nhẹ, padding 28px. Số: .85rem/500/ink-soft.
   ============================================================ */

/* ===== Vùng FAQ: line full-màn ngăn hero, nền trắng. Nhóm cách nhau bằng LINE NGẮN (= bề rộng nội dung) ===== */
.tt-faqs{ border-top: 1px solid var(--tt-line); background: var(--tt-bg); padding-bottom: clamp(2rem, 4vw, 3rem); }
.tt-faqs__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-faqs__cat{ padding-block: clamp(2.75rem, 5vw, 4rem); }
.tt-faqs__cat:first-child{ padding-top: clamp(2rem, 4vw, 3rem); }
.tt-faqs__cat + .tt-faqs__cat{ border-top: 1px solid var(--tt-line); }   /* line ngắn giữa các nhóm: từ số → mép phải card */
.tt-faqs__cattitle{ font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 clamp(1.5rem, 2.5vw, 2rem); }

/* ===== Khối 2 cột (line full-height nhờ align-items:stretch) ===== */
.tt-faq2{ display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(1.75rem, 3vw, 3rem); align-items: stretch; }

/* ---- Cột trái: câu hỏi đánh số (tab) ---- */
.tt-faq2__tabs{ display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.85rem, 1.4vw, 1.2rem); }
.tt-faq2__tab{ display: flex; align-items: flex-start; gap: .7rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: rgba(0, 0, 0, .42); transition: color .2s ease; }
.tt-faq2__num{ flex: 0 0 auto; font-family: var(--tt-font-body); font-weight: 500; font-size: .85rem; line-height: 1.55; color: var(--tt-ink-soft); }
.tt-faq2__tabtext{ font-family: var(--tt-font-display); font-size: 1rem; font-weight: 500; line-height: 1.45; }
.tt-faq2__tab:hover{ color: rgba(0, 0, 0, .7); }
.tt-faq2__tab.is-active{ color: var(--tt-ink); }
.tt-faq2__tab.is-active .tt-faq2__num{ color: var(--tt-ink); }
.tt-faq2__tab.is-active .tt-faq2__tabtext{ font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.tt-faq2__tab:focus-visible{ outline: 2px solid var(--tt-accent); outline-offset: 3px; border-radius: 4px; }

/* ---- Cột phải: đáp án đóng khung (card) ---- */
.tt-faq2__panels{ border-left: 1px solid rgba(0, 0, 0, .14); padding-left: clamp(1.5rem, 2.5vw, 2.5rem); }
.tt-faq2__panel{ display: none; }
.tt-faq2__panel.is-active{ display: block; }
.tt-faq2__panelname{ display: none; }                 /* desktop: ẩn (câu hỏi ở cột trái) */
.tt-faq2__answer{ display: block; }
.tt-faq2__abox{ background: #fff; border: 1px solid #e2e2de; border-radius: 6px; box-shadow: rgba(0, 0, 0, .1) 0 4px 8px -2px, rgba(0, 0, 0, .06) 0 2px 4px -2px; padding: 28px; }
.tt-faq2__abox p{ color: #2c2c2c; font-size: 1.0625rem; line-height: 1.7; margin: 0; }

/* ===== MOBILE (≤1024): thẻ cụm + accordion mũi tên ===== */
@media (max-width: 1024px){
	.tt-faqs__cat{ padding-block: clamp(2.5rem, 7vw, 3.5rem); }
	.tt-faq2{ display: block; }
	.tt-faq2__tabs{ display: none; }                  /* ẩn list tab */

	/* cả nhóm = 1 thẻ bo góc (card Services) */
	.tt-faq2__panels{
		border-left: 0; padding-left: 0;
		background: #fff; border: 1px solid #e2e2de; border-radius: 6px;
		box-shadow: rgba(0, 0, 0, .1) 0 4px 8px -2px, rgba(0, 0, 0, .06) 0 2px 4px -2px;
		overflow: hidden;
	}
	.tt-faq2__panel{ display: block; border-top: 1px solid var(--tt-line); }
	.tt-faq2__panel:first-child{ border-top: 0; }

	/* mỗi câu = nút mở (số + câu hỏi + mũi tên →) */
	.tt-faq2__panelname{
		display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
		background: none; border: 0; cursor: pointer;
		padding: clamp(1.05rem, 3.5vw, 1.3rem) clamp(1.1rem, 4vw, 1.5rem);
	}
	.tt-faq2__pnum{ flex: 0 0 auto; font-family: var(--tt-font-body); font-weight: 500; font-size: .85rem; color: var(--tt-ink-soft); }
	.tt-faq2__pntext{ flex: 1 1 auto; min-width: 0; font-family: var(--tt-font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--tt-ink); }
	.tt-faq2__arrow{ flex: 0 0 auto; width: 18px; height: 18px; color: var(--tt-ink-soft); transition: transform .3s ease; }
	.tt-faq2__panel.is-open .tt-faq2__arrow{ transform: rotate(90deg); }      /* → xoay xuống */
	.tt-faq2__panelname:focus-visible{ outline: 2px solid var(--tt-accent); outline-offset: -2px; }

	/* đáp án xổ (grid-rows 0fr→1fr) */
	/* collapse bằng max-height (chắc chắn ẩn trên Safari iOS; grid 0fr không co được ở đó) */
	.tt-faq2__answer{ max-height: 0; overflow: hidden; transition: max-height .35s ease; }
	.tt-faq2__panel.is-open .tt-faq2__answer{ max-height: 640px; }
	.tt-faq2__abox{ background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 clamp(1.1rem, 4vw, 1.5rem) clamp(1.1rem, 3.5vw, 1.4rem); }
	.tt-faq2__abox p{ font-size: 1rem; line-height: 1.65; }
}