/* =======================================================================
   GLOBAL.CSS — Header · CTA-strip (section trên footer) · Footer · Mobile menu
   NGUỒN DUY NHẤT cho các khối GLOBAL. Mọi trang link file này.
   Sửa global 1 chỗ Ở ĐÂY → tất cả trang tự đổi. ĐỪNG copy các khối này ra chỗ khác.
   (Hệ fluid --px: base desktop 1512, mobile ≤859 base 440. Cần JS set --vpw = clientWidth.)
   ======================================================================= */
:root{
  --px: calc(var(--vpw, 100vw) / 1512);
  --brand:#DF5299; --deep:#D33885; --light:#F496BF; --mid:#EB6CAC;
  --grey:#808184; --grey2:#565656; --grey3:#a3a3a3;
  --line:#f6eaf0; --card:#ffebf5; --langbg:#fcf0f6; --pinklt:#cb91ae;
  --wrap: calc(1512 * var(--px));
}

/* ============        HEADER  (desktop)       =========== */
.hd{width:100%;background:rgba(255,255,255,.75);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);position:sticky;top:0;z-index:60}
.hd-inner{
  width:var(--wrap);margin:0 auto;position:relative;
  height:calc(60 * var(--px));
  display:flex;align-items:stretch;
}
.hd-logo{display:flex;align-items:center;padding-left:calc(36 * var(--px))}
.hd-logo img{height:calc(34 * var(--px));width:auto}
.hd-nav{
  position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);
  display:flex;align-items:center;gap:calc(28 * var(--px));
}
.hd-nav > a, .nav-item > a{
  font-size:calc(13 * var(--px));font-weight:600;color:var(--grey);
  white-space:nowrap;line-height:1;transition:color .18s;
}
.hd-nav .active{color:var(--deep)}
.hd-nav > a:hover, .nav-item:hover > a{color:var(--deep)}
.nav-item{position:relative;display:flex;align-items:center;height:100%;gap:calc(6 * var(--px))}
.nav-item .chev{width:calc(9 * var(--px));height:auto;transition:transform .2s;transform:rotate(180deg)}
.nav-item:hover .chev{transform:rotate(0deg)}
.mega{
  position:absolute;left:calc(-16 * var(--px));top:calc(100% + 0px);
  transform:translateY(6px);
  width:calc(208 * var(--px));
  background:#fff;
  border-radius:0 0 calc(8 * var(--px)) calc(8 * var(--px));
  box-shadow:none;
  padding:calc(18 * var(--px)) calc(16 * var(--px));
  display:flex;flex-direction:column;gap:calc(18 * var(--px));
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s, transform .2s;
}
.nav-item:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega a{display:block}
.mega .m-t{font-size:calc(11 * var(--px));font-weight:600;color:var(--light);margin-bottom:calc(6 * var(--px));transition:color .15s}
.mega .m-s{font-size:calc(10 * var(--px));font-weight:400;color:var(--grey3);line-height:1.4;transition:color .15s}
.mega a:hover .m-t,.mega a.active .m-t{color:var(--deep)}
.mega a:hover .m-s,.mega a.active .m-s{color:#111}
.hd-right{margin-left:auto;display:flex;align-items:stretch}
.hd-contact{display:flex;flex-direction:column;justify-content:center;gap:calc(8 * var(--px));
  padding-right:calc(30 * var(--px));align-self:center}
.hd-phone{display:flex;align-items:center;gap:calc(6 * var(--px))}
.hd-phone img{width:calc(16 * var(--px));height:auto}
.hd-phone span{font-size:calc(16 * var(--px));font-weight:700;color:var(--deep);letter-spacing:.03em;line-height:1}
.hd-divider{height:1px;background:var(--line);width:100%}
.hd-mail{display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--px))}
.hd-mail img{width:calc(12 * var(--px));height:auto}
.hd-mail span{font-size:calc(10 * var(--px));font-weight:500;color:var(--grey);line-height:1}
.hd-donate{
  background:var(--deep);width:calc(60 * var(--px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--px));
}
.hd-donate img{width:calc(30 * var(--px));height:auto}
.hd-donate span{font-size:calc(8 * var(--px));font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.hd-lang{width:calc(34 * var(--px));border-left:.4px solid var(--line);display:flex;flex-direction:column;position:relative}
.hd-lang .lg{flex:1;display:flex;align-items:center;justify-content:center;font-size:calc(9 * var(--px));font-weight:600;color:var(--pinklt);cursor:pointer;transition:.15s}
.hd-lang .lg.active{background:var(--langbg);color:var(--deep)}
.hd-burger{display:none}

/* ==========  SECTION trên FOOTER · CTA Strip (sec8)  ==================== */
.sec8{width:var(--wrap);height:calc(180 * var(--px));margin:0 auto;display:flex;background:#d9d9d9;overflow:hidden}
.sec8-card{position:relative;flex:1;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}
.sec8-card.hair,.sec8-card.vol{background:#eb6cac}
.sec8-card.donate,.sec8-card.biz{background:#d33885}
.sec8-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(28 * var(--px))}
.sec8-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(20 * var(--px));width:100%}
.sec8-icon.hair{width:calc(33.978 * var(--px));height:calc(34 * var(--px))}
.sec8-icon.donate{width:calc(43.177 * var(--px));height:calc(34 * var(--px))}
.sec8-icon.vol{width:calc(34 * var(--px));height:calc(34 * var(--px))}
.sec8-icon.biz{width:calc(56.828 * var(--px));height:calc(34 * var(--px))}
.sec8-label{font-size:calc(24 * var(--px));font-weight:600;color:#fff;text-transform:capitalize;display:block;overflow:hidden;height:1.5em;line-height:1.5;text-align:center}
.sec8-roll{display:block;line-height:1.5;white-space:nowrap;text-align:center}
.sec8-card:hover .sec8-roll{animation:sec8roll .55s ease-in-out}
@keyframes sec8roll{0%,12%{transform:translateY(0)}48%{transform:translateY(170%)}48.01%{transform:translateY(-170%)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.sec8-card:hover .sec8-roll{animation:none}}
.sec8-arrow{width:calc(30.959 * var(--px));height:calc(6.724 * var(--px));object-fit:contain}

/* ==========  FOOTER  ==================================== */
.ft{position:relative;width:var(--wrap);height:calc(800 * var(--px));margin:0 auto;background:#fff;overflow:hidden}
.ft-wm{position:absolute;left:calc(-562 * var(--px));bottom:calc(-214 * var(--px));width:calc(1741 * var(--px));height:calc(957 * var(--px));pointer-events:none;opacity:.06;overflow:hidden}
.ft-wm img{position:absolute;width:359.86%;height:463.07%;left:-129.97%;top:-181.35%;max-width:none}
.ft-wm::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.ft-logoBlock{position:absolute;left:50%;top:calc(63 * var(--px));transform:translateX(-50%);width:calc(587 * var(--px));display:flex;flex-direction:column;gap:calc(16 * var(--px));align-items:center;text-align:center}
.ft-logo{width:calc(552 * var(--px));height:auto}
.ft-intro{font-size:calc(12 * var(--px));font-weight:400;color:#a1a1a1;line-height:calc(24 * var(--px));width:100%}
.ft-title{font-size:calc(14 * var(--px));font-weight:600;color:#a1a1a1;line-height:calc(22 * var(--px));text-transform:uppercase}
.ft-contact{position:absolute;left:calc(36 * var(--px));top:calc(253.5 * var(--px));width:calc(520 * var(--px));display:flex;flex-direction:column;gap:calc(34 * var(--px));align-items:flex-start}
.ft-contact-main{display:flex;flex-direction:column;gap:calc(26 * var(--px))}
.ft-row{display:flex;align-items:center;gap:calc(9 * var(--px));font-size:calc(14 * var(--px));font-weight:400;color:#5c5c5c;line-height:calc(22 * var(--px));white-space:nowrap}
.ft-row.pin img{width:calc(14 * var(--px));height:calc(17.101 * var(--px))}
.ft-row.phone{gap:calc(8 * var(--px));font-size:calc(24 * var(--px));font-weight:600;color:var(--deep)}
.ft-row.phone img{width:calc(18 * var(--px));height:calc(16.105 * var(--px))}
.ft-mails{display:flex;flex-direction:column;gap:calc(9 * var(--px))}
.ft-mail{display:flex;align-items:center;gap:calc(12 * var(--px));width:calc(247.43 * var(--px));height:calc(53 * var(--px));border-radius:9999px;padding:calc(12 * var(--px)) calc(20 * var(--px));color:#fff}
.ft-mail.a{background:#eb6cac}
.ft-mail.b{background:#f496bf}
.ft-mail img{width:calc(18.43 * var(--px));height:calc(16.546 * var(--px))}
.ft-mail span{display:block;font-size:calc(10 * var(--px));font-weight:600;line-height:calc(21 * var(--px))}
.ft-mail b{display:block;font-size:calc(16 * var(--px));font-weight:600;line-height:calc(21 * var(--px))}
.ft-col{position:absolute;top:calc(253.5 * var(--px));display:flex;flex-direction:column;gap:calc(34 * var(--px));align-items:flex-start}
.ft-support{left:calc(564.33 * var(--px));width:calc(260 * var(--px))}
.ft-info{left:calc(877.67 * var(--px));width:calc(260 * var(--px))}
.ft-links{display:flex;flex-direction:column;gap:calc(30 * var(--px));font-size:calc(14 * var(--px));font-weight:400;color:#5c5c5c;line-height:calc(22 * var(--px))}
.ft-links a{white-space:nowrap;transition:color .2s}
.ft-links a:hover{color:var(--deep)}
.ft-social{width:calc(127.54 * var(--px));height:calc(33.18 * var(--px));margin-top:calc(8 * var(--px))}
.ft-qrBlock{position:absolute;left:calc(1202 * var(--px));top:calc(239 * var(--px));width:calc(274 * var(--px));display:flex;flex-direction:column;align-items:center}
.ft-qrCard{width:100%;display:flex;flex-direction:column;gap:calc(15 * var(--px));align-items:center;justify-content:center;background:#fff1f8;border:max(1px,calc(.5 * var(--px))) solid #f8dae7;border-radius:calc(20 * var(--px));padding:calc(14 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px))}
.ft-qrTitle{font-size:calc(14 * var(--px));font-weight:600;color:var(--deep);line-height:calc(22 * var(--px));white-space:nowrap}
.ft-qr{width:calc(270 * var(--px));height:calc(270 * var(--px));border-radius:calc(13 * var(--px));object-fit:cover}
.ft-bank{width:calc(149.553 * var(--px));height:calc(27.316 * var(--px));border-radius:0 0 calc(6.829 * var(--px)) calc(6.829 * var(--px));background:#eb6cac;display:flex;gap:calc(4.097 * var(--px));align-items:center;justify-content:center}
.ft-bank img:first-child{width:calc(91.744 * var(--px));height:auto}
.ft-bank img:last-child{width:calc(44.765 * var(--px));height:auto}
.ft-line{position:absolute;left:calc(36 * var(--px));top:calc(648 * var(--px));width:calc(1440 * var(--px));height:1px;background:#f8dae7}
.ft-bottom{position:absolute;left:50%;top:calc(677 * var(--px));transform:translateX(-50%);width:calc(617.447 * var(--px));display:flex;flex-direction:column;gap:calc(20 * var(--px));align-items:center;text-align:center}
.ft-copy{display:flex;flex-direction:column;gap:calc(9 * var(--px));align-items:center;width:100%}
.ft-copy-main{font-size:calc(12 * var(--px));font-weight:500;color:#f496bf;line-height:calc(22 * var(--px))}
.ft-copy-note{font-size:calc(10 * var(--px));font-weight:400;color:#a6a6a6;line-height:calc(18 * var(--px))}
.ft-build{font-size:calc(10 * var(--px));font-weight:500;color:rgba(166,166,166,.3);line-height:calc(18 * var(--px))}

/* mobile menu ẩn ở desktop */
.m-menu{display:none}

/* ============          MOBILE  (≤859)        =========== */
@media (max-width:859px){
  :root{ --px: calc(var(--vpw, 100vw) / 440); --wrap:var(--vpw, 100vw); }

  /* HEADER mobile */
  .hd-inner{height:calc(54 * var(--px))}
  .hd-logo{padding-left:calc(20 * var(--px))}
  .hd-logo img{height:calc(28 * var(--px))}
  .hd-nav{display:none}
  .hd-contact{display:none}
  .hd-right{align-items:stretch}
  .hd-lang{order:1;width:calc(26 * var(--px))}
  .hd-lang .lg{font-size:calc(8.4 * var(--px))}
  .hd-donate{order:2;width:calc(54 * var(--px))}
  .hd-donate img{width:calc(26 * var(--px))}
  .hd-burger{order:3;display:flex;align-items:center;justify-content:center;width:calc(54 * var(--px));background:#fff}
  .hd-burger span{position:relative;width:calc(24 * var(--px));height:calc(16 * var(--px));display:block}
  .hd-burger span i{position:absolute;left:0;height:calc(2.4 * var(--px));width:100%;background:var(--deep);border-radius:2px;transition:.25s}
  .hd-burger span i:nth-child(1){top:0}
  .hd-burger span i:nth-child(2){top:50%;transform:translateY(-50%)}
  .hd-burger span i:nth-child(3){bottom:0}

  /* SECTION trên FOOTER mobile — 2×2 grid */
  .sec8{height:auto;flex-wrap:wrap}
  .sec8-card{flex:0 0 50%;height:calc(176 * var(--px))}
  .sec8-card.vol{background:#d33885}
  .sec8-card.biz{background:#eb6cac}
  .sec8-in{gap:calc(27.807 * var(--px))}
  .sec8-top{gap:calc(15.89 * var(--px))}
  .sec8-icon.hair{width:calc(33.743 * var(--px));height:calc(33.767 * var(--px))}
  .sec8-icon.donate{width:calc(42.88 * var(--px));height:calc(33.766 * var(--px))}
  .sec8-label{font-size:calc(18 * var(--px))}
  .sec8-arrow{width:calc(30.746 * var(--px));height:calc(6.678 * var(--px))}

  /* FOOTER mobile */
  .ft{height:calc(1180 * var(--px))}
  .ft-wm{left:50%;bottom:0;transform:translateX(-50%);width:calc(2092.651 * var(--px));height:calc(1150 * var(--px))}
  .ft-logoBlock{top:calc(59 * var(--px));width:calc(361.856 * var(--px));gap:calc(16 * var(--px))}
  .ft-logo{width:calc(346.772 * var(--px))}
  .ft-intro{font-size:calc(10 * var(--px));line-height:calc(20 * var(--px));width:calc(361.856 * var(--px))}
  .ft-qrBlock{left:50%;top:calc(188.88 * var(--px));transform:translateX(-50%);width:calc(274 * var(--px))}
  .ft-qrCard{gap:calc(15 * var(--px));padding:calc(14 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px));border-radius:calc(20 * var(--px))}
  .ft-qrTitle{font-size:calc(14 * var(--px));line-height:calc(22 * var(--px))}
  .ft-qr{width:calc(270 * var(--px));height:calc(270 * var(--px));border-radius:calc(13 * var(--px))}
  .ft-bank{width:calc(149.553 * var(--px));height:calc(27.316 * var(--px));gap:calc(4.097 * var(--px))}
  .ft-contact{left:calc(20 * var(--px));top:calc(577.2 * var(--px));width:calc(400 * var(--px));gap:calc(20 * var(--px))}
  .ft-title{font-size:calc(14 * var(--px));line-height:calc(22 * var(--px))}
  .ft-contact-main{gap:calc(14 * var(--px))}
  .ft-row{font-size:calc(12 * var(--px));line-height:calc(22 * var(--px));gap:calc(9 * var(--px))}
  .ft-row.phone{font-size:calc(20 * var(--px));gap:calc(8 * var(--px))}
  .ft-mails{flex-direction:row;gap:calc(7.604 * var(--px))}
  .ft-mail{width:calc(188.143 * var(--px));height:calc(40.301 * var(--px));gap:calc(9.125 * var(--px));padding:calc(9.125 * var(--px)) calc(15.208 * var(--px))}
  .ft-mail img{width:calc(14.014 * var(--px));height:calc(12.581 * var(--px))}
  .ft-mail span{font-size:calc(7.125 * var(--px));line-height:calc(15.968 * var(--px))}
  .ft-mail b{font-size:calc(11.687 * var(--px));line-height:calc(15.968 * var(--px))}
  .ft-col{top:calc(748 * var(--px));gap:calc(20 * var(--px))}
  .ft-info{left:calc(20 * var(--px));width:calc(185 * var(--px))}
  .ft-support{left:calc(228 * var(--px));width:calc(190 * var(--px))}
  .ft-links{gap:calc(22 * var(--px));font-size:calc(12 * var(--px));line-height:calc(22 * var(--px))}
  .ft-social{width:calc(127.54 * var(--px));height:calc(33.18 * var(--px));margin-top:calc(0 * var(--px))}
  .ft-line{left:calc(20 * var(--px));top:calc(990 * var(--px));width:calc(400 * var(--px))}
  .ft-bottom{top:calc(1028 * var(--px));width:calc(300 * var(--px));gap:calc(20 * var(--px))}
  .ft-copy-main{font-size:calc(12 * var(--px));line-height:calc(22 * var(--px))}
  .ft-copy-note{font-size:calc(8 * var(--px));line-height:calc(16 * var(--px));width:calc(280.365 * var(--px))}
  .ft-build{font-size:calc(10 * var(--px));line-height:calc(18 * var(--px))}

  /* MOBILE FULL-SCREEN MENU */
  .m-menu{
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:#fff;
    padding:calc(54 * var(--px)) 0 0;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  body.menu-open .m-menu{transform:translateX(0)}
  body.menu-open{overflow:hidden}
  .m-menu-top{display:flex;align-items:center;justify-content:space-between;height:calc(54 * var(--px));
    position:absolute;top:0;left:0;right:0;padding:0 calc(20 * var(--px));border-bottom:.4px solid var(--line)}
  .m-menu-top img{height:calc(28 * var(--px));width:auto}
  .m-close{width:calc(40 * var(--px));height:calc(40 * var(--px));display:flex;align-items:center;justify-content:center;font-size:calc(28 * var(--px));color:var(--deep);line-height:1}
  .m-nav{padding:calc(14 * var(--px)) calc(24 * var(--px))}
  .m-nav > li{border-bottom:1px solid #f4f0f2}
  .m-nav a,.m-nav .m-exp{display:flex;align-items:center;justify-content:space-between;
    padding:calc(18 * var(--px)) 0;font-size:calc(16 * var(--px));font-weight:600;color:var(--grey);width:100%}
  .m-nav li.active > a,.m-nav a:active{color:var(--deep)}
  .m-nav .m-exp .chev{width:calc(12 * var(--px));transition:transform .25s;transform:rotate(180deg)}
  .m-nav li.open .m-exp .chev{transform:rotate(0deg)}
  .m-sub{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .m-nav li.open .m-sub{max-height:calc(420 * var(--px))}
  .m-sub a{padding:calc(10 * var(--px)) 0 calc(10 * var(--px)) calc(14 * var(--px));font-size:calc(13 * var(--px));font-weight:600;color:var(--light)}
  .m-sub a .m-sub-s{display:block;font-size:calc(10 * var(--px));font-weight:400;color:var(--grey3);margin-top:calc(2 * var(--px))}
  .m-sub a:first-child{color:var(--deep)}
  .m-foot{margin-top:auto;padding:calc(24 * var(--px));background:var(--langbg)}
  .m-foot .mf-row{display:flex;align-items:center;gap:calc(8 * var(--px));margin-bottom:calc(12 * var(--px))}
  .m-foot .mf-row img{width:calc(16 * var(--px));height:auto}
  .m-foot .mf-row span{font-size:calc(13 * var(--px));font-weight:600;color:var(--deep)}
  .m-foot .mf-row.mail span{font-size:calc(11 * var(--px));font-weight:500;color:var(--grey)}
  .m-foot .mf-btn{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--px));
    background:var(--deep);color:#fff;border-radius:calc(40 * var(--px));padding:calc(14 * var(--px));
    font-size:calc(14 * var(--px));font-weight:600;margin-top:calc(6 * var(--px))}
  .m-foot .mf-btn img{width:calc(22 * var(--px));height:auto}
}