/* Generated by performance:optimize-assets. */

/* style.frontend.css */
*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}h1,h2,h3,h4{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code{font-family:var(--font-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}button,input,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,figure,p{margin:0}ol,ul,menu{margin:0;padding:0;list-style:none}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}img,svg,video,iframe,embed{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}:root{--background:45 33% 95%;--foreground:201 28% 21%;--card:0 0% 100%;--card-foreground:201 28% 21%;--popover:0 0% 100%;--popover-foreground:201 28% 21%;--primary:204 65% 18%;--primary-foreground:0 0% 100%;--secondary:120 6% 91%;--secondary-foreground:204 65% 18%;--muted:120 6% 91%;--muted-foreground:201 18% 42%;--accent:40 51% 55%;--accent-foreground:204 65% 18%;--destructive:0 84% 60%;--destructive-foreground:0 0% 98%;--border:120 6% 91%;--input:120 6% 91%;--ring:40 51% 55%;--chart-1:204 65% 18%;--chart-2:40 51% 55%;--chart-3:197 37% 24%;--chart-4:43 74% 66%;--chart-5:27 87% 67%;--radius:.625rem;--font-heading:"Lora", ui-serif, Georgia, serif;--font-body:"Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;--font-display:"Lora", ui-serif, Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--sidebar-background:45 33% 95%;--sidebar-foreground:201 28% 21%;--sidebar-primary:204 65% 18%;--sidebar-primary-foreground:0 0% 98%;--sidebar-accent:120 6% 91%;--sidebar-accent-foreground:204 65% 18%;--sidebar-border:120 6% 91%;--sidebar-ring:40 51% 55%}*{border-color:hsl(var(--border));outline-color:hsl(var(--ring) / .5)}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{background-color:hsl(var(--background));font-family:var(--font-body);color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{color:#10364b;background-color:#c7a052}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-x-0{left:0;right:0}.left-0{left:0}.left-3{left:.75rem}.left-4{left:1rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-2{top:.5rem}.top-28{top:7rem}.z-50{z-index:50}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-.5rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.w-0{width:0}.w-1{width:.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-24{width:6rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-xl{max-width:36rem}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.list-none{list-style-type:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-border{border-color:hsl(var(--border))}.border-primary{border-color:hsl(var(--primary))}.bg-background{background-color:hsl(var(--background))}.bg-card{background-color:hsl(var(--card))}.bg-destructive{background-color:hsl(var(--destructive))}.bg-foreground{background-color:hsl(var(--foreground))}.bg-gold{--tw-bg-opacity:1;background-color:rgb(199 160 82/var(--tw-bg-opacity,1))}.bg-ivory{--tw-bg-opacity:1;background-color:rgb(247 245 239/var(--tw-bg-opacity,1))}.bg-navy{--tw-bg-opacity:1;background-color:rgb(16 54 75/var(--tw-bg-opacity,1))}.bg-primary{background-color:hsl(var(--primary))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:#0000}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-1{padding-top:.25rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-36{padding-top:9rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.text-right{text-align:right}.font-heading{font-family:var(--font-heading)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-destructive{color:hsl(var(--destructive))}.text-foreground{color:hsl(var(--foreground))}.text-gold{--tw-text-opacity:1;color:rgb(199 160 82/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(38 57 67/var(--tw-text-opacity,1))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-navy{--tw-text-opacity:1;color:rgb(16 54 75/var(--tw-text-opacity,1))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-500{animation-duration:.5s}.text-balance{text-wrap:balance}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}


/* custom.css */
/* Bổ sung cho style.css: menu mobile và form đăng ký (thay cho component React gốc) */
.hd-menu[hidden], .hd-modal[hidden] { display: none; }
.hd-menu { position: fixed; inset: 0; z-index: 60; }
.hd-menu__backdrop, .hd-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 54, 75, .45); backdrop-filter: blur(3px); }
.hd-menu__panel { position: absolute; right: 0; top: 0; height: 100%; width: 82%; max-width: 24rem; background: #faf8f3; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, .15); }
.hd-menu__top { display: flex; align-items: center; justify-content: space-between; height: 5rem; padding: 0 1.25rem; border-bottom: 1px solid #e5e5e5; }
.hd-menu__close, .hd-modal__close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: #10364b; }
.hd-menu nav { display: flex; flex-direction: column; padding: .5rem 1.25rem; }
.hd-menu nav a { padding: 1rem 0; font-size: 1.125rem; color: #10364b; border-bottom: 1px solid #e5e5e5; }
.hd-menu__actions { margin-top: auto; padding: 1.25rem 1.25rem 2rem; display: grid; gap: .75rem; }
.hd-btn { display: block; width: 100%; text-align: center; padding: .875rem 1.25rem; border-radius: 9999px; font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.hd-btn--navy { background: #10364b; color: #fff; }
.hd-btn--ghost { border-color: rgba(16, 54, 75, .2); color: #10364b; }
.hd-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.hd-modal__box { position: relative; width: 100%; max-width: 36rem; max-height: 92vh; overflow: auto; background: #faf8f3; border-radius: 1rem; padding: 2rem; display: grid; gap: 1rem; color: #10364b; }
.hd-modal__box h2 { font-size: 1.5rem; font-weight: 600; }
.hd-modal__lead { color: rgba(16, 54, 75, .7); font-size: .95rem; }
.hd-modal__close { position: absolute; top: .75rem; right: 1rem; }
.hd-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .hd-grid { grid-template-columns: 1fr 1fr; } }
.hd-modal label { display: grid; gap: .375rem; font-size: .875rem; font-weight: 500; }
.hd-modal input, .hd-modal select, .hd-modal textarea { font: inherit; padding: .65rem .8rem; border: 1px solid #d4d4d4; border-radius: .5rem; background: #fff; }
.hd-modal input:focus, .hd-modal select:focus, .hd-modal textarea:focus { outline: 2px solid #c9a24d; border-color: transparent; }
.hd-error { color: #b42318; font-size: .875rem; min-height: 1em; }

/* Trang Coaching: ảnh card thấp hơn (4:3) */
.hd-short .aspect-\[3\/4\] { aspect-ratio: 4 / 3; }

/* Form mua hàng: dòng giá */
.hd-price { margin: -.25rem 0 0; padding: .6rem .9rem; border-radius: .6rem; background: rgba(199, 160, 82, .14); color: #10364b; font-weight: 600; font-size: .95rem; }
.hd-price[hidden] { display: none; }
.hd-birth[hidden], .hd-item[hidden] { display: none; }


/* header-light.css */
/* Header sáng, tối giản, sticky — áp dụng cho toàn bộ trang */
header.fixed {
  background: rgba(250, 249, 246, .96) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(12, 45, 66, .06);
  box-shadow: none; transition: box-shadow .3s ease;
}
header.fixed.is-scrolled { box-shadow: 0 10px 30px -22px rgba(12, 45, 66, .55); }
header.fixed > div { max-width: 1400px !important; }

/* menu navy + gạch chân vàng khi hover / trang hiện tại */
header nav > a, header nav > .hd-dd > a { color: #0c2d42 !important; font-weight: 500; letter-spacing: .01em; }
header nav > a span, header nav > .hd-dd > a span { background: #c59a48 !important; height: 2px !important; }
header nav > a:hover span, header nav > a[data-active="1"] span, header nav > .hd-dd:hover > a span, header nav > .hd-dd > a[data-active="1"] span { width: 100% !important; }
header nav a[data-active="1"] { font-weight: 600; }
header img { height: 4rem !important; }
@media (min-width: 1500px) { header.fixed > div { padding-left: 0 !important; padding-right: 0 !important; } }

/* hotline 2 dòng */
header a[href^="tel:"] { color: #0c2d42 !important; align-items: center; }
header a[href^="tel:"] svg { color: #c59a48; width: 1.35rem; height: 1.35rem; }
header .hd-hotline { display: flex; flex-direction: column; line-height: 1.2; }
header .hd-hotline small { font-size: .72rem; color: #627582; font-weight: 400; }
header .hd-hotline b { font-size: .95rem; font-weight: 600; color: #0c2d42; letter-spacing: .01em; }

/* nút đăng ký */
header button:not([aria-label]) {
  background: #c59a48 !important; color: #fff !important; font-weight: 600; padding: .8rem 1.6rem !important;
  box-shadow: 0 10px 24px -14px rgba(197, 154, 72, .9); transition: background .25s, transform .25s, box-shadow .25s;
}
header button:not([aria-label])::after { content: "→"; margin-left: .5rem; transition: transform .25s; display: inline-block; }
header button:not([aria-label]):hover { background: #b2873a !important; transform: translateY(-1px); }
header button:not([aria-label]):hover::after { transform: translateX(4px); }
header button[aria-label="Mở menu"] { color: #0c2d42 !important; }

/* menu xổ xuống */
header nav .hd-dd { position: relative; }
header nav .hd-dd > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
header nav .hd-dd:hover > a::after { transform: rotate(225deg) translate(-2px, -2px); }
.hd-dd__panel { position: absolute; left: -1.1rem; top: 100%; min-width: 17rem; padding-top: 1.2rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; z-index: 60; }
.hd-dd:hover .hd-dd__panel, .hd-dd:focus-within .hd-dd__panel { opacity: 1; visibility: visible; transform: none; }
.hd-dd__panel > div { background: #fff; border-radius: 14px; padding: .55rem; box-shadow: 0 24px 50px -22px rgba(12, 45, 66, .5); border: 1px solid rgba(12, 45, 66, .07); }
.hd-dd__panel a { display: block; padding: .6rem .85rem; border-radius: 9px; font-size: .9rem; line-height: 1.35; color: #0c2d42; transition: background .2s, color .2s; }
.hd-dd__panel a:hover { background: #faf9f6; color: #a9802f; }


/* footer.css */
/* Footer Học viện Hải Đăng — CTA + thông tin liền một khối */
.hd-footer {
  --hd-navy: #0e3448;
  --hd-navy-deep: #0a2636;
  --hd-gold: #d9ac58;
  --hd-ivory: #faf8f3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--hd-ivory);
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(217, 172, 88, .10), transparent 70%),
    radial-gradient(520px 360px at 8% 28%, rgba(255, 213, 138, .10), transparent 70%),
    radial-gradient(420px 380px at 94% 20%, rgba(143, 184, 220, .10), transparent 70%),
    linear-gradient(180deg, #123b52 0%, var(--hd-navy) 38%, var(--hd-navy-deep) 100%);
}

/* ---------- CTA ---------- */
.hd-cta { position: relative; padding: 6.5rem 1.25rem 5rem; text-align: center; }
.hd-cta__inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.hd-eyebrow { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1.5rem;
  color: var(--hd-gold); font-size: .75rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.hd-eyebrow::before, .hd-eyebrow::after { content: ""; width: 2.5rem; height: 1px; background: var(--hd-gold); opacity: .8; }
.hd-cta h2 { font-family: var(--font-heading), Georgia, serif; font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.18; text-wrap: balance; margin: 0; }
.hd-cta h2 em { font-style: normal; color: var(--hd-gold); }
.hd-cta__rule { width: 3rem; height: 1px; background: var(--hd-gold); margin: 1.75rem auto 1.5rem; opacity: .7; }
.hd-cta p { color: rgba(250, 248, 243, .78); font-size: 1.0625rem; line-height: 1.7; max-width: 34rem; margin: 0 auto; }
.hd-cta__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hd-btn-gold, .hd-btn-line { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.9rem; border-radius: 9999px;
  font-weight: 500; font-size: .95rem; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s, border-color .25s, color .25s; }
.hd-btn-gold { background: var(--hd-gold); color: var(--hd-navy); border: 1px solid var(--hd-gold); }
.hd-btn-gold { box-shadow: 0 8px 24px -10px rgba(217,172,88,.5); }
.hd-btn-gold:hover { transform: translateY(-2px); background: #e4bb6c; box-shadow: 0 14px 32px -10px rgba(217, 172, 88, .7); }
.hd-btn-gold svg { transition: transform .25s ease; }
.hd-btn-gold:hover svg { transform: translateX(4px); }
.hd-btn-line { color: var(--hd-ivory); border: 1px solid rgba(250, 248, 243, .35); background: transparent; }
.hd-btn-line:hover { transform: translateY(-2px); border-color: var(--hd-gold); color: var(--hd-gold); background: rgba(217, 172, 88, .08); }
.hd-btn-gold:focus-visible, .hd-btn-line:focus-visible, .hd-footer a:focus-visible { outline: 2px solid var(--hd-gold); outline-offset: 3px; }

/* hình minh họa */
.hd-art { position: absolute; pointer-events: none; z-index: 1; display: none; }
.hd-art--book { left: -2%; bottom: 1.5rem; width: min(34vw, 520px); opacity: .9; filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 55% 48%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 62% 70% at 55% 48%, #000 40%, transparent 100%); }
.hd-art--arch { right: 3%; top: 2.5rem; width: min(16vw, 250px); opacity: .88;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 45%, transparent 100%); }
.hd-curve { display: none !important; }
.hd-side { position: absolute; z-index: 2; display: none; color: rgba(250, 248, 243, .42); font-size: .7rem; letter-spacing: .3em; line-height: 2; text-transform: uppercase; }
.hd-side--left { left: 3.5rem; top: 4rem; padding-left: 1rem; border-left: 1px solid rgba(217, 172, 88, .35); }
.hd-side--right { right: calc(2% + min(17vw, 260px) + 2.5rem); top: 5rem; text-align: right; }
.hd-quote { position: absolute; left: 3.5rem; top: 10.5rem; z-index: 2; display: none; text-align: left; font-family: var(--font-heading), Georgia, serif; font-style: italic;
  color: rgba(250, 248, 243, .45); font-size: .92rem; line-height: 1.6; }
@media (min-width: 1024px) { .hd-art, .hd-curve { display: block; } .hd-art--book { left: -2%; bottom: 1.5rem; width: min(34vw, 520px); opacity: .9; filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 55% 48%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 62% 70% at 55% 48%, #000 40%, transparent 100%); } }
@media (min-width: 1280px) { .hd-side, .hd-quote { display: block; } }

/* đường phân cách mềm */
.hd-divider { position: relative; z-index: 2; height: 90px; margin: -45px 0 -45px; pointer-events: none;
  background: radial-gradient(ellipse 45% 50% at 50% 50%, rgba(217, 172, 88, .16), transparent 70%); }
.hd-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(760px, 70%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(217, 172, 88, .4), transparent); }

/* ---------- Thông tin ---------- */
.hd-info { position: relative; z-index: 2; max-width: 1240px; margin: 2.5rem auto 0; padding: 3rem 1.5rem 2.5rem; border-radius: 2rem;
  background: linear-gradient(180deg, rgba(250,248,243,.045), rgba(250,248,243,.015)); border: 1px solid rgba(250,248,243,.07); display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hd-info { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .hd-info { grid-template-columns: 1.35fr 1fr 1.2fr 1.1fr; gap: 2rem; padding: 3.75rem 3rem 3.25rem; } }
.hd-brand__logo { display: inline-block; margin-bottom: 1.25rem; }
.hd-brand__logo img { display: block; width: 15rem; max-width: 100%; height: auto; }
.hd-brand__slogan { font-family: var(--font-heading), Georgia, serif; font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--hd-ivory); margin: 0; }
.hd-brand__desc { margin: .9rem 0 0; font-size: .9rem; line-height: 1.7; color: rgba(250, 248, 243, .62); max-width: 18rem; }
.hd-social { display: flex; gap: .65rem; margin-top: 1.4rem; }
.hd-social a { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 9999px; color: var(--hd-ivory);
  background: rgba(250, 248, 243, .07); border: 1px solid rgba(250, 248, 243, .16); transition: all .25s ease; }
.hd-social a:hover { color: var(--hd-navy); background: var(--hd-gold); border-color: var(--hd-gold); transform: translateY(-2px); }
.hd-col h4 { margin: 0 0 1.3rem; color: var(--hd-gold); font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; font-size: .93rem; color: rgba(250, 248, 243, .8); }
.hd-col li { display: flex; align-items: flex-start; gap: .7rem; }
.hd-col li > svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--hd-gold); }
.hd-col--nav li { justify-content: space-between; max-width: 13rem; }
.hd-col--nav li a::after { content: none; }
.hd-col--nav li::after { content: "›"; color: rgba(250, 248, 243, .4); transition: transform .25s, color .25s; }
.hd-col--nav li:hover::after { transform: translateX(3px); color: var(--hd-gold); }
/* gạch chân tinh tế */
.hd-footer .hd-link { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .3s ease, color .25s; padding-bottom: 2px; }
.hd-footer .hd-link:hover { color: var(--hd-gold); background-size: 100% 1px; }

/* ---------- Dưới cùng ---------- */
.hd-bottom { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem 2rem; }
@media (min-width: 1024px) { .hd-bottom { padding: 0 3rem 2.25rem; } }
.hd-bottom__row { padding-top: 1.5rem; border-top: 1px solid rgba(250, 248, 243, .07); display: flex; flex-direction: column; gap: .6rem; align-items: center;
  text-align: center; font-size: .78rem; color: rgba(250, 248, 243, .55); }
.hd-bottom__row p { margin: 0; }
.hd-bottom__row .hd-tag { font-family: var(--font-heading), Georgia, serif; font-style: italic; }
@media (min-width: 768px) { .hd-bottom__row { flex-direction: row; justify-content: space-between; text-align: left; } }

/* mobile / tablet */
@media (max-width: 639px) {
  .hd-cta { padding: 4.5rem 1.25rem 3.5rem; }
  .hd-cta__actions { flex-direction: column; align-items: stretch; }
  .hd-btn-gold, .hd-btn-line { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hd-footer * { transition: none !important; } }

/* lề hai bên cho thẻ thông tin khi màn hình hẹp */
@media (max-width: 1279px) { .hd-info { margin-left: 1rem; margin-right: 1rem; } .hd-bottom { padding-left: 2rem; padding-right: 2rem; } }


/* home.bundle.css */
/* Generated by performance:optimize-assets. Do not edit directly. */

/* home-hero.css */
/* Hero trang chủ + khối thống kê nổi — Navy #0C2D42 · Deep Navy #092638 · Gold #C59A48 · Ivory #FAF9F6 · Muted #627582 */
.hd-home-hero {
  --navy: #0c2d42; --deep: #092638; --gold: #c59a48; --ivory: #faf9f6; --muted: #627582;
  position: relative; isolation: isolate; overflow: hidden; background: var(--ivory); color: var(--navy);
  min-height: clamp(640px, 82vh, 760px); display: flex; align-items: center; padding: 7.5rem 0 9.5rem;
}
.hd-home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(700px 420px at 12% 20%, rgba(197, 154, 72, .10), transparent 70%), radial-gradient(600px 400px at 40% 100%, rgba(12, 45, 66, .05), transparent 70%); }
.hd-home-hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .hd-home-hero__inner { padding: 0 2.5rem; } }
.hd-home-hero__text { max-width: 44rem; }
.hd-home-hero__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; color: var(--gold); font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.hd-home-hero__eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--gold); }
.hd-home-hero h1 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.08;
  font-size: clamp(2.6rem, 4.1vw, 4.8rem); color: var(--navy); font-variant-numeric: lining-nums; }
.hd-home-hero h1 span { display: block; }
.hd-home-hero h1 .hd-gold { color: var(--gold); }
.hd-home-hero__sub { margin: 1.5rem 0 0; font-style: italic; font-size: 1.2rem; color: var(--navy); font-family: var(--font-body), sans-serif; }
.hd-home-hero__desc { margin: 1rem 0 0; max-width: 33rem; color: #2e4655; font-size: 1.02rem; line-height: 1.75; }
.hd-home-hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hd-hbtn { display: inline-flex; align-items: center; gap: .65rem; padding: 1rem 1.9rem; border-radius: 40px; font-weight: 600; font-size: .98rem; cursor: pointer; border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s; text-decoration: none; }
.hd-hbtn--gold { background: var(--gold); color: #fff; box-shadow: 0 14px 30px -16px rgba(197, 154, 72, .95); }
.hd-hbtn--gold:hover { background: #a9802f; transform: translateY(-2px); }
.hd-hbtn--gold svg { transition: transform .3s; }
.hd-hbtn--gold:hover svg { transform: translateX(4px); }
.hd-hbtn--line { background: #fff; color: var(--navy); border-color: rgba(12, 45, 66, .55); }
.hd-hbtn--line:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.hd-hbtn--line .hd-play { color: var(--gold); }

/* dãy dịch vụ */
.hd-svc { margin-top: 2.5rem; display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(2, 1fr); max-width: 48rem; }
@media (min-width: 768px) { .hd-svc { grid-template-columns: repeat(4, auto); justify-content: start; } .hd-svc span { white-space: nowrap; } }
.hd-svc a { display: flex; align-items: center; gap: .7rem; color: var(--navy); text-decoration: none; font-size: .84rem; line-height: 1.35; transition: transform .3s; }
.hd-svc a:hover { transform: translateY(-3px); }
.hd-svc svg { flex: none; width: 2.1rem; height: 2.1rem; color: var(--gold); stroke-width: 1.4; transition: transform .3s; }
.hd-svc a:hover svg { transform: translateY(-2px) scale(1.05); }

/* ảnh gia đình: tan vào nền ivory bên trái, không card, không overlay xanh */
.hd-home-hero__photo { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: min(64%, 1180px); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 20%, #000 46%), linear-gradient(180deg, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 20%, #000 46%), linear-gradient(180deg, #000 88%, transparent 100%); mask-composite: intersect; }
.hd-home-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; transform: scaleX(-1) scale(1.04); transform-origin: 50% 50%; filter: brightness(1.05) contrast(1) saturate(1.05);
}
.hd-home-hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(520px 420px at 72% 18%, rgba(255, 238, 190, .85), transparent 70%), linear-gradient(90deg, rgba(255, 248, 232, .55), transparent 45%); }
.hd-hand { position: absolute; z-index: 4; top: 68%; right: 8%; text-align: center; transform: rotate(-11deg); color: #fff;
  font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.9rem); line-height: 1.25; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); pointer-events: none; }
.hd-hand svg { display: block; margin: .4rem auto 0; width: 6.5rem; color: #fff; }
.hd-arc { position: absolute; z-index: 3; right: 1%; top: 8%; height: 80%; width: auto; pointer-events: none; }
.hd-arc path, .hd-curve2 path { fill: none; stroke: var(--gold); stroke-opacity: .85; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hd-curve2 { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.hd-lh { display: none !important; position: absolute; z-index: 3; right: 6%; bottom: 17%; width: clamp(46px, 4.2vw, 78px); color: #fff; opacity: .9; pointer-events: none; }
.hd-waves { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: 130px; pointer-events: none; }

/* ---------- Khối thống kê nổi ---------- */
.hd-statwrap { position: relative; z-index: 6; margin-top: -5.2rem; padding: 0 1.25rem; }
.hd-statcard { position: relative; overflow: hidden; max-width: 1500px; margin: 0 auto; border-radius: 18px; background: linear-gradient(135deg, #0c2d42, #092638); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(9, 38, 56, .75); display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .hd-statcard { grid-template-columns: repeat(4, 1fr); } }
.hd-statcard::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; opacity: .1; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 70' preserveAspectRatio='none'><path d='M0 40C100 10 200 70 300 40S500 10 600 40 750 60 800 35V70H0Z' fill='%23c59a48'/></svg>") center / 100% 100% no-repeat; }
.hd-stat2 { position: relative; z-index: 1; display: flex; align-items: center; gap: .9rem; padding: 1.75rem 1.25rem; }
.hd-stat2 + .hd-stat2 { border-left: 1px solid rgba(250, 249, 246, .12); }
@media (max-width: 1023px) { .hd-stat2:nth-child(3) { border-left: 0; } .hd-stat2:nth-child(n+3) { border-top: 1px solid rgba(250, 249, 246, .12); } }
@media (min-width: 1024px) { .hd-stat2 { padding: 2.1rem 1.4rem; } }
.hd-stat2__icon { flex: none; width: 3.3rem; height: 3.3rem; border-radius: 9999px; border: 1px solid rgba(197, 154, 72, .6); display: grid; place-items: center; color: var(--gold, #c59a48); }
.hd-stat2__icon svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.4; }
.hd-stat2 b { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-variant-numeric: lining-nums; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.1; color: #c59a48; }
.hd-stat2 span.d { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
@media (max-width: 639px) { .hd-stat2 { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.25rem 1rem; } .hd-stat2__icon { width: 2.8rem; height: 2.8rem; } }

/* ---------- Chuyển động ---------- */
@keyframes hdUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hdRight { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes hdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hdDraw { to { stroke-dashoffset: 0; } }
.hd-a { opacity: 0; animation: hdUp .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); }
.hd-home-hero h1 .hd-a { opacity: 1; animation: none; }
.hd-home-hero__photo { animation: hdRight 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }
.hd-hand, .hd-lh { animation: hdFade 1.2s ease 1.1s both; }
.hd-arc path, .hd-curve2 path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: hdDraw 2.2s ease .5s forwards; }
html.js-anim .hd-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
html.js-anim .hd-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hd-a, .hd-home-hero__photo, .hd-hand, .hd-lh { animation: none !important; opacity: 1; transform: none; }
  .hd-arc path, .hd-curve2 path { animation: none !important; stroke-dashoffset: 0; }
  html.js-anim .hd-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hd-home-hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 6.5rem 0 0; }
  .hd-home-hero__inner { order: 1; }
  .hd-home-hero__text { max-width: none; }
  .hd-home-hero h1 { font-size: clamp(2.3rem, 9vw, 3.2rem); }
  .hd-home-hero__photo { order: 2; position: relative; width: 100%; height: 420px; margin-top: 1.5rem; }
  .hd-home-hero__photo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 90%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hd-home-hero__photo img { object-position: 60% 30%; transform: scale(1.05); }
  .hd-arc { display: none; }
  .hd-hand { top: 62%; right: 5%; font-size: 1.4rem; }
  .hd-lh { bottom: 10%; }
  .hd-statwrap { margin-top: -3.5rem; }
  .hd-waves { height: 80px; }
}
@media (max-width: 639px) {
  .hd-hbtn { width: 100%; justify-content: center; }
  .hd-home-hero__photo { height: 340px; }
}

/* Video lightbox */
.hd-video { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(9, 38, 56, .8); }
.hd-video[hidden] { display: none; }
.hd-video__box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; display: grid; place-items: center; color: #fff; text-align: center; padding: 1.5rem; }
.hd-video__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hd-video__close { position: absolute; top: .5rem; right: .9rem; z-index: 2; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }

/* núi xanh mờ góc trái + sóng vàng lớn */
.hd-mtn { position: absolute; z-index: 1; left: 0; bottom: 5.5rem; width: 46%; height: 230px; pointer-events: none; opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 100%); mask-image: linear-gradient(90deg, #000 40%, transparent 100%); }
@media (max-width: 1023px) { .hd-mtn { display: none; } }


/* journey.css */
/* Section "Hành trình của bạn" — editorial */
.hd-journey { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #faf9f6 0%, #f6f1e6 100%); padding: 6.5rem 0 7.5rem; }
.hd-journey__inner { position: relative; z-index: 3; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .hd-journey__inner { padding: 0 2.5rem; } }

/* heading */
.hd-journey__head { position: relative; max-width: 100%; }
.hd-journey__text { max-width: 52rem; }
.hd-journey__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; color: var(--gold); font-size: .85rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.hd-journey__eyebrow::before { content: ""; width: 3.4rem; height: 1px; background: var(--gold); }
.hd-journey h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.012em; line-height: 1.1; color: var(--navy); font-size: clamp(2.3rem, 3.4vw, 3.9rem); }
.hd-journey h2 span { display: block; }
.hd-journey h2 .hd-gold { color: var(--gold); }
.hd-journey__desc { margin: 1.4rem 0 0; max-width: 48.75rem; color: var(--muted); font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.7; }

/* họa tiết ở GÓC PHẢI-TRÊN của section (ngoài khung nội dung), mờ dần ở cạnh trái và cạnh dưới */
.hd-jdeco { --w: min(34vw, 640px); position: absolute; z-index: 1; top: 0; right: 0; width: var(--w); height: calc(var(--w) * .5); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; }
.hd-jdeco svg { display: block; width: 100%; height: 100%; }
.hd-jhand { position: absolute; z-index: 4; top: 2.4rem; right: calc(min(34vw, 640px) * .37); transform: rotate(-9deg); text-align: left; color: var(--navy); pointer-events: none;
  font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 500; font-size: clamp(1.25rem, 1.75vw, 1.9rem); line-height: 1.3; }
.hd-jhand svg { display: block; width: 9rem; margin-top: .3rem; color: var(--gold); }
.hd-jcurve { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hd-jcurve path { fill: none; stroke: #d6bf90; stroke-opacity: .55; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.hd-leaf { position: absolute; z-index: 1; pointer-events: none; filter: blur(5px); opacity: .5; }
.hd-leaf--l { left: -40px; bottom: -30px; width: 340px; }
.hd-leaf--r { right: -50px; bottom: -40px; width: 380px; }

/* hàng card */
.hd-jrow { position: relative; margin-top: 3.2rem; display: flex; align-items: center; gap: 1.5rem; }
.hd-jcards { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
.hd-jcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; text-decoration: none; color: inherit;
  box-shadow: 0 22px 50px -32px rgba(12, 45, 66, .45), 0 2px 8px rgba(12, 45, 66, .04); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.hd-jcard:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -30px rgba(12, 45, 66, .55), 0 2px 8px rgba(12, 45, 66, .05); }
.hd-jcard__img { position: relative; display: block; aspect-ratio: 1.85 / 1; overflow: hidden; background: #efe9db; }
.hd-jcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hd-jcard:hover .hd-jcard__img img { transform: scale(1.06); }
.hd-jcard__body { position: relative; display: flex; flex-direction: column; flex: 1; margin-top: -1.3rem; padding: 2.4rem 1.9rem 1.9rem; border-radius: 22px 22px 0 0; background: #fff; }
.hd-jicon { position: absolute; z-index: 3; left: 1.6rem; top: -2rem; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 9999px; background: var(--gold); color: #fff;
  border: 4px solid #fff; box-shadow: 0 10px 22px -10px rgba(197, 154, 72, .9); transition: transform .4s; }
.hd-jcard:hover .hd-jicon { transform: translateY(-4px) rotate(-6deg); }
.hd-jicon svg { width: 1.45rem; height: 1.45rem; stroke-width: 1.7; }
.hd-jcard h3 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 600; font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.25; color: var(--navy); }
.hd-jcard p { margin: .9rem 0 1.5rem; color: var(--muted); font-size: .96rem; line-height: 1.65; }
.hd-jbtn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-radius: 9999px; border: 1px solid rgba(197, 154, 72, .85); color: #a9802f; font-weight: 600; font-size: .9rem; transition: background .3s, color .3s, border-color .3s; }
.hd-jbtn svg { width: 1.05rem; height: 1.05rem; transition: transform .3s; }
.hd-jcard:hover .hd-jbtn { background: var(--gold); color: #fff; border-color: var(--gold); }
.hd-jcard:hover .hd-jbtn svg { transform: translateX(4px); }

/* mũi tên (chỉ hiện khi danh sách cuộn được) */
.hd-jnav { display: none; flex-direction: column; gap: .75rem; }
.hd-jnav.on { display: flex; }
.hd-jnav button { width: 3rem; height: 3rem; border-radius: 9999px; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(197, 154, 72, .6); background: #fff; color: #a9802f; transition: all .25s; }
.hd-jnav button.next { background: var(--gold); color: #fff; border-color: var(--gold); }
.hd-jnav button:hover { transform: scale(1.06); }

/* chuyển động: các khối hiện dần */
.hd-journey .hd-reveal { transition-duration: .9s; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hd-journey { padding: 4.5rem 0 5rem; }
  .hd-jdeco { --w: 78vw; opacity: .6; }
  .hd-jhand { display: none; }
  .hd-jcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.1rem; padding: 2.4rem .25rem 1.8rem; margin: -1.4rem -.25rem -.2rem; scrollbar-width: none; }
  .hd-jcards::-webkit-scrollbar { display: none; }
  .hd-jcard { flex: 0 0 min(82%, 380px); scroll-snap-align: start; }
  .hd-jnav { flex-direction: row; justify-content: center; margin-top: .4rem; }
  .hd-jrow { display: block; }
  .hd-leaf { opacity: .35; }
}
@media (max-width: 1279px) { .hd-jhand { display: none; } }


/* coach.css */
/* Section Personalized Coaching — dùng chung ngôn ngữ thiết kế với journey.css */
.hd-coach .hd-journey__text { max-width: 54rem; }
.hd-coach__all { position: absolute; z-index: 4; right: 0; bottom: .2rem; display: inline-flex; align-items: center; gap: .7rem; color: var(--navy); font-weight: 600; font-size: .98rem; text-decoration: none; transition: color .3s; }
.hd-coach__all i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 9999px; border: 1px solid rgba(12, 45, 66, .45); transition: background .3s, color .3s, transform .3s, border-color .3s; }
.hd-coach__all svg { width: 1rem; height: 1rem; }
.hd-coach__all:hover { color: #a9802f; }
.hd-coach__all:hover i { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateX(4px); }
.hd-coach .hd-jrow { margin-top: 3.4rem; display: block; }
.hd-coach .hd-jcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.7rem; overflow: visible; padding: 0; margin: 0; }
.hd-coach .hd-jcard__img { aspect-ratio: 16 / 9; }
.hd-coach .hd-jcard__body { padding: 2.7rem 1.9rem 1.9rem; }
.hd-plabel { color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.hd-coach .hd-jcard h3 { margin-top: .55rem; font-size: clamp(1.3rem, 1.7vw, 1.65rem); }
.hd-coach .hd-jcard p { margin: .8rem 0 1.2rem; font-size: .95rem; }
.hd-pprice { margin-top: auto; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.6rem, 2vw, 1.85rem); color: var(--gold); line-height: 1.2; font-variant-numeric: lining-nums; }
.hd-pprice small { font-family: var(--font-body), sans-serif; font-size: .85rem; color: var(--muted); margin-left: .3rem; }
.hd-pprice--ask { font-family: var(--font-body), sans-serif; font-size: .98rem; font-style: italic; color: var(--muted); }
.hd-pactions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.hd-pbtn { flex: 1 1 0; min-width: 8.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.2rem; border-radius: 30px; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s, transform .3s; }
.hd-pbtn svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-pbtn--navy { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.hd-pbtn--navy:hover { background: var(--gold); border-color: var(--gold); }
.hd-pbtn--navy:hover svg { transform: translateX(4px); }
.hd-pbtn--line { background: transparent; color: #a9802f; border: 1px solid var(--gold); }
.hd-pbtn--line:hover { background: var(--gold); color: #fff; }
.hd-bookmark { position: absolute; z-index: 0; left: -30px; top: 52%; width: 300px; opacity: .55; pointer-events: none; }
@media (max-width: 1279px) { .hd-coach .hd-jcards { gap: 1.3rem; } .hd-pactions { flex-direction: column; } .hd-pbtn { flex: none; width: 100%; } }
@media (max-width: 1023px) {
  .hd-coach .hd-jcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-coach .hd-jcards > :nth-child(3) { grid-column: 1 / -1; width: calc(50% - .65rem); justify-self: center; }
  .hd-coach__all { position: static; margin-top: 1.4rem; }
  .hd-pactions { flex-direction: row; }
  .hd-pbtn { flex: 1 1 0; width: auto; }
  .hd-bookmark { display: none; }
}
@media (max-width: 767px) {
  .hd-coach .hd-jcards { grid-template-columns: 1fr; }
  .hd-coach .hd-jcards > :nth-child(3) { width: auto; grid-column: auto; }
  .hd-pactions { flex-direction: column; }
  .hd-pbtn { width: 100%; flex: none; }
}

/* tiêu đề 2 dòng không bị bẻ thêm */
.hd-coach .hd-journey__text { max-width: 60rem; }
.hd-coach .hd-journey h2 { font-size: clamp(2.1rem, 3vw, 3.5rem); }
.hd-coach .hd-journey h2 span { white-space: nowrap; }
@media (max-width: 767px) { .hd-coach .hd-journey h2 span { white-space: normal; } }
@media (max-width: 1023px) { .hd-coach .hd-journey__text { max-width: none; } }


/* programs.css */
/* Section Our Programs — Editorial split layout (chữ trái 25% / 3 card phải 75%) */
.hd-prog { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 6.25rem 0 7rem;
  background: radial-gradient(900px 500px at 8% 100%, rgba(214, 191, 144, .22), transparent 70%), linear-gradient(180deg, #faf9f6 0%, #f6f1e6 100%); }
.hd-prog__wrap { position: relative; z-index: 3; width: calc(100% - 80px); max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 3.1fr); gap: 2.6rem; align-items: start; }

/* ---------- cột trái ---------- */
.hd-prog__intro { position: relative; z-index: 2; padding-top: .4rem; }
.hd-prog__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hd-prog__eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--gold); }
.hd-prog h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.08; font-size: clamp(2.2rem, 2.9vw, 3.3rem); color: var(--navy); }
.hd-prog h2 span { display: block; white-space: nowrap; }
.hd-prog h2 .hd-gold { color: var(--gold); }
.hd-prog__desc { margin: 1.4rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 22rem; }
.hd-prog__all { margin-top: 1.9rem; display: inline-flex; align-items: center; gap: .85rem; color: var(--navy); font-weight: 700; font-size: .95rem; text-decoration: none; transition: color .3s; }
.hd-prog__all i, .hd-pl i { display: grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: 9999px; color: #fff; background: linear-gradient(135deg, #d8b36a, #b98a35); box-shadow: 0 10px 22px -12px rgba(185, 138, 53, .9); transition: transform .3s; }
.hd-prog__all svg, .hd-pl svg { width: 1.05rem; height: 1.05rem; }
.hd-prog__all:hover { color: #a9802f; }
.hd-prog__all:hover i { transform: translateX(5px); }

/* hải đăng dưới-trái */
.hd-prog__scene { position: absolute; z-index: 1; left: 0; bottom: 0; width: min(24vw, 440px); pointer-events: none; opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(0deg, #000 60%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(0deg, #000 60%, transparent 100%); mask-composite: intersect; }
.hd-prog__scene svg { display: block; width: 100%; height: auto; }
.hd-prog__hand { position: absolute; z-index: 4; left: calc(min(24vw, 440px) * .5); bottom: 4.2rem; transform: rotate(-10deg); color: var(--navy); pointer-events: none; text-align: left;
  font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.6rem); line-height: 1.3; }
.hd-prog__hand svg { display: block; width: 7.5rem; margin-top: .25rem; color: var(--gold); }
.hd-prog__curve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hd-prog__curve path { fill: none; stroke: #d6bf90; stroke-opacity: .6; stroke-width: 1.1; vector-effect: non-scaling-stroke; }

/* ---------- 3 card ---------- */
.hd-prog__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.hd-pc { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: visible;
  box-shadow: 0 22px 50px -34px rgba(12, 45, 66, .5), 0 2px 8px rgba(12, 45, 66, .04); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.hd-pc:hover { transform: translateY(-5px); box-shadow: 0 32px 56px -30px rgba(12, 45, 66, .55), 0 2px 8px rgba(12, 45, 66, .05); }
.hd-pc__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px 18px 0 0; background: #efe9db; }
.hd-pc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hd-pc:hover .hd-pc__img img { transform: scale(1.04); }
.hd-pc__num { position: absolute; z-index: 2; left: 1.3rem; top: 1rem; color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 2.3rem; line-height: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); font-variant-numeric: lining-nums; transition: transform .4s; }
.hd-pc:hover .hd-pc__num { transform: translateY(-3px); }
.hd-pc__media { position: relative; }
.hd-pc__icon { position: absolute; z-index: 3; right: 1.4rem; bottom: -1.8rem; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 9999px; color: #fff;
  background: linear-gradient(135deg, #d8b36a, #b98a35); border: 3px solid #fff; box-shadow: 0 12px 24px -12px rgba(185, 138, 53, .95); transition: transform .4s; }
.hd-pc:hover .hd-pc__icon { transform: translateY(-4px) rotate(-6deg); }
.hd-pc__icon svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.hd-pc__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 1.7rem; }
.hd-pc__label { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.4; padding-right: 3rem; }
.hd-pc h3 { margin: .65rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(1.35rem, 1.75vw, 1.7rem); line-height: 1.22; color: var(--navy); }
.hd-pc p { margin: .8rem 0 1.1rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.hd-pc__price { margin-top: auto; font-family: "Playfair Display", Georgia, serif; font-size: 1.6rem; color: var(--gold); line-height: 1.2; font-variant-numeric: lining-nums; }
.hd-pc__price small { font-family: var(--font-body), sans-serif; font-size: .9rem; color: var(--navy); font-weight: 600; margin-left: .25rem; }
.hd-pc__price--ask { font-family: var(--font-body), sans-serif; font-size: .95rem; font-style: italic; color: var(--muted); }
.hd-pc__act { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.1rem; }
.hd-pb { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.5rem; border-radius: 30px; background: var(--navy); color: #fff; border: 0; cursor: pointer; font-weight: 700; font-size: .9rem; transition: background .3s, transform .3s; }
.hd-pb svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-pb:hover { background: var(--gold); }
.hd-pb:hover svg { transform: translateX(4px); }
.hd-pl { display: inline-flex; align-items: center; gap: .6rem; color: #a9802f; font-weight: 700; font-size: .9rem; text-decoration: none; transition: color .3s; }
.hd-pl i { width: 2.3rem; height: 2.3rem; background: transparent; color: var(--gold); border: 1px solid rgba(197, 154, 72, .85); box-shadow: none; transition: background .3s, color .3s, transform .3s; }
.hd-pl:hover { color: var(--navy); }
.hd-pl:hover i { background: var(--gold); color: #fff; transform: translateX(4px); }

/* ---------- Journey indicator ---------- */
.hd-prog__journey { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.4rem; padding: .4rem 0; }
.hd-jstep { display: flex; align-items: center; gap: .7rem; color: var(--navy); font-size: .88rem; line-height: 1.3; }
.hd-jstep b { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 2.1rem; color: var(--gold); line-height: 1; font-variant-numeric: lining-nums; }
.hd-jstep:nth-child(n+3) b { color: #c9c3b6; }
.hd-jsep { width: clamp(30px, 5vw, 80px); height: 1px; background: rgba(12, 45, 66, .2); }
.hd-jline { flex: 0 0 clamp(60px, 14vw, 240px); height: 1.5rem; }
.hd-jline path { fill: none; stroke: var(--gold); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.hd-jline circle { fill: var(--gold); }

/* ---------- Chuyển động ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .hd-prog .hd-reveal--r { transform: translateX(46px); }
  html.js-anim .hd-prog .hd-reveal--r.in { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-prog__wrap { width: calc(100% - 56px); gap: 2rem; } .hd-pc__body { padding: 1.4rem; } .hd-pb { padding: .8rem 1.2rem; } }
@media (max-width: 1199px) {
  .hd-prog { padding: 4.5rem 0 4.5rem; }
  .hd-prog__wrap { grid-template-columns: 1fr; gap: 2.4rem; }
  .hd-prog__journey { grid-column: 1; }
  .hd-prog__desc { max-width: 40rem; }
  .hd-prog h2 span { display: inline; white-space: normal; }
  .hd-prog h2 span::after { content: " "; }
  .hd-prog h2 .hd-gold:first-of-type { margin-left: 0; }
  .hd-prog h2 { font-size: clamp(2.3rem, 5.5vw, 3rem); }
  .hd-prog__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-prog__cards > :nth-child(3) { grid-column: 1 / -1; width: calc(50% - .7rem); justify-self: center; }
  .hd-prog__scene { width: 46vw; opacity: .55; } .hd-prog__hand { display: none; }
}
@media (max-width: 767px) {
  .hd-prog__wrap { width: calc(100% - 40px); }
  .hd-prog h2 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .hd-prog h2 span { display: block; white-space: nowrap; }
  .hd-prog__cards { grid-template-columns: 1fr; }
  .hd-prog__cards > :nth-child(3) { width: auto; grid-column: auto; }
  .hd-prog__scene { display: none; }
  .hd-pc__act { flex-direction: column; align-items: stretch; } .hd-pb { justify-content: center; } .hd-pl { justify-content: center; }
  .hd-prog__journey { flex-direction: column; align-items: flex-start; gap: .9rem; padding-left: .4rem; }
  .hd-jsep, .hd-jline { display: none; }
}


/* coach-bento.css */
/* Section Personalized Coaching — Asymmetric Bento (32% giới thiệu / 68% bento) */
.hd-cb { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 6rem 0 6rem;
  background: radial-gradient(700px 520px at 0% 40%, rgba(214, 191, 144, .22), transparent 70%), linear-gradient(180deg, #faf9f6 0%, #f7f2e8 100%); }
.hd-cb__wrap { position: relative; z-index: 3; width: calc(100% - 80px); max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .47fr) minmax(0, 1fr); gap: 2.8rem; align-items: start; }

/* ---------- trái ---------- */
.hd-cb__intro { padding-top: .2rem; }
.hd-cb__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; color: var(--gold); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hd-cb__eyebrow::before { content: ""; width: 3rem; height: 1px; background: var(--gold); }
.hd-cb h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(2rem, 2.65vw, 3.2rem); color: var(--navy); }
.hd-cb h2 span { display: block; }
.hd-cb h2 span:first-child { white-space: nowrap; }
@media (max-width: 400px) { .hd-cb h2 span:first-child { white-space: normal; } }
.hd-cb h2 .hd-gold { color: var(--gold); }
.hd-cb__desc { margin: 1.4rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 31rem; }
.hd-cb__vals { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.hd-cb__val { display: flex; align-items: flex-start; gap: 1.1rem; }
.hd-cb__ico { flex: none; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 9999px; background: #f1e8d4; color: var(--gold); transition: transform .35s, background .35s; }
.hd-cb__val:hover .hd-cb__ico { transform: translateY(-3px); background: #ecdfc0; }
.hd-cb__ico svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.4; }
.hd-cb__val h3 { margin: .15rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 1.12rem; color: var(--navy); line-height: 1.3; }
.hd-cb__val p { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 22rem; }
.hd-cb__all { margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem .95rem 1.9rem; border-radius: 40px; background: var(--navy); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background .3s, transform .3s; }
.hd-cb__all i { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 9999px; border: 1px solid var(--gold); color: #fff; transition: transform .3s, background .3s; }
.hd-cb__all svg { width: 1rem; height: 1rem; }
.hd-cb__all:hover { background: var(--gold); }
.hd-cb__all:hover i { transform: translateX(4px); background: rgba(255, 255, 255, .2); }
.hd-cb__hand { margin: 2rem 0 0 1rem; display: inline-block; transform: rotate(-6deg); color: var(--navy); opacity: .85; font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 500; font-size: 1.2rem; line-height: 1.35; }
.hd-cb__hand svg { display: block; width: 8rem; margin-top: .2rem; color: var(--gold); }
.hd-cb__curve { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hd-cb__curve path { fill: none; stroke: #d3bb8a; stroke-opacity: .65; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.hd-cb__waves { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 120px; width: 100%; pointer-events: none; opacity: .7; }

/* ---------- bento ---------- */
.hd-cb__bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.hd-bc { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 22px 50px -34px rgba(12, 45, 66, .5), 0 2px 8px rgba(12, 45, 66, .04);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.hd-bc:hover { transform: translateY(-5px); box-shadow: 0 32px 56px -30px rgba(12, 45, 66, .55), 0 2px 8px rgba(12, 45, 66, .05); }
.hd-bc__img { position: relative; display: block; overflow: hidden; background: #efe9db; }
.hd-bc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hd-bc:hover .hd-bc__img img { transform: scale(1.04); }
.hd-bc__media { position: relative; }
.hd-bc__icon { position: absolute; z-index: 3; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 9999px; color: #fff; background: linear-gradient(135deg, #d8b36a, #b98a35); border: 3px solid #fff; box-shadow: 0 12px 24px -12px rgba(185, 138, 53, .95); transition: transform .4s; }
.hd-bc:hover .hd-bc__icon { transform: translateY(-3px) rotate(-6deg); }
.hd-bc__icon svg { width: 1.4rem; height: 1.4rem; stroke-width: 1.6; }
.hd-bc__body { position: relative; display: flex; flex-direction: column; flex: 1; }
.hd-bc__label { color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.4; }
.hd-bc h3 { margin: .55rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; line-height: 1.22; color: var(--navy); }
.hd-bc p { margin: .75rem 0 0; color: var(--muted); line-height: 1.6; }
.hd-bc__price { margin-top: auto; padding-top: 1.1rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; color: var(--gold); line-height: 1.2; font-variant-numeric: lining-nums; }
.hd-bc__price small { font-family: var(--font-body), sans-serif; font-size: .9rem; color: var(--navy); font-weight: 600; margin-left: .25rem; }
.hd-bc__price--ask { font-family: var(--font-body), sans-serif; font-size: 1rem; font-style: italic; color: var(--muted); }
.hd-bc__act { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; }
.hd-bb { flex: 1 1 0; min-width: 8.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.2rem; border-radius: 30px; font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.hd-bb svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-bb--navy { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.hd-bb--navy:hover { background: var(--gold); border-color: var(--gold); }
.hd-bb--navy:hover svg { transform: translateX(4px); }
.hd-bb--line { background: transparent; color: #a9802f; border: 1px solid var(--gold); }
.hd-bb--line:hover { background: var(--gold); color: #fff; }

/* card lớn nằm ngang */
.hd-bc--feat { grid-column: 1 / -1; flex-direction: row; min-height: 380px; }
.hd-bc--feat .hd-bc__media { flex: 0 0 50%; border-radius: 22px 0 0 22px; overflow: hidden; }
.hd-bc--feat .hd-bc__img { position: absolute; inset: 0; border-radius: inherit; }
.hd-bc--feat .hd-bc__img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(12, 45, 66, .55), transparent); pointer-events: none; }
.hd-bc--feat .hd-bc__quote { position: absolute; z-index: 2; left: 1.6rem; right: 1.6rem; bottom: 1.4rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  font-family: "Dancing Script", "Segoe Script", cursive; font-size: 1.35rem; line-height: 1.3; transform: rotate(-3deg); transform-origin: left bottom; }
.hd-bc--feat .hd-bc__icon { position: static; width: 3.4rem; height: 3.4rem; border: 0; flex: none; box-shadow: none; }
.hd-bc--feat .hd-bc__body { padding: 2rem 2.2rem; }
.hd-bc--feat .hd-bc__head { display: flex; align-items: center; gap: 1rem; }
.hd-bc--feat h3 { font-size: clamp(1.5rem, 2vw, 2rem); margin-top: 1.1rem; }
.hd-bc--feat p { font-size: 1rem; }
.hd-bc--feat .hd-bc__price { padding-top: 1.1rem; position: relative; }
.hd-bc--feat .hd-bc__price::before { content: ""; position: absolute; top: .5rem; left: 0; width: 2.6rem; height: 1px; background: var(--gold); }

/* 2 card nhỏ */
.hd-bc--sm .hd-bc__img { aspect-ratio: 16 / 7.5; border-radius: 22px 22px 0 0; }
.hd-bc--sm .hd-bc__icon { left: 1.5rem; bottom: -1.7rem; }
.hd-bc--sm .hd-bc__body { padding: 2.4rem 1.8rem 1.8rem; }
.hd-bc--sm h3 { font-size: clamp(1.25rem, 1.55vw, 1.55rem); }
.hd-bc--sm p { font-size: .92rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-cb__wrap { width: calc(100% - 56px); gap: 2rem; } .hd-bc--feat .hd-bc__body { padding: 1.6rem; } }
@media (max-width: 1199px) {
  .hd-cb { padding: 4.5rem 0; }
  .hd-cb__wrap { grid-template-columns: 1fr; gap: 2.6rem; }
  .hd-cb h2 { font-size: clamp(2.2rem, 5.2vw, 3rem); }
  .hd-cb__vals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.8rem; }
  .hd-cb__desc { max-width: 42rem; }
}
@media (max-width: 899px) {
  .hd-bc--feat { flex-direction: column; min-height: 0; }
  .hd-bc--feat .hd-bc__media { flex: none; aspect-ratio: 16 / 9; border-radius: 22px 22px 0 0; }
}
@media (max-width: 767px) {
  .hd-cb__wrap { width: calc(100% - 40px); }
  .hd-cb h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hd-cb__vals { grid-template-columns: 1fr; }
  .hd-cb__bento { grid-template-columns: 1fr; }
  .hd-bc__act { flex-direction: column; } .hd-bb { width: 100%; flex: none; }
  .hd-cb__all { width: 100%; justify-content: space-between; }
  .hd-cb__hand { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .hd-cb .hd-reveal--r { transform: translateX(46px); }
  html.js-anim .hd-cb .hd-reveal--r.in { transform: none; }
}


/* books.css */
/* Section The Knowledge Collection (Tủ sách) — nền nghệ thuật riêng */
.hd-bk { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 6.5rem 0 8.5rem;
  background: #f7f1e4 url("../images/bg-books.svg") center calc(50% + var(--bgy, 0px)) / cover no-repeat; }
.hd-bk__wrap { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1440px; margin: 0 auto; }

/* đầu section: vùng sáng sạch sau chữ */
.hd-bk__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.hd-bk__text { position: relative; max-width: 46rem; }
.hd-bk__text::before { content: ""; position: absolute; z-index: -1; inset: -2.2rem -3.5rem -1.8rem -3.5rem; pointer-events: none;
  background: radial-gradient(ellipse at 38% 50%, rgba(250, 249, 246, .92) 0%, rgba(250, 249, 246, .75) 45%, rgba(250, 249, 246, 0) 78%); }
.hd-bk__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hd-bk__eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--gold); }
.hd-bk h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(2.2rem, 3.2vw, 3.7rem); color: var(--navy); }
.hd-bk h2 span { display: block; }
.hd-bk h2 .hd-gold { color: var(--gold); }
.hd-bk__desc { margin: 1.3rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 43rem; }
.hd-bk__all { flex: none; display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .6rem; padding-bottom: .35rem; color: var(--navy); font-weight: 700; font-size: .98rem; text-decoration: none; border-bottom: 2px solid var(--gold); transition: color .3s; }
.hd-bk__all svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-bk__all:hover { color: #a9802f; }
.hd-bk__all:hover svg { transform: translateX(5px); }
@media (min-width: 1200px) { .hd-bk__all { margin-right: min(11vw, 220px); } }

/* ---------- 3 card ---------- */
.hd-bk__cards { margin-top: 2.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.hd-bkc { display: flex; flex-direction: column; border-radius: 20px; background: #fffdf8; overflow: hidden;
  box-shadow: 0 26px 52px -34px rgba(12, 45, 66, .55), 0 2px 8px rgba(12, 45, 66, .05); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.hd-bkc:hover { transform: translateY(-5px); box-shadow: 0 34px 58px -30px rgba(12, 45, 66, .6), 0 2px 8px rgba(12, 45, 66, .06); }
.hd-bkc__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #efe9db; }
.hd-bkc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hd-bkc:hover .hd-bkc__img img { transform: scale(1.04); }
.hd-bkc__body { display: flex; flex-direction: column; flex: 1; padding: 1.7rem 1.8rem 1.8rem; }
.hd-bkc h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.28; color: var(--navy); min-height: 3.85em; }
.hd-bkc h3 a { color: inherit; text-decoration: none; transition: color .25s; }
.hd-bkc h3 a:hover { color: #a9802f; }
.hd-bkc p { margin: .85rem 0 0; color: var(--muted); font-size: .96rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hd-bkc__price { margin-top: auto; padding-top: 1.2rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.6rem; color: var(--gold); line-height: 1.2; font-variant-numeric: lining-nums; }
.hd-bkc__price small { font-family: var(--font-body), sans-serif; font-size: .9rem; color: var(--navy); font-weight: 600; margin-left: .25rem; }
.hd-bkc__price--ask { font-family: var(--font-body), sans-serif; font-size: .98rem; font-style: italic; color: var(--muted); }
.hd-bkc__act { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.1rem; }
.hd-bkb { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.6rem; border-radius: 30px; background: var(--navy); color: #fff; border: 0; cursor: pointer; font-weight: 700; font-size: .92rem; transition: background .3s; }
.hd-bkb svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-bkb:hover { background: var(--gold); }
.hd-bkb:hover svg { transform: translateX(4px); }
.hd-bkl { display: inline-flex; align-items: center; gap: .45rem; padding-bottom: .25rem; color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none; border-bottom: 1.5px solid rgba(197, 154, 72, .85); transition: color .3s, border-color .3s; }
.hd-bkl svg { width: .9rem; height: .9rem; transition: transform .3s; }
.hd-bkl:hover { color: #a9802f; border-color: var(--gold); }
.hd-bkl:hover svg { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-bk__wrap { width: calc(100% - 56px); } .hd-bkc__body { padding: 1.5rem; } }
@media (max-width: 1199px) {
  .hd-bk { padding: 4.8rem 0 6.5rem; background-position: 60% calc(50% + var(--bgy, 0px)); }
  .hd-bk__head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .hd-bk__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-bk__cards > :nth-child(3) { grid-column: 1 / -1; width: calc(50% - .8rem); justify-self: center; }
  .hd-bkc h3 { min-height: 0; }
}
@media (max-width: 767px) {
  .hd-bk { background: linear-gradient(180deg, #faf9f6 0%, #f4ecdb 70%, #e8dfc9 100%); padding: 4rem 0 5.5rem; }
  .hd-bk::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'><path d='M0 50C80 20 160 80 260 55S360 30 400 45V90H0Z' fill='%230c2d42' fill-opacity='.9'/><path d='M0 30C90 8 170 50 270 30S360 10 400 22' stroke='%23c59a48' fill='none' stroke-opacity='.8'/></svg>") bottom / 100% 100% no-repeat; }
  .hd-bk__wrap { width: calc(100% - 40px); }
  .hd-bk h2 { font-size: clamp(1.75rem, 7.2vw, 2.3rem); }
  .hd-bk h2 span { white-space: nowrap; }
  .hd-bk__text::before { inset: -1.5rem -1.5rem; }
  .hd-bk__cards { grid-template-columns: 1fr; }
  .hd-bk__cards > :nth-child(3) { grid-column: auto; width: auto; }
  .hd-bkc__act { flex-direction: column; align-items: stretch; }
  .hd-bkb { justify-content: center; } .hd-bkl { align-self: center; }
}
@media (prefers-reduced-motion: no-preference) { html.js-anim .hd-bk .hd-reveal--r { transform: translateX(40px); } html.js-anim .hd-bk .hd-reveal--r.in { transform: none; } }


/* philosophy.css */
/* Section The Hai Dang Philosophy — tuyên ngôn · timeline 3 nguyên tắc · người sáng lập */
.hd-ph { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 6.5rem 0 0;
  background: radial-gradient(800px 500px at 100% 0%, rgba(255, 231, 172, .35), transparent 70%), linear-gradient(180deg, #faf9f6 0%, #f8f3e8 100%); }
.hd-ph__wrap { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1600px; margin: 0 auto; }
.hd-ph__curve { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hd-ph__curve path { fill: none; stroke: #d3bb8a; stroke-opacity: .6; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.hd-ph__lh { position: absolute; z-index: 0; top: 2rem; right: 4vw; width: clamp(70px, 8vw, 150px); opacity: .5; pointer-events: none; }

/* ---------- 01 Tuyên ngôn ---------- */
.hd-ph__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: end; }
.hd-ph__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hd-ph__eyebrow::before { content: ""; width: 3rem; height: 1px; background: var(--gold); }
.hd-ph h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.018em; line-height: 1.1; font-size: clamp(2.4rem, 4vw, 4.4rem); color: var(--navy); }
.hd-ph h2 span { display: block; }
.hd-ph h2 .hd-gold { color: var(--gold); }
.hd-ph__desc { margin: 0 0 .6rem; padding-left: 1.6rem; border-left: 2px solid var(--gold); color: var(--muted); font-size: 1.08rem; line-height: 1.75; max-width: 30rem; }

/* ---------- 02 Timeline ---------- */
.hd-tl { position: relative; margin-top: 4.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem; }
.hd-tl__line { position: absolute; z-index: 0; left: 4%; right: 4%; top: 2.75rem; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .3s;
  background: repeating-linear-gradient(90deg, rgba(197, 154, 72, .85) 0 8px, transparent 8px 14px); }
.hd-tl__line.in { transform: none; }
.hd-tls { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 1.4rem; align-items: start; }
.hd-tls__ico { grid-row: 1 / span 2; width: 5.5rem; height: 5.5rem; display: grid; place-items: center; border-radius: 9999px; color: var(--gold); background: radial-gradient(circle at 35% 30%, #fffaf0, #f3e9d1); border: 1px solid rgba(197, 154, 72, .55);
  box-shadow: 0 16px 30px -18px rgba(185, 138, 53, .8); transition: transform .4s; }
.hd-tls:hover .hd-tls__ico { transform: translateY(-4px); }
.hd-tls__ico svg { width: 2.3rem; height: 2.3rem; stroke-width: 1.3; }
.hd-tls__num { font-family: "Playfair Display", Georgia, serif; font-size: 1.9rem; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums; padding-top: .3rem; }
.hd-tls h3 { grid-column: 2; margin: .35rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.45rem, 1.8vw, 1.7rem); line-height: 1.2; color: var(--navy); }
.hd-tls p { grid-column: 1 / -1; margin: 1.1rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 24rem; padding-left: 0; }
.hd-tls + .hd-tls::before { content: ""; position: absolute; left: -1.3rem; top: .6rem; bottom: .4rem; width: 1px; background: linear-gradient(180deg, transparent, rgba(197, 154, 72, .55), transparent); }

/* ---------- 03 Người sáng lập ---------- */
.hd-fd { position: relative; z-index: 2; margin-top: 6rem; padding: 5.5rem 0 6rem; background: linear-gradient(180deg, #f3ecdd 0%, #efe6d3 100%); }
.hd-fd::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 70px; background: linear-gradient(180deg, #f8f3e8, transparent); pointer-events: none; }
.hd-fd__curve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hd-fd__curve path { fill: none; stroke: #c59a48; stroke-opacity: .4; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.hd-fd__grid { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 4.5rem; align-items: center; }

.hd-fd__photo { position: relative; max-width: 560px; justify-self: center; width: 100%; }
.hd-fd__photo::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border: 1px solid rgba(197, 154, 72, .7); border-radius: 22px; z-index: 0; }
.hd-fd__photo::after { content: ""; position: absolute; z-index: 0; left: -2rem; bottom: -2rem; width: 38%; height: 30%; border-radius: 18px; background: linear-gradient(135deg, #16405b, #0c2d42); opacity: .92; }
.hd-fd__frame { position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: radial-gradient(420px 360px at 78% 18%, rgba(255, 226, 160, .5), transparent 70%), linear-gradient(160deg, #1b4d6b, #0c2d42 62%, #08202f);
  box-shadow: 0 36px 60px -34px rgba(12, 45, 66, .75); }
.hd-fd__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; z-index: 3; }
.hd-fd__ph { position: absolute; inset: 0; z-index: 1; }
.hd-fd__ph > svg:not(.hd-fd__arc) { position: absolute; right: 14%; bottom: 20%; width: 21%; color: rgba(255, 238, 200, .55); filter: drop-shadow(0 0 26px rgba(255, 226, 160, .45)); }
.hd-fd__ph .hd-fd__brand { position: absolute; left: 1.8rem; top: 1.8rem; color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 1.05rem; letter-spacing: .1em; line-height: 1.5; }
.hd-fd__ph .hd-fd__brand::after { content: ""; display: block; width: 2.6rem; height: 1px; background: var(--gold); margin-top: .9rem; }
.hd-fd__ph .hd-fd__arc { position: absolute; right: -8%; top: 6%; width: 78%; opacity: .9; }
.hd-fd__sig { position: absolute; z-index: 4; right: 1.6rem; bottom: 1.5rem; text-align: right; color: #e9c274; pointer-events: none; font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.6rem); line-height: 1.05; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }

.hd-fd__eyebrow { color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hd-fd h3 { margin: .9rem 0 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; font-size: clamp(2.1rem, 3vw, 3.2rem); line-height: 1.1; color: var(--navy); }
.hd-fd__role { margin: .7rem 0 0; color: #b0852f; font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; }
.hd-fd__role::after { content: ""; display: block; width: 2.6rem; height: 1px; background: var(--gold); margin-top: 1.3rem; }
.hd-fd__p { margin: 1.4rem 0 0; color: #3c5463; font-size: 1.02rem; line-height: 1.8; max-width: 44rem; }
.hd-fd__quote { position: relative; margin: 2rem 0 0; padding: 1.4rem 1.6rem 1.4rem 4.2rem; border-left: 2px solid var(--gold); border-radius: 0 16px 16px 0; background: rgba(255, 252, 244, .7); max-width: 44rem; }
.hd-fd__quote::before { content: "\201C"; position: absolute; left: 1.2rem; top: .1rem; font-family: "Playfair Display", Georgia, serif; font-size: 4.2rem; line-height: 1; color: var(--gold); }
.hd-fd__quote p { margin: 0; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.6; color: var(--navy); }
.hd-fd__cta { margin-top: 2.2rem; display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.9rem; border-radius: 30px; background: var(--navy); color: #fff; font-weight: 700; font-size: .98rem; text-decoration: none; box-shadow: 0 16px 30px -18px rgba(12, 45, 66, .8); transition: background .3s, transform .3s; }
.hd-fd__cta svg { width: 1.1rem; height: 1.1rem; transition: transform .3s; }
.hd-fd__cta:hover { background: var(--gold); }
.hd-fd__cta:hover svg { transform: translateX(4px); }

/* ---------- Chuyển động ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .hd-ph .hd-reveal--l { transform: translateX(-46px); }
  html.js-anim .hd-ph .hd-reveal--r { transform: translateX(46px); }
  html.js-anim .hd-ph .hd-reveal--l.in, html.js-anim .hd-ph .hd-reveal--r.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hd-tl__line { transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-ph__wrap, .hd-fd__grid { width: calc(100% - 56px); } .hd-ph__top { gap: 2.6rem; } .hd-fd__grid { gap: 3rem; } }
@media (max-width: 1199px) {
  .hd-ph { padding-top: 4.8rem; }
  .hd-ph__top { grid-template-columns: 1fr; gap: 1.8rem; }
  .hd-ph h2 { font-size: clamp(2.3rem, 6vw, 3.4rem); }
  .hd-ph h2 span { display: inline; } .hd-ph h2 span::after { content: " "; }
  .hd-ph__desc { max-width: 40rem; }
  .hd-tl { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 3.2rem; padding-left: 0; }
  .hd-tl__line { left: 2.75rem; right: auto; top: 1rem; bottom: 1rem; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; background: repeating-linear-gradient(180deg, rgba(197, 154, 72, .85) 0 8px, transparent 8px 14px); }
  .hd-tl__line.in { transform: none; }
  .hd-tls + .hd-tls::before { display: none; }
  .hd-tls p { grid-column: 2; margin-top: .7rem; }
  .hd-fd { margin-top: 4.2rem; padding: 4rem 0 4.5rem; }
  .hd-fd__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hd-fd__photo { max-width: 440px; }
}
@media (max-width: 767px) {
  .hd-ph__wrap, .hd-fd__grid { width: calc(100% - 40px); }
  .hd-ph h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hd-ph h2 span { display: block; } .hd-ph h2 span::after { content: none; }
  .hd-ph__lh { display: none; }
  .hd-tls__ico { width: 4.4rem; height: 4.4rem; } .hd-tls__ico svg { width: 1.9rem; height: 1.9rem; }
  .hd-tl__line { left: 2.2rem; }
  .hd-fd__photo::before { inset: 1rem -.6rem -1rem .6rem; } .hd-fd__photo::after { display: none; }
  .hd-fd__quote { padding: 1.2rem 1.2rem 1.2rem 3.4rem; } .hd-fd__quote p { font-size: 1.08rem; }
  .hd-fd__cta { width: 100%; justify-content: center; }
}


/* process.css */
/* Section Quy trình đồng hành — Interactive Journey Timeline (nền tối, hải đăng) */
.hd-pr { --gold: #c59a48; --ink: #c5d0d7; position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 7rem 0 8rem;
  background: #071f33 url("../images/bg-process.svg") center / cover no-repeat; }
.hd-pr::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 31, 51, .35) 0%, rgba(7, 31, 51, 0) 30%, rgba(7, 31, 51, 0) 70%, rgba(7, 31, 51, .6) 100%); }
.hd-pr__wrap { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1600px; margin: 0 auto; }
.hd-pr__head { text-align: center; max-width: 60rem; margin: 0 auto; }
.hd-pr__eyebrow { display: inline-flex; align-items: center; gap: 1.1rem; color: var(--gold); font-size: .85rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hd-pr__eyebrow::before, .hd-pr__eyebrow::after { content: ""; width: 3rem; height: 1px; background: var(--gold); }
.hd-pr h2 { margin: 1.4rem 0 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.012em; line-height: 1.1; font-size: clamp(2.2rem, 3.6vw, 4.2rem); color: #faf6ec; }
.hd-pr h2 span { display: block; }
.hd-pr__sub { margin: 1.4rem 0 0; color: var(--ink); font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.6; }

/* ---------- Timeline ---------- */
.hd-pt { position: relative; margin-top: 3rem; padding-top: 5rem; }
.hd-pt__svg { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 360px; overflow: visible; pointer-events: none; }
.hd-pt__path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3, .6, .2, 1) .2s; filter: drop-shadow(0 0 6px rgba(197, 154, 72, .55)); }
.hd-pt.in .hd-pt__path { stroke-dashoffset: 0; }
.hd-pt__row { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem; align-items: start; }
.hd-ps { position: relative; padding-top: 0; }
.hd-ps:nth-child(1) { --dy: 128px; } .hd-ps:nth-child(2) { --dy: 84px; } .hd-ps:nth-child(3) { --dy: 88px; } .hd-ps:nth-child(4) { --dy: 24px; }
.hd-ps { margin-top: var(--dy); }
.hd-ps__dot { position: absolute; z-index: 3; left: 50%; top: -3.9rem; width: 12px; height: 12px; margin-left: -6px; border-radius: 9999px; background: #ffd98f; box-shadow: 0 0 0 4px rgba(255, 217, 143, .2), 0 0 14px 2px rgba(255, 217, 143, .8);
  opacity: 0; transform: scale(.3); transition: opacity .5s, transform .5s; }
.hd-ps__ico { position: absolute; z-index: 3; left: 50%; top: -2.8rem; width: 5.4rem; height: 5.4rem; margin-left: -2.7rem; display: grid; place-items: center; border-radius: 9999px; color: var(--gold);
  background: radial-gradient(circle at 35% 30%, #0f3350, #071f33); border: 1.5px solid var(--gold); box-shadow: 0 0 0 6px rgba(7, 31, 51, .85), 0 0 26px rgba(197, 154, 72, .28);
  opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .6s, transform .6s, box-shadow .4s; }
.hd-ps__ico svg { width: 2.2rem; height: 2.2rem; stroke-width: 1.4; }
.hd-pt.in .hd-ps__dot, .hd-pt.in .hd-ps__ico { opacity: 1; transform: none; }
.hd-pt.in .hd-ps:nth-child(1) .hd-ps__dot { transition-delay: .4s; } .hd-pt.in .hd-ps:nth-child(1) .hd-ps__ico { transition-delay: .6s; }
.hd-pt.in .hd-ps:nth-child(2) .hd-ps__dot { transition-delay: 1s; } .hd-pt.in .hd-ps:nth-child(2) .hd-ps__ico { transition-delay: 1.2s; }
.hd-pt.in .hd-ps:nth-child(3) .hd-ps__dot { transition-delay: 1.6s; } .hd-pt.in .hd-ps:nth-child(3) .hd-ps__ico { transition-delay: 1.8s; }
.hd-pt.in .hd-ps:nth-child(4) .hd-ps__dot { transition-delay: 2.2s; } .hd-pt.in .hd-ps:nth-child(4) .hd-ps__ico { transition-delay: 2.4s; }
.hd-ps__card { position: relative; padding: 3.6rem 2rem 2.2rem; border-radius: 22px; background: linear-gradient(160deg, rgba(24, 58, 88, .62), rgba(10, 36, 58, .55));
  border: 1px solid rgba(197, 154, 72, .22); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s, border-color .4s, background .4s, box-shadow .4s; }
.hd-pt.in .hd-ps__card { opacity: 1; transform: none; }
.hd-pt.in .hd-ps:nth-child(1) .hd-ps__card { transition-delay: .5s, .5s, 0s, 0s, 0s; } .hd-pt.in .hd-ps:nth-child(2) .hd-ps__card { transition-delay: 1.1s, 1.1s, 0s, 0s, 0s; }
.hd-pt.in .hd-ps:nth-child(3) .hd-ps__card { transition-delay: 1.7s, 1.7s, 0s, 0s, 0s; } .hd-pt.in .hd-ps:nth-child(4) .hd-ps__card { transition-delay: 2.3s, 2.3s, 0s, 0s, 0s; }
.hd-pt.in .hd-ps:hover .hd-ps__card { transform: translateY(-6px); transition-delay: 0s; border-color: rgba(197, 154, 72, .6); background: linear-gradient(160deg, rgba(34, 76, 112, .7), rgba(14, 46, 72, .62)); box-shadow: 0 30px 56px -28px rgba(197, 154, 72, .35); }
.hd-ps:hover .hd-ps__ico { transform: scale(1.05); transition-delay: 0s; box-shadow: 0 0 0 6px rgba(7, 31, 51, .85), 0 0 34px rgba(197, 154, 72, .5); }
.hd-ps__num { display: block; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.8rem, 3.5vw, 3.6rem); line-height: 1; color: var(--gold); font-variant-numeric: lining-nums; opacity: .92; }
.hd-ps h3 { margin: .6rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.45rem, 1.8vw, 1.8rem); line-height: 1.2; color: #fff; }
.hd-ps p { margin: .9rem 0 0; color: var(--ink); font-size: 1rem; line-height: 1.65; }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-pr__wrap { width: calc(100% - 56px); } .hd-pt__row { gap: 1.4rem; } .hd-ps__card { padding: 3.4rem 1.5rem 1.8rem; } }
@media (max-width: 1199px) {
  .hd-pr { padding: 5rem 0 6rem; background-position: 62% center; }
  .hd-pt__svg { display: none; }
  .hd-pt { padding-top: 2.6rem; }
  .hd-pt__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4rem 1.6rem; }
  .hd-ps, .hd-ps:nth-child(n) { margin-top: 0; }
  .hd-ps__dot { display: none; }
}
@media (max-width: 767px) {
  .hd-pr { background: linear-gradient(180deg, #071f33, #0c2d42 70%, #071f33); }
  .hd-pr::after { content: ""; position: absolute; z-index: 0; right: -30px; bottom: 0; width: 220px; height: 260px; opacity: .55; pointer-events: none;
    background: radial-gradient(circle at 70% 30%, rgba(255, 217, 143, .35), transparent 60%); }
  .hd-pr__wrap { width: calc(100% - 40px); }
  .hd-pr h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hd-pr h2 span { display: inline; }
  .hd-pr h2 span::after { content: " "; }
  .hd-pr__eyebrow { letter-spacing: .14em; font-size: .75rem; gap: .7rem; }
  .hd-pr__eyebrow::before, .hd-pr__eyebrow::after { width: 1.4rem; }
  .hd-pt__row { grid-template-columns: 1fr; gap: 1.6rem; padding: 0 0 0 4.9rem; }
  .hd-pt__row::before { content: ""; position: absolute; left: 2.2rem; top: 2.4rem; bottom: 2.4rem; width: 1px; background: linear-gradient(180deg, transparent, var(--gold) 6%, var(--gold) 94%, transparent); transform-origin: top; transform: scaleY(0); transition: transform 2s ease .3s; }
  .hd-pt.in .hd-pt__row::before { transform: none; }
  .hd-ps__ico { left: -4.6rem; top: 1.4rem; margin-left: 0; width: 4.4rem; height: 4.4rem; }
  .hd-ps__ico svg { width: 1.8rem; height: 1.8rem; }
  .hd-ps__card { padding: 1.6rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-pt__path { stroke-dashoffset: 0; transition: none; }
  .hd-ps__dot, .hd-ps__ico, .hd-ps__card { opacity: 1; transform: none; transition: none; }
  .hd-pt__row::before { transform: none; transition: none; }
}


/* knowhub.css */
/* Section Góc Kiến Thức — Editorial knowledge hub: giới thiệu trái · bài nổi bật giữa · 2 bài ngang phải */
.hd-kn { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 5.5rem 0 6rem;
  background: radial-gradient(800px 460px at 0% 100%, rgba(240, 228, 200, .45), transparent 70%), linear-gradient(180deg, #faf9f6 0%, #f8f4ea 100%); }
.hd-kn__wrap { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1760px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 2.2rem; align-items: stretch; }
.hd-kn__curve { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hd-kn__curve path { fill: none; stroke: #d3bb8a; stroke-opacity: .6; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.hd-kn__leaf { position: absolute; z-index: 0; right: -40px; bottom: -30px; width: 240px; opacity: .35; filter: blur(4px); pointer-events: none; }

/* ---------- cột trái ---------- */
.hd-kn__intro { position: relative; display: flex; flex-direction: column; padding: 2rem 1rem 0 0; min-height: 100%; }
.hd-kn__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hd-kn__eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.hd-kn h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.016em; line-height: 1.12; font-size: clamp(2.3rem, 3.2vw, 3.7rem); color: var(--navy); }
.hd-kn h2 span { display: block; white-space: nowrap; }
.hd-kn__desc { margin: 1.5rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 24rem; }
.hd-kn__all { align-self: flex-start; margin-top: 1.8rem; display: inline-flex; align-items: center; gap: .6rem; padding-bottom: .4rem; color: var(--navy); font-weight: 600; font-size: 1rem; text-decoration: none; border-bottom: 1.5px solid var(--gold); transition: color .3s; }
.hd-kn__all svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-kn__all:hover { color: #a9802f; }
.hd-kn__all:hover svg { transform: translateX(5px); }
.hd-kn__lh { margin-top: auto; padding-top: 2rem; width: min(100%, 360px); opacity: .85; pointer-events: none; }
.hd-kn__lh svg { display: block; width: 100%; height: auto; }

/* ---------- card dùng chung ---------- */
.hd-ka { position: relative; display: flex; border-radius: 22px; overflow: hidden; background: #fff; text-decoration: none; color: inherit;
  box-shadow: 0 24px 50px -34px rgba(12, 45, 66, .5), 0 2px 8px rgba(12, 45, 66, .04); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.hd-ka:hover { transform: translateY(-5px); box-shadow: 0 34px 58px -32px rgba(12, 45, 66, .6), 0 2px 8px rgba(12, 45, 66, .05); }
.hd-ka__img { position: relative; display: block; overflow: hidden; background: #efe9db; }
.hd-ka__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hd-ka:hover .hd-ka__img img { transform: scale(1.04); }
.hd-ka__tag { position: absolute; z-index: 2; left: 1.1rem; top: 1.1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 9999px; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(185, 138, 53, .9); }
.hd-ka__tag svg { width: .8rem; height: .8rem; fill: currentColor; stroke: none; }
.hd-ka__body { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hd-ka__label { display: flex; align-items: center; gap: .8rem; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.4; }
.hd-ka--sm .hd-ka__label::after { content: ""; flex: 0 0 1.8rem; height: 1px; background: rgba(197, 154, 72, .7); }
.hd-ka--lead .hd-ka__label::after { content: ""; flex: 0 0 1.8rem; height: 1px; background: rgba(197, 154, 72, .7); }
.hd-ka h3 { margin: .7rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; line-height: 1.26; color: var(--navy);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1.5px no-repeat; transition: color .3s, background-size .5s; width: fit-content; max-width: 100%; }
.hd-ka:hover h3 { color: #a9802f; background-size: 100% 1.5px; }
.hd-ka p { margin: .85rem 0 0; color: var(--muted); line-height: 1.62; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hd-ka__foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hd-ka__cta { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy); font-weight: 600; font-size: .94rem; transition: color .3s; }
.hd-ka__cta svg { width: .95rem; height: .95rem; transition: transform .3s; }
.hd-ka:hover .hd-ka__cta { color: #a9802f; }
.hd-ka:hover .hd-ka__cta svg { transform: translateX(4px); }
.hd-ka__go { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 9999px; color: var(--gold); background: #f4ecd9; transition: background .3s, color .3s, transform .3s; }
.hd-ka__go svg { width: 1.05rem; height: 1.05rem; }
.hd-ka:hover .hd-ka__go { background: var(--gold); color: #fff; transform: translateX(3px); }

/* bài nổi bật (giữa) */
.hd-ka--lead { flex-direction: column; }
.hd-ka--lead .hd-ka__img { aspect-ratio: 16 / 10.5; }
.hd-ka--lead .hd-ka__body { padding: 1.7rem 1.9rem 1.8rem; }
.hd-ka--lead h3 { font-size: clamp(1.5rem, 1.85vw, 2.05rem); }
.hd-ka--lead p { font-size: 1rem; -webkit-line-clamp: 3; }
.hd-ka--lead .hd-ka__go { background: var(--gold); color: #fff; }

/* 2 bài phụ (phải) — nằm ngang */
.hd-kn__side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.6rem; }
.hd-ka--sm { flex-direction: row; padding: .8rem; gap: 1.5rem; align-items: stretch; }
.hd-ka--sm .hd-ka__img { flex: 0 0 31%; border-radius: 16px; min-height: 230px; }
.hd-ka--sm .hd-ka__body { padding: .9rem .9rem .5rem 0; }
.hd-ka--sm h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
.hd-ka--sm p { font-size: .94rem; -webkit-line-clamp: 3; }

@media (prefers-reduced-motion: no-preference) { html.js-anim .hd-kn .hd-reveal--l { transform: translateX(-40px); } html.js-anim .hd-kn .hd-reveal--r { transform: translateX(40px); } html.js-anim .hd-kn .hd-reveal--l.in, html.js-anim .hd-kn .hd-reveal--r.in { transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1599px) { .hd-ka--sm .hd-ka__img { flex-basis: 34%; } .hd-ka--lead .hd-ka__body { padding: 1.5rem 1.6rem; } }
@media (max-width: 1439px) { .hd-kn__wrap { width: calc(100% - 56px); gap: 1.6rem; grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, 1.35fr); } .hd-kn h2 { font-size: clamp(2.1rem, 3vw, 3rem); } }
@media (max-width: 1279px) {
  .hd-kn { padding: 4.6rem 0 5rem; }
  .hd-kn__wrap { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .hd-kn__intro { grid-column: 1 / -1; padding: 0; min-height: 0; }
  .hd-kn h2 span { display: inline; white-space: normal; } .hd-kn h2 span::after { content: " "; }
  .hd-kn__desc { max-width: 42rem; }
  .hd-kn__lh { display: none; }
  .hd-kn__side { grid-template-rows: none; }
  .hd-ka--sm .hd-ka__img { flex-basis: 36%; min-height: 200px; }
}
@media (max-width: 899px) {
  .hd-kn__wrap { grid-template-columns: 1fr; }
  .hd-kn__side { grid-column: 1; }
}
@media (max-width: 599px) {
  .hd-kn__wrap { width: calc(100% - 40px); }
  .hd-kn h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hd-kn h2 span { display: block; } .hd-kn h2 span::after { content: none; }
  .hd-ka--sm { flex-direction: column; padding: 0; gap: 0; }
  .hd-ka--sm .hd-ka__img { flex: none; aspect-ratio: 16 / 9; min-height: 0; border-radius: 0; }
  .hd-ka--sm .hd-ka__body { padding: 1.3rem 1.4rem 1.4rem; }
  .hd-ka--lead .hd-ka__body { padding: 1.4rem; }
}


/* partners.css */
/* Section Hợp tác cùng Hải Đăng — Partnership showcase (6 card 3×2, ảnh cắt cong) */
.hd-pa { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 5.5rem 0 6.5rem;
  background: radial-gradient(900px 500px at 100% 0%, rgba(255, 231, 172, .32), transparent 70%), radial-gradient(700px 400px at 0% 100%, rgba(240, 228, 200, .5), transparent 70%), linear-gradient(180deg, #faf9f6, #f7f1e4); }
.hd-pa__wrap { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1600px; margin: 0 auto; }

/* ---------- đầu section ---------- */
.hd-pa__head { position: relative; min-height: 330px; padding-bottom: 1rem; }
.hd-pa__text { position: relative; z-index: 3; max-width: 58rem; }
.hd-pa__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hd-pa__eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--gold); }
.hd-pa h2 { margin: 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.016em; line-height: 1.1; font-size: clamp(2.2rem, 3.7vw, 4rem); color: var(--navy); }
.hd-pa h2 span { display: block; white-space: nowrap; }
.hd-pa__desc { margin: 1.5rem 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.65; max-width: 44rem; }

/* cảnh hải đăng bên phải */
.hd-pa__scene { position: absolute; z-index: 1; top: -.5rem; right: -1rem; width: min(34vw, 560px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.hd-pa__scene svg { display: block; width: 100%; height: auto; }
.hd-pa__vtext { position: absolute; z-index: 2; top: 3.2rem; right: 0; text-align: left; color: rgba(197, 154, 72, .85); font-size: .56rem; letter-spacing: .3em; line-height: 2; text-transform: uppercase; pointer-events: none; }
.hd-pa__path { position: absolute; z-index: 1; left: 0; top: -1rem; width: 100%; height: 420px; pointer-events: none; overflow: visible; }
.hd-pa__path path { fill: none; stroke: var(--gold); stroke-opacity: .65; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease .2s; }
.hd-pa__path.in path { stroke-dashoffset: 0; }
.hd-pa__dot { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 9999px; background: var(--gold); box-shadow: 0 0 0 4px rgba(197, 154, 72, .18); pointer-events: none; }
.hd-pa__cta { position: absolute; z-index: 4; right: min(4vw, 70px); bottom: 1.2rem; display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 2rem; border-radius: 40px; background: #fffdf8; border: 1.5px solid var(--gold); color: var(--navy); font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 16px 30px -20px rgba(185, 138, 53, .8); transition: background .3s, color .3s, transform .3s; }
.hd-pa__cta svg { width: 1.1rem; height: 1.1rem; transition: transform .3s; }
.hd-pa__cta:hover { background: var(--gold); color: #fff; }
.hd-pa__cta:hover svg { transform: translateX(5px); }

/* ---------- lưới 6 card (24 cột) ---------- */
.hd-pa__grid { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1.4rem; }
.hd-pc6 { position: relative; display: block; min-height: 330px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #fffdf8, #fbf5e8); border: 1px solid rgba(214, 191, 144, .35);
  box-shadow: 0 22px 46px -34px rgba(12, 45, 66, .45); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s, border-color .45s; text-decoration: none; color: inherit; }
.hd-pc6:nth-child(1) { grid-column: span 12; } .hd-pc6:nth-child(2), .hd-pc6:nth-child(3) { grid-column: span 6; }
.hd-pc6:nth-child(4) { grid-column: span 8; } .hd-pc6:nth-child(5) { grid-column: span 9; } .hd-pc6:nth-child(6) { grid-column: span 7; }
.hd-pc6:hover { transform: translateY(-5px); box-shadow: 0 32px 54px -30px rgba(12, 45, 66, .5); border-color: rgba(197, 154, 72, .6); }
.hd-pc6__body { position: relative; z-index: 2; width: 60%; height: 100%; min-height: inherit; display: flex; flex-direction: column; padding: 1.7rem 0 1.7rem 1.9rem; }
.hd-pc6:nth-child(1) .hd-pc6__body { width: 56%; } .hd-pc6:nth-child(5) .hd-pc6__body { width: 55%; }
.hd-pc6__num { display: flex; align-items: center; gap: 1rem; color: var(--gold); font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; line-height: 1; font-variant-numeric: lining-nums; }
.hd-pc6__num::after { content: ""; width: 3.2rem; height: 1px; background: rgba(197, 154, 72, .6); }
.hd-pc6__top { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }
.hd-pc6__ico { flex: none; width: 3.7rem; height: 3.7rem; display: grid; place-items: center; border-radius: 9999px; background: #f4ecd9; color: var(--gold); transition: transform .4s; }
.hd-pc6:hover .hd-pc6__ico { transform: translateY(-3px); }
.hd-pc6__ico svg { width: 1.7rem; height: 1.7rem; stroke-width: 1.4; }
.hd-pc6 h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.2rem, 1.5vw, 1.55rem); line-height: 1.25; color: var(--navy); transition: color .3s; }
.hd-pc6:hover h3 { color: #a9802f; }
.hd-pc6 p { margin: 1.15rem 0 0; color: var(--muted); font-size: .96rem; line-height: 1.7; }
.hd-pc6__go { margin-top: auto; padding-top: 1rem; }
.hd-pc6__go i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 9999px; border: 1px solid rgba(197, 154, 72, .85); color: var(--gold); background: transparent; transition: background .3s, color .3s, transform .3s; }
.hd-pc6__go svg { width: 1.05rem; height: 1.05rem; }
.hd-pc6:hover .hd-pc6__go i { background: var(--gold); color: #fff; transform: translateX(4px); }

/* ảnh cắt cong bất đối xứng, mở rộng sang cạnh phải */
.hd-pc6__img { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 42%; overflow: hidden; border-radius: 55% 0 0 55% / 50% 0 0 50%; background: #efe9db; }
.hd-pc6:nth-child(1) .hd-pc6__img { width: 45%; } .hd-pc6:nth-child(5) .hd-pc6__img { width: 46%; }
.hd-pc6__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hd-pc6:hover .hd-pc6__img img { transform: scale(1.04); }
.hd-pc6__arc { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: calc(42% + 18px); border-radius: 55% 0 0 55% / 50% 0 0 50%; border: 1px solid rgba(197, 154, 72, .55); border-right: 0; pointer-events: none; transition: border-color .4s; }
.hd-pc6:nth-child(1) .hd-pc6__arc { width: calc(45% + 18px); } .hd-pc6:nth-child(5) .hd-pc6__arc { width: calc(46% + 18px); }
.hd-pc6:hover .hd-pc6__arc { border-color: var(--gold); }
.hd-pc6__hand { position: absolute; z-index: 3; left: 38%; bottom: 1.4rem; transform: rotate(-9deg); color: #b0852f; font-family: "Dancing Script", "Segoe Script", cursive; font-size: 1.3rem; line-height: 1.25; pointer-events: none; }

/* chia lại chiều rộng chữ / ảnh để không chồng nhau */
.hd-pc6:nth-child(n) .hd-pc6__body { padding-right: .8rem; }
.hd-pc6:nth-child(1) .hd-pc6__body { width: 60%; } .hd-pc6:nth-child(1) .hd-pc6__img { width: 40%; } .hd-pc6:nth-child(1) .hd-pc6__arc { width: calc(40% + 16px); }
.hd-pc6:nth-child(2) .hd-pc6__body, .hd-pc6:nth-child(3) .hd-pc6__body { width: 64%; }
.hd-pc6:nth-child(2) .hd-pc6__img, .hd-pc6:nth-child(3) .hd-pc6__img { width: 36%; } .hd-pc6:nth-child(2) .hd-pc6__arc, .hd-pc6:nth-child(3) .hd-pc6__arc { width: calc(36% + 14px); }
.hd-pc6:nth-child(4) .hd-pc6__body { width: 62%; } .hd-pc6:nth-child(4) .hd-pc6__img { width: 38%; } .hd-pc6:nth-child(4) .hd-pc6__arc { width: calc(38% + 16px); }
.hd-pc6:nth-child(5) .hd-pc6__body { width: 60%; } .hd-pc6:nth-child(5) .hd-pc6__img { width: 40%; } .hd-pc6:nth-child(5) .hd-pc6__arc { width: calc(40% + 16px); }
.hd-pc6:nth-child(6) .hd-pc6__body { width: 64%; } .hd-pc6:nth-child(6) .hd-pc6__img { width: 36%; } .hd-pc6:nth-child(6) .hd-pc6__arc { width: calc(36% + 14px); }
.hd-pc6 h3 { font-size: clamp(1.15rem, 1.35vw, 1.5rem); } .hd-pc6 p { font-size: .93rem; line-height: 1.65; }
.hd-pc6__hand { left: 40%; bottom: 1.2rem; }

/* ---------- chuyển động ---------- */
@media (prefers-reduced-motion: no-preference) { html.js-anim .hd-pa .hd-reveal--u { transform: translateY(36px); } html.js-anim .hd-pa .hd-reveal--u.in { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd-pa__path path { stroke-dashoffset: 0; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-pa__wrap { width: calc(100% - 56px); } .hd-pc6__body { padding-left: 1.5rem; } .hd-pa__grid { gap: 1.1rem; } .hd-pc6__top { gap: .8rem; } .hd-pc6__ico { width: 3.1rem; height: 3.1rem; } }
@media (max-width: 1199px) {
  .hd-pa { padding: 4.6rem 0 5rem; }
  .hd-pa__head { min-height: 0; }
  .hd-pa h2 span { display: inline; white-space: normal; } .hd-pa h2 span::after { content: " "; }
  .hd-pa__scene, .hd-pa__path, .hd-pa__dot, .hd-pa__vtext { display: none; }
  .hd-pa__cta { position: static; margin-top: 1.6rem; }
  .hd-pa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-pc6:nth-child(n) { grid-column: auto; min-height: 320px; }
  .hd-pc6:nth-child(1) .hd-pc6__body, .hd-pc6:nth-child(5) .hd-pc6__body, .hd-pc6__body { width: 58%; }
  .hd-pc6:nth-child(n) .hd-pc6__img { width: 42%; } .hd-pc6:nth-child(n) .hd-pc6__arc { width: calc(42% + 14px); }
  .hd-pc6__hand { display: none; }
}
@media (max-width: 699px) {
  .hd-pa__wrap { width: calc(100% - 40px); }
  .hd-pa h2 { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .hd-pa h2 span { display: block; white-space: normal; } .hd-pa h2 span::after { content: none; }
  .hd-pa__cta { width: 100%; justify-content: space-between; }
  .hd-pa__grid { grid-template-columns: 1fr; }
  .hd-pc6:nth-child(n) { min-height: 0; display: flex; flex-direction: column-reverse; }
  .hd-pc6:nth-child(n) .hd-pc6__body { width: auto; min-height: 0; padding: 1.4rem; }
  .hd-pc6:nth-child(n) .hd-pc6__img { position: relative; width: 100%; height: 190px; border-radius: 0; }
  .hd-pc6__arc { display: none; }
}

@media (max-width: 1199px) {
  .hd-pc6:nth-child(n) .hd-pc6__body { width: 62%; }
  .hd-pc6:nth-child(n) .hd-pc6__img { width: 38%; } .hd-pc6:nth-child(n) .hd-pc6__arc { width: calc(38% + 14px); }
}
@media (max-width: 699px) {
  .hd-pc6:nth-child(n) .hd-pc6__body { width: auto; padding: 1.4rem; }
  .hd-pc6:nth-child(n) .hd-pc6__img { width: 100%; }
}
@media (max-width: 699px) {
  .hd-pa h2 span { display: inline; } .hd-pa h2 span::after { content: " "; }
  .hd-pc6:nth-child(n) .hd-pc6__body { height: auto; min-height: 0; }
  .hd-pc6__go { margin-top: 1.2rem; padding-top: 0; }
}


/* faq.css */
/* Section FAQ — 2 cột: card giới thiệu trái / accordion cao cấp phải */
.hd-fq { --navy: #0c2d42; --gold: #c59a48; --muted: #627582; position: relative; isolation: isolate; overflow: hidden; padding: 6rem 0 6.5rem;
  background: #faf9f6 url("../images/bg-faq.svg") right center / cover no-repeat; }
.hd-fq::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 249, 246, .92) 0%, rgba(250, 249, 246, .55) 45%, rgba(250, 249, 246, 0) 75%); }
.hd-fq__wrap { position: relative; z-index: 2; width: calc(100% - 80px); max-width: 1600px; margin: 0 auto; }

/* ---------- tiêu đề giữa ---------- */
.hd-fq__head { text-align: center; max-width: 60rem; margin: 0 auto; }
.hd-fq__eyebrow { display: inline-flex; align-items: center; gap: 1rem; color: var(--gold); font-size: .85rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hd-fq__eyebrow::before, .hd-fq__eyebrow::after { content: ""; width: 2.8rem; height: 1px; background: var(--gold); }
.hd-fq h2 { margin: 1.2rem 0 0; font-family: "Playfair Display", var(--font-heading), Georgia, serif; font-weight: 500; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(2.3rem, 3.8vw, 4.1rem); color: var(--navy); }
.hd-fq h2 em { font-style: normal; color: var(--gold); }
.hd-fq__desc { margin: 1.4rem auto 0; max-width: 56rem; color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.7; }

/* ---------- 2 cột ---------- */
.hd-fq__grid { margin-top: 3.4rem; display: grid; grid-template-columns: minmax(340px, .44fr) minmax(0, 1fr); gap: 2.2rem; align-items: stretch; }

/* card trái */
.hd-fq__side { position: relative; overflow: hidden; border-radius: 24px; padding: 2.4rem 2.4rem 0; display: flex; flex-direction: column; min-height: 100%;
  background: linear-gradient(170deg, rgba(255, 253, 248, .96), rgba(246, 239, 224, .92)); border: 1px solid rgba(214, 191, 144, .45); box-shadow: 0 28px 56px -38px rgba(12, 45, 66, .5); }
.hd-fq__qic { width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 9999px; color: var(--gold); border: 1.5px solid rgba(197, 154, 72, .7); background: #fffaf0; position: relative; }
.hd-fq__qic::after { content: ""; position: absolute; right: -1.4rem; top: -.6rem; width: 1.2rem; height: 1.2rem; background:
  linear-gradient(45deg, transparent 46%, rgba(197, 154, 72, .6) 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(197, 154, 72, .6) 46% 54%, transparent 54%); opacity: .7; }
.hd-fq__qic svg { width: 2.4rem; height: 2.4rem; stroke-width: 1.3; }
.hd-fq__side h3 { margin: 1.6rem 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.9rem, 2.4vw, 2.7rem); line-height: 1.15; color: var(--navy); }
.hd-fq__side h3::after { content: ""; display: block; width: 3.2rem; height: 2px; background: var(--gold); margin-top: 1.3rem; }
.hd-fq__side > p { margin: 1.4rem 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.hd-fq__help { position: relative; z-index: 2; margin-top: 1.8rem; padding: 1.3rem 1.4rem 1.5rem; border-radius: 18px; background: rgba(255, 252, 244, .85); border: 1px solid rgba(214, 191, 144, .5); }
.hd-fq__help-row { display: flex; gap: 1rem; align-items: flex-start; }
.hd-fq__compass { flex: none; width: 3.2rem; height: 3.2rem; color: var(--gold); }
.hd-fq__help p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.65; }
.hd-fq__btn { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding: .95rem 1.8rem; border-radius: 40px; border: 0; cursor: pointer; background: var(--navy); color: #fff; font-weight: 600; font-size: .95rem; transition: background .3s, transform .3s; }
.hd-fq__btn svg { width: 1rem; height: 1rem; transition: transform .3s; }
.hd-fq__btn:hover { background: var(--gold); }
.hd-fq__btn:hover svg { transform: translateX(4px); }
.hd-fq__land { position: relative; margin: 1.4rem -2.4rem 0; flex: 1; min-height: 190px; pointer-events: none; }
.hd-fq__land svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }

/* accordion */
.hd-fq__list { display: grid; gap: .9rem; align-content: start; }
.hd-fi { counter-increment: q; border-radius: 20px; background: rgba(255, 253, 248, .96); border: 1px solid rgba(214, 191, 144, .35); box-shadow: 0 14px 30px -26px rgba(12, 45, 66, .5);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .35s; }
.hd-fi:hover { background: #fff; border-color: rgba(197, 154, 72, .6); box-shadow: 0 20px 38px -26px rgba(12, 45, 66, .55); }
.hd-fi[open] { background: linear-gradient(135deg, #fbf3df, #f7ecd2); border-color: rgba(197, 154, 72, .6); }
.hd-fi summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1.6rem; padding: 1.5rem 1.8rem; }
.hd-fi summary::-webkit-details-marker { display: none; }
.hd-fi summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 20px; }
.hd-fi__n { flex: none; width: 2.6rem; color: var(--gold); font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; line-height: 1; font-variant-numeric: lining-nums; position: relative; padding-bottom: .55rem; }
.hd-fi__n::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1.5rem; height: 1.5px; background: var(--gold); }
.hd-fi__q { flex: 1; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.08rem, 1.3vw, 1.3rem); line-height: 1.4; color: var(--navy); }
.hd-fi__t { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 9999px; border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--gold); position: relative; transition: background .3s, color .3s; }
.hd-fi__t::before, .hd-fi__t::after { content: ""; position: absolute; width: .85rem; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s, opacity .35s; }
.hd-fi__t::after { transform: rotate(90deg); }
.hd-fi[open] .hd-fi__t { background: var(--gold); color: #fff; }
.hd-fi[open] .hd-fi__t::after { transform: rotate(0); opacity: 0; }
.hd-fi:hover .hd-fi__t { background: rgba(197, 154, 72, .18); } .hd-fi[open]:hover .hd-fi__t { background: var(--gold); }
.hd-fi__a { overflow: hidden; }
.hd-fi__a > div { padding: 0 4.4rem 1.7rem 6rem; color: #4b6070; font-size: 1.02rem; line-height: 1.8; }

/* khối CTA cuối */
.hd-fq__more { margin-top: .5rem; display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem 1.8rem; border-radius: 20px; background: linear-gradient(135deg, rgba(251, 243, 223, .9), rgba(255, 253, 248, .9)); border: 1px solid rgba(214, 191, 144, .45); }
.hd-fq__hs { flex: none; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 9999px; background: #f1e5c8; color: var(--gold); }
.hd-fq__hs svg { width: 1.9rem; height: 1.9rem; stroke-width: 1.4; }
.hd-fq__more h4 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 1.55rem; color: var(--navy); }
.hd-fq__more p { margin: .3rem 0 0; color: var(--muted); font-size: 1rem; }
.hd-fq__more .hd-fq__btn { margin: 0 0 0 auto; background: var(--gold); padding: 1rem 2.2rem; }
.hd-fq__more .hd-fq__btn:hover { background: var(--navy); }

/* ---------- chuyển động ---------- */
@media (prefers-reduced-motion: no-preference) { html.js-anim .hd-fq .hd-reveal--l { transform: translateX(-36px); } html.js-anim .hd-fq .hd-reveal--l.in { transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) { .hd-fq__wrap { width: calc(100% - 56px); } .hd-fi summary { padding: 1.3rem 1.5rem; gap: 1.2rem; } .hd-fi__a > div { padding-left: 5rem; } }
@media (max-width: 1099px) {
  .hd-fq { padding: 4.6rem 0 5rem; background-position: 78% center; }
  .hd-fq::before { background: linear-gradient(90deg, rgba(250, 249, 246, .92) 0%, rgba(250, 249, 246, .7) 60%, rgba(250, 249, 246, .3) 100%); }
  .hd-fq__grid { grid-template-columns: 1fr; margin-top: 2.6rem; }
  .hd-fq__land { flex: none; height: 170px; min-height: 0; }
}
@media (max-width: 767px) {
  .hd-fq { background: linear-gradient(180deg, #faf9f6, #f6efdf); }
  .hd-fq::before { display: none; }
  .hd-fq__wrap { width: calc(100% - 40px); }
  .hd-fq h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hd-fq__side { padding: 1.8rem 1.4rem 0; } .hd-fq__land { margin: 1.2rem -1.4rem 0; height: 140px; }
  .hd-fi summary { padding: 1.1rem 1.1rem; gap: .9rem; } .hd-fi__n { width: 2rem; font-size: 1.25rem; }
  .hd-fi__a > div { padding: 0 1.2rem 1.4rem 1.2rem; font-size: .98rem; }
  .hd-fq__more { flex-direction: column; align-items: flex-start; text-align: left; } .hd-fq__more .hd-fq__btn { margin: .4rem 0 0; width: 100%; justify-content: center; }
}



/* HD responsive utility hotfix 2026-10-25 */.max-w-\[1280px\]{max-width:1280px}.aspect-\[16\/10\]{aspect-ratio:16/10}.text-\[15px\]{font-size:15px}.tracking-\[0\.2em\]{letter-spacing:.2em}.leading-\[1\.2\]{line-height:1.2}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:justify-between{justify-content:space-between}.md\:p-8{padding:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:items-center{align-items:center}.lg\:gap-10{gap:2.5rem}.lg\:gap-12{gap:3rem}.lg\:gap-16{gap:4rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}.lg\:text-\[2\.6rem\]{font-size:2.6rem}}