/* Footer chung (store.js footerHTML, 10/10/2026): bo cuc kieu Dior, nen trang tren nen xam nhat,
   chi noi dung PHOEBE co. Trang SCARLETT (body.sc) doi sang nen do + chu vang o cuoi file. */
#site-footer{ display:block; background:#F0EFED; padding:20px; margin:0; font-family:var(--sans); }
#site-footer .ft{ background:#fff; border-radius:6px; padding:44px 44px 34px; color:#33383C; }
#site-footer a{ text-decoration:none; }

.ft-nl__t{ margin:0 0 26px; font-family:'Cormorant Garamond', var(--serif); font-weight:400; font-size:31px; line-height:1.2; color:var(--c-navy); }
.ft-nl{ display:flex; gap:12px; margin:0 0 70px; }
.ft-nl input{ width:400px; max-width:100%; height:60px; padding:0 20px; border:1px solid #C7C7C7; border-radius:4px;
  font:inherit; font-size:16px; color:#33383C; background:#fff; outline:none; }
.ft-nl input:focus{ border-color:var(--c-navy); }
.ft-nl button{ height:60px; padding:0 44px; border:0; border-radius:4px; background:var(--c-champ); color:var(--c-navy);
  font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.ft-nl button:hover{ filter:brightness(.97); }
.ft-nl button:disabled{ opacity:.75; cursor:default; }

.ft-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; margin-bottom:80px; }
.ft-col h3{ margin:0 0 28px; font-family:'Cormorant Garamond', var(--serif); font-weight:400; font-size:31px; line-height:1.2; color:var(--c-navy); }
.ft-col > a, .ft-acc__h{ display:block; margin:0 0 20px; font-size:16.5px; line-height:1.4; color:#757575; transition:color .2s; }
.ft-col > a:hover, .ft-acc__h:hover, .ft-acc__b a:hover{ color:var(--c-navy); }
.ft-acc__h{ padding:0; border:0; background:none; font-family:inherit; cursor:pointer; text-align:left; }
.ft-acc__h i{ display:inline-block; width:9px; height:9px; margin:0 0 4px 16px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .25s; vertical-align:middle; }
.ft-acc.open .ft-acc__h i{ transform:rotate(-135deg); margin-bottom:-2px; }
.ft-acc__b{ display:none; margin:-6px 0 20px; }
.ft-acc.open .ft-acc__b{ display:block; }
.ft-acc__b a{ display:block; margin:0 0 10px; font-size:15px; color:#757575; overflow-wrap:anywhere; }

.ft-bot{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.ft-follow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; font-size:16.5px; }
.ft-follow span{ color:#757575; margin-right:-12px; }
.ft-follow a{ color:#33383C; }
.ft-follow a:hover{ color:var(--c-navy); }
.ft-mark{ display:block; width:132px; height:auto; }
.ft-region{ justify-self:end; display:flex; align-items:center; gap:10px; font-size:16px; color:#757575; }
.ft-region b{ font-weight:400; color:#33383C; }
.ft-region i{ width:8px; height:8px; margin-left:6px; border-right:1.5px solid #33383C; border-bottom:1.5px solid #33383C; transform:rotate(-45deg); }
.ft-region:hover b{ text-decoration:underline; text-underline-offset:4px; }
.ft-copy{ margin-top:26px; text-align:center; font-size:13px; letter-spacing:.04em; color:#9A9A9A; }

/* dien thoai: 1 cot, Contact mo bang mui ten ben phai, quoc gia 2 dong giua 2 duong ke, mang xa hoi 1 hang, logo duoi cung */
@media (max-width: 760px){
  #site-footer{ padding:12px; }
  #site-footer .ft{ padding:30px 22px 28px; }
  .ft-nl__t{ font-size:24px; margin-bottom:18px; }
  .ft-nl{ flex-direction:column; gap:10px; margin-bottom:46px; }
  .ft-nl input{ width:100%; height:52px; flex:none; }
  .ft-nl button{ width:100%; height:52px; flex:none; }
  .ft-cols{ grid-template-columns:1fr; gap:34px; margin-bottom:40px; }
  .ft-col h3{ font-size:24px; margin-bottom:18px; }
  .ft-col > a, .ft-acc__h{ font-size:15px; margin-bottom:16px; }
  .ft-acc__h{ display:flex; width:100%; justify-content:space-between; align-items:center; }
  .ft-acc__h i{ margin:0 6px 4px 0; }
  .ft-bot{ grid-template-columns:1fr; gap:0; }
  .ft-region{ order:1; justify-self:stretch; display:grid; grid-template-columns:1fr auto; row-gap:4px; padding:20px 0; border-top:1px solid #E4E2DF; border-bottom:1px solid #E4E2DF; font-size:15px; }
  .ft-region span{ grid-column:1; }
  .ft-region b{ grid-column:1; }
  .ft-region i{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .ft-follow{ order:2; justify-content:center; padding:24px 0 6px; font-size:15px; gap:8px 14px; }
  .ft-follow span{ display:none; }
  .ft-mark{ order:3; justify-self:center; margin-top:24px; width:110px; }
  .ft-copy{ margin-top:16px; }
}

/* Trang SCARLETT: cung bo cuc, nen do (#360F0E do tu logo), chu kem + vang */
body.sc #site-footer{ background:#360F0E; }
body.sc #site-footer .ft{ background:#360F0E; color:#F3E9DC; border-top:1px solid rgba(232,187,132,.22); border-radius:0; }
body.sc .ft-nl__t, body.sc .ft-col h3{ color:#E8BB84; font-family:'Cinzel', var(--serif); font-size:24px; letter-spacing:.04em; }
body.sc .ft-nl input{ background:transparent; border-color:rgba(243,233,220,.35); color:#F3E9DC; }
body.sc .ft-nl input::placeholder{ color:rgba(243,233,220,.6); }
body.sc .ft-nl input:focus{ border-color:#E8BB84; }
body.sc .ft-nl button{ background:#E8BB84; color:#360F0E; }
body.sc .ft-col > a, body.sc .ft-acc__h, body.sc .ft-acc__b a, body.sc .ft-follow span, body.sc .ft-region{ color:rgba(243,233,220,.72); }
body.sc .ft-col > a:hover, body.sc .ft-acc__h:hover, body.sc .ft-acc__b a:hover, body.sc .ft-follow a:hover{ color:#E8BB84; }
body.sc .ft-follow a, body.sc .ft-region b{ color:#F3E9DC; }
body.sc .ft-region i{ border-color:#F3E9DC; }
body.sc .ft-mark{ filter:brightness(0) invert(.92) sepia(.25); }
body.sc .ft-copy{ color:rgba(243,233,220,.5); }
@media (max-width: 760px){
  body.sc #site-footer{ padding:0; }
  body.sc .ft-region{ border-color:rgba(243,233,220,.18); }
}
body.sc .ft-mark--sc{ width:auto; filter:none; font-family:'Cinzel', var(--serif); font-size:22px; letter-spacing:.08em; color:#E8BB84; white-space:nowrap; }
/* cot tai app PHOEBE (huy hieu App Store chinh thuc cua Apple) */
.ft-appbadge{ display:inline-block; margin-top:2px; }
.ft-appbadge img{ display:block; width:150px; height:auto; }
@media (max-width: 760px){ .ft-appbadge img{ width:140px; } }
