/*
Theme Name: 48 Trần Phú
Author: 48 Trần Phú
Description: Giao diện giới thiệu 48 Trần Phú, Nha Trang theo thiết kế xanh biển và vàng champagne. Có trang chủ responsive, thư viện ảnh, nhật ký và form liên hệ.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tran-phu-48
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');
:root{--navy:#032437;--deep:#031c2b;--gold:#e6d5a6;--cream:#f4efdf;--line:rgba(218,202,159,.32);--serif:'Playfair Display',Georgia,serif;--sans:Inter,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--navy);color:var(--cream);font-family:var(--sans);font-size:14px;line-height:1.55}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h2{text-transform:uppercase;font-size:clamp(24px,2.35vw,36px);line-height:1.2}button{color:inherit}section{position:relative}main{overflow:hidden}.ruled{border-top:1px solid var(--line)}.sr-only,.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--gold);color:var(--deep);padding:12px}.skip-link:focus{top:10px}
.site-header{position:absolute;top:0;left:0;width:100%;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 8%;gap:35px}.brand{display:flex;align-items:center;font-family:var(--serif);line-height:1.1;white-space:nowrap;gap:7px;font-size:clamp(18px,1.9vw,28px);text-shadow:0 2px 10px #001522}.brand-number{font-size:clamp(43px,4.3vw,64px);letter-spacing:-3px}.brand small{display:block;font-size:.69em;letter-spacing:.055em;margin-top:3px}.site-header nav{display:flex;gap:clamp(22px,3.5vw,52px);align-items:center}.site-header nav a{font-size:clamp(10px,.95vw,14px);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;position:relative;padding:10px 0}.site-header nav a:after{content:'';position:absolute;height:1px;background:var(--gold);left:0;right:100%;bottom:2px;transition:right .25s}.site-header nav a:hover:after{right:0}.menu-toggle{display:none}
.hero{height:clamp(480px,44.5vw,720px);isolation:isolate;background:#05344c}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 57%;z-index:-3}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,28,53,.02) 20%,rgba(0,29,51,.3) 54%,rgba(0,27,49,.58)),linear-gradient(180deg,rgba(0,25,47,.64),transparent 35%,rgba(0,22,38,.15))}.hero-content{position:absolute;top:23%;right:9%;width:49%;text-align:center;text-shadow:0 2px 18px #001e36}.hero-title-line{display:block;font-size:clamp(40px,5vw,79px);white-space:nowrap;line-height:1.2;letter-spacing:.01em}.hero-number{font-size:1.48em;font-weight:400;letter-spacing:-.04em}.hero-city{display:block;font-size:clamp(25px,3vw,45px);line-height:1.2;letter-spacing:.09em}.gold-line{width:57%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:24px auto 21px}.hero-tagline{font-family:var(--serif);font-size:clamp(26px,2.9vw,44px);line-height:1.3}.hero-subtitle{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.8vw,25px);margin-top:6px;letter-spacing:.025em}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;text-transform:uppercase;font-size:13px;line-height:1.1;min-height:44px;padding:12px 24px;transition:background .25s,color .25s}.button span,.text-link span{font-family:Arial,sans-serif;font-size:28px;font-weight:400;line-height:.65}.outline{border:1px solid var(--gold);outline:1px solid rgba(230,213,166,.25);outline-offset:4px;background:#03243755;margin-top:32px}.outline:hover{background:var(--gold);color:var(--deep);text-shadow:none}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);padding:18px 7%;background:linear-gradient(110deg,#062639,#0b2836 55%,#082638);min-height:120px}.pillars .pillar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-transform:uppercase;position:relative;font-size:clamp(12px,1.3vw,18px);letter-spacing:.025em}.pillars .pillar-item+a:before{content:'';position:absolute;left:0;top:14%;height:73%;width:1px;background:linear-gradient(transparent,var(--line),transparent)}.pillars svg{width:40px;height:40px;color:var(--gold);transition:transform .2s}.pillars .pillar-item:hover svg{transform:translateY(-3px)}.mobile-chevron{display:none}
.location{display:grid;grid-template-columns:58% 42%;min-height:280px;height:20.3vw;max-height:340px}.location>img{width:100%;height:100%;object-fit:cover;object-position:center 47%;min-height:0}.location-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:22px 14%;background:radial-gradient(ellipse at top right,#103342,transparent 85%)}.location h2 span{display:block;font-size:.75em;margin-bottom:5px}.location p{font-size:clamp(13px,1.2vw,17px);line-height:1.45;margin:17px 0 12px;max-width:360px}.text-link{display:inline-flex;align-items:center;gap:18px;color:var(--gold);font-size:clamp(10px,.95vw,13px);text-transform:uppercase;letter-spacing:.045em;background:none;border:0;padding:0;line-height:1.6}.text-link:hover{color:white}.text-link span{transition:transform .2s}.text-link:hover span{transform:translateX(5px)}
.identity{height:16vw;min-height:210px;max-height:275px;isolation:isolate}.identity>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;z-index:-2}.identity:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#09283be6,#16384d90 32%,transparent 75%);z-index:-1}.identity-copy{padding:24px 9%;max-width:650px}.identity p{font-size:clamp(14px,1.4vw,20px);max-width:325px;line-height:1.45}.short-line{display:block;width:42px;height:1px;background:var(--gold);margin:14px 0}.gallery{display:grid;grid-template-columns:30% 70%;padding:14px 4% 14px 9%;gap:12px;align-items:center;min-height:180px}.gallery-copy h2{font-size:clamp(23px,2.05vw,30px)}.gallery-copy p{font-size:clamp(12px,1.1vw,15px);line-height:1.4;margin:8px 0}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gallery-item{border:1px solid #a9bec477;padding:4px;position:relative;overflow:hidden;background:#7194a538}.gallery-item img{width:100%;height:auto;aspect-ratio:1.85;object-fit:cover;transition:transform .5s}.gallery-item:hover img{transform:scale(1.06)}.gallery-item>span{position:absolute;bottom:9px;right:13px;opacity:0;transition:opacity .2s}.gallery-item:hover>span{opacity:1}
.journal{display:flex;align-items:center;padding:22px 9%;gap:6%;min-height:150px;isolation:isolate}.journal-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 45%;z-index:-3}.journal:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#062435f5 5%,#092b40df 40%,#092b4090 67%,#08293d15);z-index:-2}.journal h2{font-size:clamp(24px,2.2vw,33px);min-width:180px}.journal .short-line{margin-bottom:0}.journal-copy p{font-size:clamp(13px,1.1vw,16px);margin-bottom:13px}.journal-entries{padding:32px 9%;background:#082b3e}.journal-entries article{padding:20px 0;border-bottom:1px solid var(--line)}.journal-entries h3{font-size:26px;margin:6px 0}.journal-entries time{color:var(--gold);font-size:12px}
.contact{display:flex;gap:28px;align-items:center;padding:25px 5% 26px 8%;min-height:145px;background:radial-gradient(ellipse at 75% 180%,#12617a77 0,transparent 60%),repeating-radial-gradient(ellipse at 80% 170%,transparent 0,transparent 18px,#32718a18 19px,transparent 20px);flex-wrap:wrap}.contact h2{font-size:clamp(20px,1.95vw,29px);padding-right:28px;border-right:1px solid var(--line);flex-shrink:0}.contact-form{display:grid;grid-template-columns:1fr 1fr 1.1fr 1.15fr;gap:14px;flex:1;position:relative;padding-top:16px}.contact input:not([type=hidden]){width:100%;min-width:0;color:var(--cream);background:#001e32aa;border:1px solid #baaf8a99;border-radius:2px;padding:10px 14px;font-size:12px;height:43px}.contact input::placeholder{color:#eee9e1;opacity:.9}.gold{background:linear-gradient(115deg,#f4dfad,#d5aa56);color:#081b27;border:1px solid #ebd298;border-radius:2px;font-size:11px;font-weight:600;white-space:nowrap;padding:10px 14px}.gold:hover{background:#f4dfad}.form-note{grid-column:1/-1;font-size:10px;color:#c7d1d6;margin-top:-7px}.form-status{width:100%;padding:12px;border:1px solid var(--gold);color:var(--gold)}
.lightbox{padding:55px 70px 30px;border:1px solid var(--line);background:#031c2b;color:var(--cream);width:min(1100px,94vw);max-height:95vh}.lightbox::backdrop{background:#001321eF}.lightbox figure{margin:0}.lightbox figure img{max-height:72vh;width:100%;object-fit:contain}.lightbox figcaption{text-align:center;margin-top:16px}.lightbox button{position:absolute;background:none;border:0;font-size:28px;padding:10px}.lightbox-close{right:12px;top:5px}.lightbox-prev{left:10px;top:45%}.lightbox-next{right:10px;top:45%}body.modal-open{overflow:hidden}.article-page{padding:150px 9% 70px;min-height:100vh}.article-page article{max-width:850px;margin:0 auto 40px}.article-page h1{font-size:clamp(32px,5vw,60px);margin:15px 0 30px}.article-page img{height:auto;margin:20px 0}.entry-content p{margin:1em 0}.entry-content a{text-decoration:underline;color:var(--gold)}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.15em}
@media(min-width:1700px){body{max-width:1920px;margin:auto;position:relative}}
@media(max-width:1000px) and (min-width:701px){.site-header{padding:20px 5%}.site-header nav{gap:20px}.hero-content{right:5%;width:55%;top:26%}.location-copy{padding:20px 10%}.contact{gap:18px;padding:24px 5%}.contact h2{font-size:20px;padding-right:18px}.contact-form{gap:8px}.gold{font-size:9px;padding:10px 8px}.gallery{padding-left:6%}.journal{padding-left:6%}.identity-copy{padding-left:6%}}
@media(max-width:700px){
html{scroll-padding-top:12px}body{font-size:13px}.site-header{padding:17px 22px;align-items:center}.brand{font-size:19px;gap:5px}.brand-number{font-size:44px}.brand small{font-size:10px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;background:transparent;border:0}.menu-toggle span{display:block;height:1px;width:25px;background:var(--cream);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)}.site-header nav{display:none;position:absolute;top:77px;left:14px;right:14px;padding:15px 24px;background:#032437fa;border:1px solid var(--line);box-shadow:0 15px 30px #0005}.site-header nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:2px}.site-header nav a{font-size:12px;padding:13px 0;border-bottom:1px solid var(--line)}.site-header nav a:last-child{border:0}
.hero{height:530px;min-height:0}.hero-image{object-position:40% bottom}.hero:before{background:linear-gradient(180deg,#03283fe8 0%,#03283fde 23%,#03283f88 50%,transparent 82%)}.hero-content{top:123px;left:20px;right:20px;width:auto}.hero-title-line{font-size:36px}.hero-number{font-size:1.2em}.hero-city{font-size:22px;letter-spacing:.025em;margin-top:2px}.gold-line{margin:18px auto 13px;width:57%}.hero-tagline{font-size:23px}.hero-subtitle{font-size:15px;margin-top:6px}.outline{margin-top:24px;min-height:36px;font-size:11px;padding:8px 16px;gap:12px}.button span{font-size:24px}
.pillars{display:flex;flex-direction:column;padding:10px 24px 12px;min-height:0;background:linear-gradient(110deg,#092a3b,#0b2533)}.pillars .pillar-item{flex-direction:row;justify-content:flex-start;gap:28px;min-height:54px;font-size:12px;padding:9px 10px}.pillars .pillar-item+a:before{top:0;left:58px;right:0;width:auto;height:1px;background:linear-gradient(90deg,#d6c79d25,transparent)}.pillars svg{width:31px;height:31px;flex-shrink:0}.mobile-chevron{display:block;margin-left:auto;font-size:24px;color:#d1d6cd;font-weight:400}
.location{height:164px;min-height:0;display:block;isolation:isolate}.location>img{position:absolute;inset:0;z-index:-2;object-position:center 48%}.location:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent,#002638a6 45%,#002638de)}.location-copy{background:none;position:absolute;right:0;bottom:22px;width:62%;padding:0 18px}.location h2{font-size:23px}.location h2 span{font-size:20px;margin-bottom:2px}.location p{display:none}.location .text-link{position:absolute;right:20px;bottom:5px;font-size:0;gap:0}.location .text-link span{font-size:25px}.location h2{padding-right:24px}
.identity{height:145px;min-height:0}.identity>img{object-position:center 50%}.identity-copy{padding:22px 30px;max-width:none}.identity h2{font-size:24px;line-height:1.2}.identity p{display:none}.identity .short-line{width:75px;margin-top:17px}.identity:after{background:linear-gradient(90deg,#163348c9,transparent)}
.gallery{display:block;padding:14px 21px 16px;min-height:0}.gallery-copy{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.gallery-copy h2{font-size:23px}.gallery-copy p{display:none}.gallery-copy .text-link{font-size:0;gap:0}.gallery-copy .text-link span{font-size:24px}.gallery-grid{gap:8px}.gallery-item{padding:3px}.gallery-item img{aspect-ratio:1;object-fit:cover}.gallery-item>span{display:none}
.journal{min-height:143px;padding:23px 30px;display:block}.journal h2{font-size:24px;line-height:1.25}.journal-copy p{display:none}.journal .short-line{width:65px;margin-top:14px}.journal-copy .text-link{position:absolute;inset:0;opacity:0;font-size:0}.journal-copy .text-link:focus-visible{opacity:1;font-size:12px;background:#032437ed;justify-content:center}.journal-image{object-position:75% center}.journal:after{background:linear-gradient(90deg,#0d2d40df,#17344780 50%,#17344720)}.journal-entries{padding:20px 28px}
.contact{display:block;padding:25px 40px 65px;min-height:0;background:radial-gradient(ellipse at 50% 130%,#11668877,transparent 60%),repeating-radial-gradient(ellipse at 130% 120%,transparent 0,transparent 17px,#32718a22 18px,transparent 19px)}.contact h2{text-align:center;border:0;padding:0;font-size:21px;line-height:1.3}.contact-form{display:flex;flex-direction:column;padding-top:24px;gap:12px}.contact input:not([type=hidden]){font-size:12px;height:42px;padding:10px 12px}.contact .gold{margin-top:4px;font-size:12px;min-height:42px}.form-note{font-size:9px;text-align:center;margin-top:0;line-height:1.5}.form-status{margin-top:16px}.lightbox{padding:50px 36px 20px}.lightbox button{padding:5px}.lightbox-prev{left:3px}.lightbox-next{right:3px}.article-page{padding:120px 25px 50px}
}
@media(max-width:360px){.hero-title-line{font-size:30px}.hero-tagline{font-size:20px}.hero-subtitle{font-size:13px}.hero{height:480px}.contact{padding-left:28px;padding-right:28px}.pillars .pillar-item{gap:20px}.location-copy{width:65%}.location h2{font-size:20px}.location h2 span{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Dedicated page templates share the homepage sections and visual language. */
.section-page{min-height:100vh;padding-top:130px}
.page-heading{padding:40px 9% 45px;background:radial-gradient(ellipse at top right,#103342,transparent 80%)}
.page-heading h1{font-size:clamp(34px,5vw,64px);margin-top:16px;line-height:1.2}
.page-intro{padding:30px 9%;max-width:1100px;font-size:16px;line-height:1.8}
.section-page .location{height:440px;max-height:none}
.section-page .identity{height:420px;max-height:none}
.section-page .identity-copy{padding-top:65px}
.section-page .gallery{padding-top:45px;padding-bottom:55px}
.section-page .journal{min-height:280px}
.section-page .contact{min-height:300px}
.site-header nav a[aria-current=page]:after{right:0}
.journal-entries .page-numbers{display:inline-block;padding:8px 12px;margin-top:18px;border:1px solid var(--line)}
.journal-entries .page-numbers.current{background:var(--gold);color:var(--deep)}
@media(min-width:701px){.site-header nav{gap:clamp(14px,2.4vw,36px)}}
@media(max-width:700px){
.section-page{padding-top:90px}.page-heading{padding:30px 25px}.page-intro{padding:24px 25px}
.section-page .location{height:auto;min-height:420px}.section-page .location-copy{position:relative;width:100%;padding:40px 28px;bottom:auto;min-height:420px;justify-content:flex-end;background:#03243799}
.section-page .location p{display:block;margin-bottom:22px}.section-page .location .text-link{position:static;font-size:12px}
.section-page .identity{height:auto;min-height:330px}.section-page .identity-copy{padding:45px 28px}.section-page .identity p{display:block}
.section-page .gallery-copy{display:block}.section-page .gallery-copy p{display:block;margin:16px 0}.section-page .gallery-copy .text-link{font-size:12px}.section-page .gallery-grid{grid-template-columns:1fr}.section-page .gallery-item img{aspect-ratio:1.5}
.section-page .journal{padding:35px 28px;min-height:260px}.section-page .journal-copy p{display:block;margin-top:22px}.section-page .journal-copy .text-link{position:static;opacity:1;font-size:12px}
.section-page .contact{padding:35px 28px 55px}
}

/* Consent remains required by the current contact handler. */
.contact .classic-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;font-size:10px;line-height:1.6;color:#c7d1d6}
.contact .classic-consent input[type=checkbox]{width:14px;min-width:14px;height:14px;margin:2px 0 0;padding:0;accent-color:var(--gold)}
.classic-consent a{color:var(--gold);text-decoration:underline}
.classic-photo-note{position:absolute;right:12px;bottom:7px;font-size:9px;color:#e3e9e7;background:#00152299;padding:2px 6px}
@media(max-width:700px){.classic-photo-note{font-size:8px}.contact .classic-consent{font-size:9px}.contact .form-note{margin-top:0}}

/* ACF content keeps the classic layout, with optional media and item counts. */
.pillars{grid-template-columns:repeat(var(--tp48-pillar-count,4),minmax(0,1fr))}
.pillar-icon{width:40px;height:40px;object-fit:contain}
.gallery-grid{grid-template-columns:repeat(var(--tp48-gallery-columns,3),minmax(0,1fr))}
.hero-title-line{white-space:normal;overflow-wrap:anywhere}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.video-toggle{position:absolute;left:20px;bottom:20px;background:#032437cc;border:1px solid var(--line);color:var(--cream);padding:8px 12px;font-size:11px;z-index:1}
.brand .home-logo{width:auto;max-width:220px;max-height:72px;object-fit:contain}
.contact.is-phone-hidden .contact-form{grid-template-columns:1fr 1fr 1.15fr}
@media(max-width:700px){.pillar-icon{width:31px;height:31px;flex-shrink:0}.brand .home-logo{max-width:190px;max-height:48px}}

.tp48-home-without-leading-hero .site-header{position:relative;background:var(--navy);border-bottom:1px solid var(--line)}


.site-header .nav-list{display:flex;align-items:center;gap:inherit;list-style:none;margin:0;padding:0}
.site-header .nav-list a{display:block}
@media(max-width:700px){.site-header .nav-list{flex-direction:column;align-items:stretch;gap:2px;width:100%}.site-header .nav-list li:not(:last-child)>a{border-bottom:1px solid var(--line)}}
.site-header.is-menu-collapsed .nav-list{flex-direction:column;align-items:stretch;gap:2px;width:100%}
.site-header.is-menu-collapsed .nav-list li:not(:last-child)>a{border-bottom:1px solid var(--line)}
/* Collapse a longer selected menu before it overlaps the logo. */
@media(min-width:701px){
.site-header.is-menu-collapsed .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;background:transparent;border:0;flex-shrink:0}
.site-header.is-menu-collapsed .menu-toggle span{display:block;height:1px;width:25px;background:var(--cream)}
.site-header.is-menu-collapsed .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}
.site-header.is-menu-collapsed .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.site-header.is-menu-collapsed .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)}
.site-header.is-menu-collapsed nav{display:none;position:absolute;top:100%;left:14px;right:14px;padding:15px 24px;background:#032437fa;border:1px solid var(--line);max-height:70vh;overflow:auto}
.site-header.is-menu-collapsed nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.site-header.is-menu-collapsed nav a{font-size:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.site-header.is-menu-collapsed nav a:last-child{border:0}
}