/* ============================================================
   TONE VEGA ALORA NHA TRANG — lấy từ poster "Combo trải nghiệm rực rỡ"
   Xanh hoàng gia sâu → magenta → cam/vàng
   Nạp SAU cùng để đè lên giao diện gốc. Muốn trả về cũ: bỏ thẻ link này.
   ============================================================ */
:root{
  --al-navy:#0a1670;      /* nền sâu nhất   */
  --al-blue:#1b3fcb;      /* xanh hoàng gia */
  --al-blue-2:#2b5ae8;    /* xanh điện      */
  --al-cyan:#22b8e0;      /* cyan biển      */
  --al-magenta:#ff2e9a;   /* hồng sen       */
  --al-red:#ff2e4c;       /* đỏ             */
  --al-orange:#ff6b2c;    /* cam            */
  --al-gold:#ffc93c;      /* vàng           */
  --al-violet:#9b3be8;    /* tím            */
  --al-grad: linear-gradient(100deg,var(--al-gold) 0%,var(--al-orange) 22%,
             var(--al-red) 45%,var(--al-magenta) 70%,var(--al-violet) 100%);
  --al-grad-nen: linear-gradient(160deg,var(--al-navy) 0%,var(--al-blue) 55%,
             var(--al-blue-2) 100%);
}

/* --- nền các khối tối --- */
.fix-footer .section-bg,
.absolute-footer{ background:var(--al-grad-nen)!important; }
.absolute-footer{ border-top:3px solid transparent;
  border-image:var(--al-grad) 1; }

/* --- tiêu đề khối: chữ chuyển sắc như poster --- */
.footer_title,
.section-title-main,
h1.uppercase, h2.uppercase{
  background:var(--al-grad); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
}

/* --- nút bấm chính --- */
.button.primary, input[type=submit], .wpcf7-submit,
.button.secondary, .dang-ky{
  background:var(--al-grad)!important; border:0!important;
  color:#fff!important; box-shadow:0 6px 18px rgba(255,46,154,.35);
}
.button.primary:hover, input[type=submit]:hover, .wpcf7-submit:hover{
  filter:brightness(1.08); box-shadow:0 8px 24px rgba(255,107,44,.45);
}

/* --- thanh CTA đáy (mobile) --- */
.bottom-contact{ background:var(--al-grad-nen)!important;
  border-top:2px solid transparent; border-image:var(--al-grad) 1; }

/* --- nút nổi desktop --- */
.desk-contact .phone{ background:var(--al-grad)!important; color:#fff!important;
  border:0!important; }
.desk-contact .dang-ky{ background:var(--al-grad)!important; }

/* --- bảng chọn liên hệ --- */
#nc-hop h3{ background:var(--al-grad-nen)!important;
  border-bottom:3px solid transparent; border-image:var(--al-grad) 1; }
.nc-ten b{ color:var(--al-blue)!important; }
.nc-goi{ background:linear-gradient(100deg,var(--al-orange),var(--al-red))!important; }
.nc-zalo{ background:linear-gradient(100deg,var(--al-blue-2),var(--al-cyan))!important; }
.nc-nv .nc-zl{ background:linear-gradient(100deg,var(--al-blue-2),var(--al-cyan))!important; }

/* --- liên kết --- */
a{ color:var(--al-blue); }
a:hover{ color:var(--al-magenta); }
.absolute-footer a, .fix-footer a{ color:var(--al-gold); }
.absolute-footer a:hover, .fix-footer a:hover{ color:var(--al-orange); }

/* --- gạch chân / đường kẻ --- */
hr{ border:0; height:2px; background:var(--al-grad); opacity:.75; }

/* --- nút cuộn lên đầu --- */
#top-link{ background:var(--al-grad)!important; color:#fff!important; border:0!important; }

/* ============ THANH ĐẦU TRANG (header) ============ */
#masthead.header-main,
.header-wrapper .header-main,
.stuck #masthead.header-main,
.header.has-sticky.stuck .header-main{
  background:var(--al-grad-nen)!important;
  border-bottom:2px solid transparent;
  border-image:var(--al-grad) 1;
  box-shadow:0 4px 20px rgba(10,22,112,.35);
}
/* header trong suốt lúc chưa cuộn: phủ nhẹ để logo trắng vẫn đọc rõ */
.header.transparent .header-main{
  background:linear-gradient(180deg,rgba(10,22,112,.85) 0%,rgba(27,63,203,.35) 100%)!important;
}
.header.transparent.stuck .header-main,
.header.has-sticky.stuck .header-main{
  background:var(--al-grad-nen)!important;
}
/* menu ngang + nút hamburger */
#masthead .nav > li > a,
#masthead .nav > li > a:hover,
.header-main .nav li a{ color:#fff!important; }
#masthead .nav > li > a:hover{ color:var(--al-gold)!important; }
.header-main .icon-menu, #masthead .menu-button i{ color:#fff!important; }
/* gạch chân mục menu đang xem */
#masthead .nav > li.current-menu-item > a{
  color:var(--al-gold)!important;
  border-bottom:2px solid var(--al-gold);
}
/* logo Alora: cho thoáng và cân giữa */
#logo img{ max-height:66px; width:auto; }
/* menu dọc bản điện thoại */
.mobile-sidebar, .sidebar-menu{ background:var(--al-grad-nen)!important; }
.nav-sidebar li a{ color:#fff!important; }
.nav-sidebar li a:hover{ color:var(--al-gold)!important; }

/* ============ MENU GỌN 7 MỤC + XỔ XUỐNG ============ */
#masthead .header-nav-main{ flex-wrap:nowrap; }
#masthead .header-nav-main > li{ position:relative; }
#masthead .header-nav-main > li > a{
  display:flex; align-items:center; gap:5px; white-space:nowrap;
}
/* mũi tên chỉ xuống ở mục có menu con */
.nc-mui{
  display:inline-block; width:0; height:0; margin-left:2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.75;
  transition:transform .18s ease;
}
.nc-co-con:hover .nc-mui{ transform:rotate(180deg); }

/* bảng xổ xuống */
ul.nc-xo{
  position:absolute; top:100%; left:0; min-width:214px; margin:0; padding:6px 0;
  list-style:none; z-index:9999;
  background:linear-gradient(165deg,#0a1670 0%,#15309e 100%);
  border-radius:0 0 12px 12px;
  border-top:3px solid transparent; border-image:var(--al-grad) 1;
  box-shadow:0 14px 34px rgba(4,10,60,.5);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nc-co-con:hover > ul.nc-xo,
.nc-co-con:focus-within > ul.nc-xo{
  opacity:1; visibility:visible; transform:translateY(0);
}
ul.nc-xo li{ margin:0; }
ul.nc-xo li a{
  display:block; padding:9px 18px; color:#fff!important;
  font-size:13.5px; letter-spacing:.4px; text-transform:none;
  border-left:3px solid transparent; transition:.16s;
}
ul.nc-xo li a:hover{
  background:rgba(255,255,255,.10); color:var(--al-gold)!important;
  border-left-color:var(--al-gold); padding-left:22px;
}
/* mục cuối không tràn ra ngoài màn hình */
#masthead .header-nav-main > li:last-child ul.nc-xo,
#masthead .header-nav-main > li:nth-last-child(2) ul.nc-xo{ left:auto; right:0; }

/* ---- bản điện thoại: nhóm hiện thẳng, không cần bấm ---- */
.nc-doc-tieu{
  display:block; padding:11px 20px 5px; color:var(--al-gold);
  font-weight:700; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  opacity:.9;
}
.nav-sidebar .nc-doc-nhom > ul.sub-menu{ list-style:none; margin:0; padding:0; }
.nav-sidebar .nc-doc-nhom > ul.sub-menu li a{
  padding-left:34px!important; font-size:14px; opacity:.95;
}

/* ============ CHUYỂN ĐỘNG CỤM NÚT LIÊN HỆ ============ */
@keyframes nc-tho{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes nc-quang{
  0%,100%{ box-shadow:0 6px 18px rgba(255,46,154,.35), 0 0 0 0 rgba(255,201,60,.55) }
  50%    { box-shadow:0 8px 26px rgba(255,107,44,.55), 0 0 0 12px rgba(255,201,60,0) }
}
@keyframes nc-loe{ 0%{left:-60%} 55%,100%{left:120%} }
@keyframes nc-song{
  0%  { transform:scale(1);   opacity:.55 }
  70% { transform:scale(1.9); opacity:0 }
  100%{ transform:scale(1.9); opacity:0 }
}
@keyframes nc-lac{
  0%,88%,100%{ transform:rotate(0) }
  90%{transform:rotate(-13deg)} 93%{transform:rotate(11deg)}
  96%{transform:rotate(-7deg)}  98%{transform:rotate(4deg)}
}

/* nút nổi bản máy tính */
.desk-contact .phone, .desk-contact .dang-ky, .desk-contact .zalo{
  position:relative; overflow:hidden;
  animation:nc-tho 2.6s ease-in-out infinite, nc-quang 2.6s ease-in-out infinite;
  transition:transform .18s ease, filter .18s ease;
}
.desk-contact .dang-ky{ animation-delay:.5s, .5s; }
.desk-contact .zalo{ animation-delay:1s, 1s; overflow:visible; }
.desk-contact .phone:hover, .desk-contact .dang-ky:hover, .desk-contact .zalo:hover{
  transform:scale(1.09); filter:brightness(1.1); animation-play-state:paused;
}
/* vệt sáng quét ngang */
.desk-contact .phone::after, .desk-contact .dang-ky::after{
  content:""; position:absolute; top:-40%; left:-60%; width:45%; height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-22deg); animation:nc-loe 3.4s ease-in-out infinite; pointer-events:none;
}
.desk-contact .dang-ky::after{ animation-delay:1.2s; }
/* vòng sóng lan quanh nút Zalo */
.desk-contact .zalo::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--al-cyan); animation:nc-song 2.2s ease-out infinite; pointer-events:none;
}
/* ống nghe rung nhẹ */
.desk-contact .phone img{ animation:nc-lac 3.2s ease-in-out infinite; transform-origin:50% 60%; }

/* thanh CTA đáy bản điện thoại */
.bottom-contact li a{ position:relative; display:block; transition:transform .18s ease; }
.bottom-contact li:nth-child(1) img{ animation:nc-lac 3.2s ease-in-out infinite; transform-origin:50% 60%; }
.bottom-contact li:nth-child(2) img{ animation:nc-tho 2.4s ease-in-out infinite; animation-delay:.4s; }
.bottom-contact li:nth-child(3) img{ animation:nc-tho 2.4s ease-in-out infinite; animation-delay:.9s; }
.bottom-contact li a:active{ transform:scale(.93); }

/* nút trong bảng chọn liên hệ */
.nc-hang .nc-goi{ animation:nc-quang 2.8s ease-in-out infinite; }
.nc-hang:nth-child(2) .nc-goi{ animation-delay:.3s }
.nc-hang:nth-child(3) .nc-goi{ animation-delay:.6s }
.nc-hang:nth-child(4) .nc-goi{ animation-delay:.9s }
.nc-nut{ transition:transform .16s ease, filter .16s ease }
.nc-nut:hover{ transform:scale(1.07); filter:brightness(1.1) }

/* tôn trọng người tắt hiệu ứng chuyển động trong hệ điều hành */
@media (prefers-reduced-motion: reduce){
  .desk-contact .phone, .desk-contact .dang-ky, .desk-contact .zalo,
  .desk-contact .phone img, .bottom-contact img, .nc-hang .nc-goi{ animation:none!important }
  .desk-contact .phone::after, .desk-contact .dang-ky::after,
  .desk-contact .zalo::before{ display:none }
}

/* mục menu dự án mới — làm nổi */
#masthead .nc-moi > a{
  background:var(--al-grad); color:#0a1670!important; font-weight:800!important;
  padding:5px 13px!important; border-radius:20px; margin:0 3px;
  box-shadow:0 3px 12px rgba(255,46,154,.35);
}
#masthead .nc-moi > a:hover{ filter:brightness(1.1); color:#0a1670!important; }
.nav-sidebar .nc-moi > a{ color:var(--al-gold)!important; font-weight:800!important; }

/* ============ RESPONSIVE + PHÓNG ẢNH ============ */
.al-wrap img{max-width:100%;height:auto}
.al-tang img,.al-tv img,.al-anhto img{cursor:zoom-in}
/* điện thoại: thư viện 1 cột cho ảnh có chữ, mặt bằng 1 cột cho dễ đọc */
@media(max-width:600px){
  .al-tv{grid-template-columns:1fr!important}
  .al-tang{grid-template-columns:1fr!important}
  .al-luoi.c3{grid-template-columns:1fr!important}
  .al-wrap section{padding:44px 0}
  .al-in{padding:0 16px}
  .al-so{grid-template-columns:1fr 1fr;gap:10px}
  .al-so div{padding:13px 14px}
  .al-bang th,.al-bang td{padding:10px 11px;font-size:13.4px}
  .al-loc{gap:6px}.al-loc-b{padding:7px 13px;font-size:12.6px}
  .al-cta{padding:32px 20px}
  .al-mocs{padding-left:22px}
}
@media(max-width:400px){
  .al-so{grid-template-columns:1fr}
  .al-bc-w{gap:12px 20px}.al-bc-i{height:26px}.al-bc-i img{max-height:26px}
}
/* bảng số liệu: cuộn ngang trong khung riêng nếu quá hẹp */
.al-bang{display:block;overflow-x:auto;white-space:nowrap}
@media(min-width:601px){.al-bang{display:table;white-space:normal}}
/* khung phóng ảnh */
#al-zoom{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;
 background:rgba(4,10,40,.95);padding:14px;cursor:zoom-out}
#al-zoom.mo{display:flex}
#al-zoom img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:8px;
 box-shadow:0 20px 60px rgba(0,0,0,.6)}
#al-zoom .dong{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;
 border:0;background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;line-height:1}
#al-zoom .chu{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#cfe0ff;
 font-size:13px;padding:0 20px}