/* ==========================================================================
   LEGAL-PAGE.CSS — Tư Vấn Pháp Lý & Định Giá BĐS
   Mobile-first responsive styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED: req mark
   -------------------------------------------------------------------------- */
.req { color: #F26522; }

/* ==========================================================================
   TƯ VẤN PHÁP LÝ — .legal-page
   ========================================================================== */

/* --- HERO --- */
.legal-hero {
	position:    relative;
	min-height:  520px;
	display:     flex;
	align-items: center;
	overflow:    hidden;
}
.legal-hero__bg {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
	z-index:             0;
}
.legal-hero__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(135deg, rgba(16,30,51,.88) 0%, rgba(26,59,102,.60) 100%);
	z-index:    1;
}
.legal-hero__content {
	position:       relative;
	z-index:        2;
	padding-top:    48px;
	padding-bottom: 48px;
}
.legal-hero__title {
	font-size:      3.25rem;
	font-weight:    800;
	color:          #fff;
	line-height:    1.15;
	letter-spacing: -.5px;
	margin:         16px 0 16px;
}
.legal-hero__sub {
	font-size:   1.0625rem;
	color:       rgba(255,255,255,.85);
	line-height: 1.6;
	max-width:   620px;
	margin-bottom: 28px;
}
.legal-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- STATS BAR --- */
.legal-stats-bar {
	background:    #fff;
	border-bottom: 1px solid var(--color-border);
	padding:       0;
}
.legal-stats-bar__inner {
	display:         flex;
	align-items:     stretch;
	justify-content: space-around;
}
.legal-stat-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	padding:        24px 20px;
	text-align:     center;
	gap:            4px;
}
.legal-stat-num {
	font-size:   2rem;
	font-weight: 800;
	color:       var(--color-primary);
	line-height: 1;
}
.legal-stat-label {
	font-size: .8125rem;
	color:     var(--color-text-muted);
}
.legal-stat-div {
	width:      1px;
	background: var(--color-border);
	margin:     16px 0;
}

/* --- INTRO --- */
.legal-intro {
	padding:    80px 0;
	background: #fff;
}
.legal-intro__inner {
	display:     flex;
	gap:         64px;
	align-items: center;
}
.legal-intro__content {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            16px;
}
.legal-intro__desc {
	font-size:   .9375rem;
	color:       var(--color-text-secondary);
	line-height: 1.75;
}
.legal-intro__media {
	flex:          1;
	display:       flex;
	flex-direction: column;
	gap:           16px;
}
.legal-intro__img {
	width:         100%;
	height:        340px;
	object-fit:    cover;
	border-radius: var(--radius-xl);
}
.legal-intro__badges {
	display: flex;
	flex-direction: column;
	gap:     12px;
}
.legal-intro__badge {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       16px 20px;
	background:    var(--color-surface);
	border:        1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.legal-intro__badge i { color: var(--color-accent); flex-shrink: 0; width: 20px; height: 20px; }
.legal-intro__badge strong { display: block; font-size: .9375rem; font-weight: 700; color: var(--color-text-primary); }
.legal-intro__badge span  { font-size: .8125rem; color: var(--color-text-muted); }

/* --- SERVICES --- */
.legal-services {
	padding:    80px 0;
	background: var(--color-bg);
}
.legal-section-header {
	text-align:    center;
	margin-bottom: 48px;
}
.legal-section-sub {
	font-size:   1rem;
	color:       var(--color-text-muted);
	margin-top:  8px;
}
.legal-services__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}
.legal-svc-card {
	background:    #fff;
	border:        1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding:       28px;
	display:       flex;
	flex-direction: column;
	gap:           12px;
	transition:    box-shadow .25s, transform .25s;
}
.legal-svc-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.08);
	transform:  translateY(-3px);
}
.legal-svc-card__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           52px;
	height:          52px;
	background:      rgba(242,101,34,.1);
	border-radius:   10px;
}
.legal-svc-card__icon i { color: var(--color-accent); width: 24px; height: 24px; }
.legal-svc-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); }
.legal-svc-card__desc  { font-size: .875rem; color: var(--color-text-secondary); line-height: 1.65; }

/* --- PROCESS --- */
.legal-process {
	padding:    80px 0;
	background: linear-gradient(180deg, #1E3A5F 0%, #152D4A 100%);
}
.legal-process__steps {
	display:        flex;
	flex-direction: column;
	gap:            0;
}
.legal-step {
	display:     flex;
	gap:         32px;
	align-items: flex-start;
	padding:     28px 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.legal-step:last-child { border-bottom: none; }
.legal-step__num {
	font-size:   2.5rem;
	font-weight: 900;
	color:       var(--color-accent);
	line-height: 1;
	flex-shrink: 0;
	min-width:   56px;
}
.legal-step__title { font-size: 1.0625rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.legal-step__desc  { font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.65; }

/* --- CONTACT FORM --- */
.legal-contact {
	padding:    80px 0;
	background: var(--color-bg);
}
.legal-contact__inner {
	display:     flex;
	gap:         64px;
	align-items: flex-start;
}
.legal-contact__info {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            20px;
}
.legal-contact__desc {
	font-size:   .9375rem;
	color:       var(--color-text-secondary);
	line-height: 1.7;
}
.legal-contact__highlights { display: flex; flex-direction: column; gap: 12px; }
.legal-highlight {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   .9375rem;
	color:       var(--color-text-primary);
}
.legal-highlight i { color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; }
.legal-contact__hotline {
	display:     flex;
	align-items: center;
	gap:         12px;
	padding:     16px 20px;
	background:  #fff;
	border:      1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.legal-contact__hotline i { color: var(--color-accent); width: 20px; height: 20px; flex-shrink: 0; }
.legal-contact__hotline-label { font-size: .75rem; color: var(--color-text-muted); display: block; }
.legal-contact__hotline-num   { font-size: 1.25rem; font-weight: 800; color: var(--color-primary); text-decoration: none; }
.legal-contact__form-wrap { flex: 0 0 520px; }
.legal-contact__form-card {
	background:    #fff;
	border:        1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding:       40px;
}
.legal-contact__form-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 24px; }

/* Shared form styles */
.legal-form, .val-form { display: flex; flex-direction: column; gap: 16px; }
.legal-form__group, .val-form__group { display: flex; flex-direction: column; gap: 6px; }
.legal-form__row, .val-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.legal-form__label, .val-form__label { font-size: .8125rem; font-weight: 600; color: var(--color-text-primary); }
.legal-form__input, .val-form__input {
	padding:       12px 14px;
	border:        1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family:   var(--font-base);
	font-size:     .9375rem;
	color:         var(--color-text-primary);
	background:    var(--color-bg);
	width:         100%;
	transition:    border-color .2s;
}
.legal-form__input:focus, .val-form__input:focus {
	outline:      none;
	border-color: var(--color-primary);
	background:   #fff;
}
.legal-form__textarea, .val-form__textarea { resize: vertical; min-height: 100px; }
.legal-form__submit, .val-form__submit { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; }
.legal-form__note, .val-form__note {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .8rem;
	color:       var(--color-text-muted);
	text-align:  center;
	justify-content: center;
}
.legal-form__note i, .val-form__note i { width: 13px; height: 13px; }

/* --- FAQ --- */
.legal-faq {
	padding:    80px 0;
	background: var(--color-surface);
}
.legal-faq__list { display: flex; flex-direction: column; gap: 0; max-width: 860px; margin: 0 auto; }
.legal-faq__item {
	border-bottom: 1px solid var(--color-border);
	overflow:      hidden;
}
.legal-faq__item:first-child { border-top: 1px solid var(--color-border); }
.legal-faq__q {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 0;
	font-size:       1rem;
	font-weight:     600;
	cursor:          pointer;
	color:           var(--color-text-primary);
	list-style:      none;
}
.legal-faq__q::-webkit-details-marker { display: none; }
.legal-faq__q::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--color-accent); flex-shrink: 0; }
.legal-faq__item[open] .legal-faq__q::after { content: '−'; }
.legal-faq__a { padding: 0 0 20px; }
.legal-faq__a p { font-size: .9375rem; color: var(--color-text-secondary); line-height: 1.7; }

/* ==========================================================================
   ĐỊNH GIÁ BĐS — .valuation-page
   ========================================================================== */

/* --- HERO --- */
.val-hero {
	position:    relative;
	min-height:  520px;
	display:     flex;
	align-items: center;
	overflow:    hidden;
}
.val-hero__bg {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
	z-index:             0;
}
.val-hero__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(135deg, rgba(16,30,51,.9) 0%, rgba(26,59,102,.55) 100%);
	z-index:    1;
}
.val-hero__content {
	position:       relative;
	z-index:        2;
	padding-top:    48px;
	padding-bottom: 48px;
}
.val-hero__title {
	font-size:      3.25rem;
	font-weight:    800;
	color:          #fff;
	line-height:    1.15;
	letter-spacing: -.5px;
	margin:         16px 0 16px;
}
.val-hero__sub {
	font-size:   1.0625rem;
	color:       rgba(255,255,255,.85);
	line-height: 1.6;
	max-width:   640px;
	margin-bottom: 28px;
}
.val-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- STATS BAR --- */
.val-stats-bar {
	background:    #fff;
	border-bottom: 1px solid var(--color-border);
}
.val-stats-bar__inner {
	display:         flex;
	align-items:     stretch;
	justify-content: space-around;
}
.val-stat-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	padding:        24px 20px;
	text-align:     center;
	gap:            4px;
}
.val-stat-num { font-size: 2rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.val-stat-label { font-size: .8125rem; color: var(--color-text-muted); }
.val-stat-div  { width: 1px; background: var(--color-border); margin: 16px 0; }

/* --- FORM SECTION --- */
.val-form-section {
	padding:    80px 0;
	background: #fff;
}
.val-form-section__inner {
	display:     flex;
	gap:         64px;
	align-items: flex-start;
}
.val-form-section__info {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            20px;
}
.val-form-section__desc { font-size: .9375rem; color: var(--color-text-secondary); line-height: 1.7; }
.val-form-section__benefits { display: flex; flex-direction: column; gap: 12px; }
.val-benefit {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   .9375rem;
	color:       var(--color-text-primary);
}
.val-benefit i { color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; }

.val-form-wrap { flex: 0 0 540px; }
.val-form-card {
	background:    var(--color-bg);
	border:        1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding:       36px;
}
.val-form-card__title { font-size: 1.125rem; font-weight: 800; margin-bottom: 24px; color: var(--color-text-primary); }

.val-form__radio-group {
	display:   flex;
	gap:       16px;
	flex-wrap: wrap;
}
.val-form__radio {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .875rem;
	cursor:      pointer;
}
.val-form__divider {
	border:     none;
	border-top: 1px solid var(--color-border);
	margin:     4px 0;
}
.val-form__section-label {
	font-size:   .8rem;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color:       var(--color-text-muted);
}

/* --- METHODS --- */
.val-methods {
	padding:    80px 0;
	background: var(--color-surface);
}
.val-section-header { text-align: center; margin-bottom: 48px; }
.val-section-sub { font-size: 1rem; color: var(--color-text-muted); margin-top: 8px; }
.val-methods__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}
.val-method-card {
	background:    #fff;
	border:        1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding:       32px 28px;
	display:       flex;
	flex-direction: column;
	gap:           14px;
	position:      relative;
	transition:    box-shadow .25s, transform .25s;
}
.val-method-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-3px); }
.val-method-card--featured {
	border-color: var(--color-accent);
	background:   var(--color-primary);
}
.val-method-card--featured .val-method-card__title,
.val-method-card--featured .val-method-card__desc { color: #fff; }
.val-method-card--featured .val-method-card__icon i { color: #fff; }
.val-method-card--featured .val-method-card__icon { background: rgba(255,255,255,.15); }
.val-method-card--featured .val-method-card__tag { background: rgba(255,255,255,.2); color: #fff; }

.val-method-card__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           52px;
	height:          52px;
	background:      rgba(242,101,34,.1);
	border-radius:   10px;
}
.val-method-card__icon i { color: var(--color-accent); width: 24px; height: 24px; }
.val-method-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); }
.val-method-card__desc  { font-size: .875rem; color: var(--color-text-secondary); line-height: 1.65; flex: 1; }
.val-method-card__tag {
	display:       inline-block;
	padding:       4px 12px;
	background:    rgba(242,101,34,.1);
	color:         var(--color-accent);
	border-radius: 20px;
	font-size:     .75rem;
	font-weight:   700;
	align-self:    flex-start;
}

/* --- CTA BANNER --- */
.val-cta-banner { padding: 64px 0; background: var(--color-bg); }
.val-cta-banner__inner {
	display:       flex;
	align-items:   center;
	gap:           48px;
	border-radius: 16px;
	padding:       52px 60px;
}
.val-cta-banner__left { flex: 1; }
.val-cta-banner__title { font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 12px; }
.val-cta-banner__desc  { font-size: .9375rem; color: rgba(255,255,255,.8); line-height: 1.65; }
.val-cta-banner__right { flex: 0 0 360px; display: flex; flex-direction: column; gap: 16px; }
.val-cta-input-wrap {
	display:       flex;
	align-items:   center;
	gap:           10px;
	background:    rgba(255,255,255,.13);
	border:        1px solid rgba(255,255,255,.27);
	border-radius: 8px;
	padding:       0 16px;
	height:        52px;
}
.val-cta-input__icon { color: rgba(255,255,255,.7); width: 18px; height: 18px; flex-shrink: 0; }
.val-cta-input {
	background:  transparent;
	border:      none;
	outline:     none;
	font-family: var(--font-base);
	font-size:   .9375rem;
	color:       #fff;
	width:       100%;
}
.val-cta-input::placeholder { color: rgba(255,255,255,.5); }
.val-cta-btn { width: 100%; justify-content: center; }

/* ==========================================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ========================================================================== */
@media ( max-width: 1024px ) {
	/* Legal intro */
	.legal-intro__inner { flex-direction: column; gap: 40px; }
	.legal-intro__img   { height: 280px; }

	/* Legal services grid */
	.legal-services__grid { grid-template-columns: repeat(2, 1fr); }

	/* Legal contact */
	.legal-contact__inner { flex-direction: column; gap: 40px; }
	.legal-contact__form-wrap { flex: none; width: 100%; }

	/* Val form */
	.val-form-section__inner { flex-direction: column; gap: 40px; }
	.val-form-wrap { flex: none; width: 100%; }

	/* Val methods */
	.val-methods__grid { grid-template-columns: 1fr; gap: 16px; }
	.val-method-card { flex-direction: row; align-items: flex-start; gap: 20px; }
	.val-method-card__icon { flex-shrink: 0; }

	/* CTA banner */
	.val-cta-banner__inner { flex-direction: column; gap: 32px; padding: 40px; }
	.val-cta-banner__right { flex: none; width: 100%; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ========================================================================== */
@media ( max-width: 768px ) {

	/* ---- Legal Hero ---- */
	.legal-hero       { min-height: 360px; }
	.legal-hero__title { font-size: 2rem; }
	.legal-hero__sub   { font-size: .9375rem; }
	.legal-hero__actions { flex-direction: column; }
	.legal-hero__actions .btn { width: 100%; justify-content: center; }

	/* ---- Legal Stats Bar ---- */
	.legal-stats-bar__inner { flex-wrap: wrap; }
	.legal-stat-item  { width: 50%; padding: 16px 12px; }
	.legal-stat-div   { display: none; }
	.legal-stat-num   { font-size: 1.625rem; }

	/* ---- Legal Intro ---- */
	.legal-intro      { padding: 48px 0; }
	.legal-intro__img { height: 220px; }
	.legal-intro__badges { display: none; }

	/* ---- Legal Services ---- */
	.legal-services   { padding: 48px 0; }
	.legal-services__grid { grid-template-columns: 1fr; gap: 16px; }
	.legal-section-header { margin-bottom: 28px; }
	.legal-section-header .section-title { font-size: 1.5rem; }

	/* ---- Legal Process ---- */
	.legal-process    { padding: 48px 0; }
	.legal-step       { flex-direction: column; gap: 12px; padding: 20px 0; }
	.legal-step__num  { font-size: 1.75rem; }
	.legal-step__title { font-size: 1rem; }

	/* ---- Legal Contact ---- */
	.legal-contact    { padding: 48px 0; }
	.legal-contact__form-card { padding: 24px 20px; }
	.legal-form__row  { grid-template-columns: 1fr; }

	/* ---- Legal FAQ ---- */
	.legal-faq        { padding: 48px 0; }
	.legal-faq__q     { font-size: .9375rem; }

	/* ---- Val Hero ---- */
	.val-hero         { min-height: 360px; }
	.val-hero__title  { font-size: 2rem; }
	.val-hero__sub    { font-size: .9375rem; }
	.val-hero__actions { flex-direction: column; }
	.val-hero__actions .btn { width: 100%; justify-content: center; }

	/* ---- Val Stats Bar ---- */
	.val-stats-bar__inner { flex-wrap: wrap; }
	.val-stat-item    { width: 50%; padding: 16px 12px; }
	.val-stat-div     { display: none; }
	.val-stat-num     { font-size: 1.625rem; }

	/* ---- Val Form Section ---- */
	.val-form-section { padding: 48px 0; }
	.val-form-section__info .section-title { font-size: 1.5rem; }
	.val-form-card    { padding: 24px 16px; }
	.val-form__row    { grid-template-columns: 1fr; }
	.val-form__radio-group { flex-direction: column; gap: 10px; }

	/* ---- Val Methods ---- */
	.val-methods      { padding: 48px 0; }
	.val-methods__grid { grid-template-columns: 1fr; }
	.val-method-card  { flex-direction: column; gap: 14px; }
	.val-section-header .section-title { font-size: 1.5rem; }

	/* ---- Val CTA Banner ---- */
	.val-cta-banner   { padding: 40px 0; }
	.val-cta-banner__inner { flex-direction: column; padding: 32px 24px; gap: 28px; border-radius: 12px; }
	.val-cta-banner__title { font-size: 1.375rem; }
	.val-cta-banner__right { width: 100%; }
}

/* ==========================================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ========================================================================== */
@media ( max-width: 480px ) {
	.legal-hero__title { font-size: 1.75rem; }
	.val-hero__title   { font-size: 1.75rem; }

	.legal-stat-item,
	.val-stat-item { width: 100%; border-bottom: 1px solid var(--color-border); }

	.legal-contact__form-card { padding: 20px 16px; }
	.legal-contact__hotline   { flex-wrap: wrap; }

	.val-cta-banner__inner { padding: 24px 16px; }
}