/* Studio Hạnh Phúc Wedding (anhcuoi) — trang chủ đợt 10. Tiền tố ac-. Rỉ sét #b5452a, nâu #5a3a2a, kem #faf5ef */
:root { --c1: #b5452a; --c1d: #963520; --ink: #3a2a20; --mu: #7a6a5e; --line: #e8dccf; --hf: "Cormorant Garamond", Georgia, serif; --bf: "Nunito Sans", sans-serif; }
body { background: #faf5ef; }
/* header trong suốt trên hero, logo kem */
.home #header, .home .header-wrapper { position: absolute; left: 0; right: 0; width: 100%; z-index: 30; }
.home #header .header-bg-color, .home #header .header-bg-image { background: linear-gradient(180deg, rgba(30,18,12,.55), rgba(30,18,12,0)) !important; }
#header .header-main, #header .header-bg-color { background: transparent; }
#header #logo a { display: block; width: 250px; height: 62px; background: url("icons/logo-w.png") left center / contain no-repeat; font-size: 0 !important; color: transparent !important; }
body:not(.home) #header #logo a { background-image: url("icons/logo.png"); }
body:not(.home) #header .header-bg-color { background: #faf5ef !important; }
#header #logo img { display: none !important; } #header #logo { width: 290px !important; max-width: none !important; margin-right: 10px; } #header .flex-left { flex: 1; } #header .flex-left .nav { justify-content: flex-end; width: 100%; padding-right: 30px; } @media (max-width: 849px) { #header #logo { width: 200px !important; } }
#header .nav > li > a { color: #fff !important; font-family: var(--bf); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body:not(.home) #header .nav > li > a { color: var(--ink) !important; }
#header .header-button .button { border: 1px solid rgba(255,255,255,.8); background: transparent !important; color: #fff !important; font-size: 12.5px; letter-spacing: .12em; border-radius: 2px; font-weight: 700; padding: 0 24px; min-height: 40px; line-height: 40px; }
body:not(.home) #header .header-button .button { color: var(--c1) !important; border-color: var(--c1); }
.stuck #header-contents, .header-wrapper.stuck .header-main { background: #4a2f22 !important; }
/* chung */
.ac-eye { font: 700 12.5px/1 var(--bf); letter-spacing: .16em; color: var(--c1); margin: 0 0 12px; }
.ac-c { text-align: center; }
.ac-h2 { font-family: var(--hf) !important; font-size: 46px; line-height: 1.15; font-weight: 600; color: var(--ink) !important; margin: 0; text-transform: none !important; }
.ac-h2.ac-big { font-size: 44px; line-height: 1.22; font-weight: 500; }
.ac-sub { margin: 8px 0 0; font-size: 17px; color: var(--mu); }
.ac-sec { padding: 64px 0 !important; }
.ac-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 28px; }
.ac-hd .ac-eye { margin-bottom: 8px; }
.ac-all { font: 700 12.5px/1 var(--bf); letter-spacing: .12em; color: var(--c1) !important; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ac-all img, .ac-btn img { width: 18px; height: 18px; }
a.ac-btn, a.ac-btn-o { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 32px; font: 700 13.5px/1 var(--bf); letter-spacing: .12em; border-radius: 2px; background: var(--c1); color: #fff !important; border: 1.5px solid var(--c1); text-decoration: none; box-sizing: border-box; }
a.ac-btn img { filter: brightness(0) invert(1); }
a.ac-btn-o { background: transparent; color: var(--c1) !important; }
a.ac-btn:hover { background: var(--c1d); }
.ac-cap { display: block; text-align: center; font: 700 11.5px/1.2 var(--bf); letter-spacing: .12em; color: #6a5648; padding-top: 12px; }
/* hero */
.ac-hero { min-height: 700px; display: flex; align-items: center; }
.ac-hero { position: relative; } .ac-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,14,8,.62), rgba(25,14,8,.22) 55%, rgba(25,14,8,0) 78%); z-index: 1; }  .ac-hero .section-content { width: 100%; padding-top: 84px; position: relative; z-index: 2; }
.ac-h1 { font-family: var(--hf) !important; font-size: 88px; line-height: 1.05; font-weight: 500; color: #fff !important; margin: 0 0 20px; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.ac-hs { color: #fff; font-size: 19px; margin: 0 0 30px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.ac-scroll { display: flex; align-items: center; gap: 14px; margin-top: 70px; color: #fff; font: 700 11px/1 var(--bf); letter-spacing: .16em; } .ac-scroll i { width: 1px; height: 46px; background: rgba(255,255,255,.7); }
/* intro */
.ac-intro { padding: 56px 0 28px !important; } .ac-tags { margin: 16px 0 0; color: var(--mu); font-size: 16px; } .ac-tags i { font-style: normal; margin: 0 10px; color: var(--c1); }
/* album */
.ac-album { padding-top: 40px !important; padding-bottom: 40px !important; }
.ac-main { display: block; margin: 0 0 26px; } .ac-main img { width: 100%; aspect-ratio: 2.35 / 1; object-fit: cover; object-position: 50% 28%; display: block; }
.ac-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ac-g3 a { display: block; }
.ac-g3 img { width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; object-position: 50% 30%; display: block; }
.ac-design .ac-g3 img { object-position: 50% 50%; }
/* video */
.ac-vg { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: 14px 22px; }
.ac-vg a { position: relative; display: block; } .ac-vg img { width: 100%; display: block; object-fit: cover; }
.ac-v1 { grid-row: 1 / 3; } .ac-v1 > img { aspect-ratio: 1.4 / 1; height: calc(100% - 38px); min-height: 0; } .ac-v2 > img, .ac-v3 > img { aspect-ratio: 1.75 / 1; object-position: 50% 25%; }
.ac-play { position: absolute; left: 50%; top: calc(50% - 18px); width: 64px; height: 64px; margin: -32px 0 0 -32px; display: block; } .ac-v2 .ac-play, .ac-v3 .ac-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; } .ac-play img { width: 100%; height: 100%; object-fit: contain; }
/* quote */
.ac-quote { padding: 28px 0 !important; } .ac-qbox { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.ac-q { font: italic 500 34px/1.3 var(--hf); color: var(--ink); text-align: center; margin: 0 0 18px; }
.ac-who { display: flex; align-items: center; justify-content: center; gap: 12px; font: 700 11.5px/1 var(--bf); letter-spacing: .12em; color: #6a5648; } .ac-who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
/* gói */
.ac-plans { padding-bottom: 72px !important; }
.ac-pl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.ac-pc { background: #fff; border: 1px solid var(--line); padding: 30px 32px 32px; text-align: center; display: flex; flex-direction: column; }
.ac-pc.ac-hot { background: #f6e9e0; border-top: 3px solid var(--c1); }
.ac-pc h3 { font-family: var(--hf) !important; font-size: 32px; font-weight: 600; color: var(--ink); margin: 0 0 14px; } .ac-hot h3 { color: var(--c1); }
.ac-pc ul { list-style: none; margin: 0 0 26px; padding: 0; text-align: left; flex: 1; } .ac-pc li { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 16px; color: var(--ink); } .ac-pc li img { width: 18px; height: 18px; flex: none; }
.ac-pc .ac-btn, .ac-pc .ac-btn-o { width: 100%; }
/* CTA */
.ac-cta { min-height: 280px; display: flex; align-items: center; } .ac-cta .row { justify-content: flex-end; } .ac-cta .section-content { width: 100%; }
.ac-cta-t { font-family: var(--hf) !important; font-size: 44px; line-height: 1.15; font-weight: 500; color: #fff !important; margin: 0 0 22px; }
/* footer */
.ac-ft { background: #4a2f22; color: #f3e8dc; }
.ac-ft-in { max-width: 1320px; margin: 0 auto; padding: 48px 20px 30px; display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1fr; gap: 40px; box-sizing: border-box; }
.ac-ft-logo { height: 62px; width: auto; display: block; margin-bottom: 14px; }
.ac-ft-brand b { display: block; font-size: 17px; margin-bottom: 6px; color: #fff; } .ac-ft-brand p { margin: 0; font-size: 15.5px; line-height: 1.6; opacity: .85; max-width: 300px; }
.ac-ft-h { font: 700 12.5px/1 var(--bf); letter-spacing: .14em; margin-bottom: 16px; color: #fff; }
.ac-ft ul { list-style: none; margin: 0; padding: 0; } .ac-ft li { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; }
.ac-ft a { color: #f3e8dc !important; opacity: .9; } .ac-ft a:hover { opacity: 1; text-decoration: underline; }
.ac-ft-ct li, .ac-ft-soc a { display: flex; align-items: flex-start; gap: 10px; } .ac-ft-ct img { width: 20px; height: 20px; flex: none; margin-top: 2px; } .ac-ft-soc a { align-items: center; } .ac-ft-soc img { width: 26px; height: 26px; }
.ac-ft-copy { border-top: 1px solid rgba(255,255,255,.14); text-align: center; font-size: 13px; padding: 16px 20px 22px; opacity: .8; }
/* mobile */
@media (max-width: 849px) {
 .ac-h1 { font-size: 52px; } .ac-h2, .ac-h2.ac-big { font-size: 32px; } .ac-hero { min-height: 560px; } .ac-sec { padding: 40px 0 !important; }
 .ac-hd { flex-direction: column; align-items: flex-start; gap: 10px; } .ac-g3, .ac-pl { grid-template-columns: 1fr; } .ac-main img { aspect-ratio: 1.5 / 1; }
 .ac-vg { grid-template-columns: 1fr; } .ac-v1 { grid-row: auto; } .ac-v1 > img { height: auto; aspect-ratio: 1.5 / 1; } .ac-q { font-size: 24px; }
 .ac-cta-t { font-size: 30px; } .ac-ft-in { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .ac-ft-brand { grid-column: 1 / -1; }
 #header #logo a { width: 190px; height: 48px; }
}

/* ruler:manual */
.ac-play { width: 108px !important; height: 108px !important; margin: -54px 0 0 -54px !important; top: calc(50% - 18px); } .ac-v2 .ac-play, .ac-v3 .ac-play { width: 76px !important; height: 76px !important; margin: -38px 0 0 -38px !important; } .ac-pc li img { width: 14px; height: 14px; }
@media (max-width: 849px) { .ac-hero .section-bg-overlay, .ac-hero .bg-overlay { background-color: rgba(25,14,8,.78) !important; opacity: 1 !important; } }

@media (max-width: 849px) { .ac-hero::before { background: rgba(25,14,8,.62); } .ac-hero { min-height: 620px; } }