.xander-order-sticky {
display: none;
}
@media (max-width: 767px) { .footer__container.content-wrapper {
width: 100% !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
.footer__copyright {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center !important;
box-sizing: border-box !important;
}
.copyright-footer {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.copyright-footer > span {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
line-height: 1.5 !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
.copyright-footer a {
display: inline-block;
} #myBtn {
right: auto !important;
left: 18px !important;
bottom: 20px !important;
width: 52px !important;
height: 52px !important;
padding: 12px !important;
box-sizing: border-box !important;
}
#myBtn img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
} .xander-order-sticky {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 98;
min-height: 48px;
max-width: calc(100vw - 160px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 999px;
background: #4169e1;
color: #fff !important;
box-shadow: 0 8px 24px rgba(23, 24, 31, .18);
font-family: "Inter", "Be Vietnam Pro", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.xander-order-sticky:hover,
.xander-order-sticky:focus {
background: #3458c9;
color: #fff !important;
text-decoration: none !important;
}
.xander-order-sticky svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
}:root{
--xcd-blue:#4169e1;
--xcd-blue-dark:#2347b8;
--xcd-ink:#171b24;
--xcd-muted:#667085;
--xcd-line:#d9dee8;
--xcd-surface:#ffffff;
--xcd-soft:#f6f8fc;
}
.xcd-root,
.xcd-root *{
box-sizing:border-box;
}
.xcd-root{
font-family:"Inter","Be Vietnam Pro",sans-serif;
position:relative;
z-index:99990;
}
.xcd-dock{
--xcd-footer-lift:0px;
position:fixed;
right:max(18px,env(safe-area-inset-right));
bottom:calc(20px + env(safe-area-inset-bottom) + var(--xcd-footer-lift) + var(--xcd-collision-lift,0px));
display:flex;
flex-direction:column;
align-items:flex-end;
gap:9px;
z-index:99992;
transition:bottom .18s ease,opacity .18s ease,transform .18s ease;
}
.xcd-item{
appearance:none;
width:50px;
height:50px;
border:1px solid var(--xcd-line);
border-radius:10px;
background:rgba(255,255,255,.98);
color:var(--xcd-ink);
display:flex;
align-items:center;
justify-content:center;
padding:0;
position:relative;
cursor:pointer;
text-decoration:none!important;
box-shadow:0 8px 22px rgba(23,27,36,.10);
transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.xcd-item:hover,
.xcd-item:focus-visible{
transform:translateY(-1px);
border-color:#b9c8f7;
box-shadow:0 10px 26px rgba(23,27,36,.14);
}
.xcd-item:focus-visible{
outline:2px solid var(--xcd-blue);
outline-offset:3px;
}
.xcd-icon{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.xcd-icon svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.xcd-item--hotline,
.xcd-item--office{
color:var(--xcd-blue-dark);
}
.xcd-item--zalo{
background:#fff;
}
.xcd-icon--zalo{
width:34px;
height:22px;
}
.xcd-icon--zalo img{
display:block;
width:34px;
height:auto;
max-width:100%;
}
.xcd-label{
position:absolute;
right:calc(100% + 9px);
top:50%;
transform:translate(6px,-50%);
min-height:34px;
max-width:210px;
padding:7px 11px;
display:flex;
align-items:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid rgba(65,105,225,.18);
border-radius:7px;
background:var(--xcd-ink);
color:#fff;
font-family:"Inter","Be Vietnam Pro",sans-serif;
font-size:13px;
font-weight:600;
line-height:1;
letter-spacing:0;
opacity:0;
visibility:hidden;
pointer-events:none;
box-shadow:0 8px 20px rgba(23,27,36,.14);
transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
.xcd-item:hover .xcd-label,
.xcd-item:focus-visible .xcd-label{
opacity:1;
visibility:visible;
transform:translate(0,-50%);
}
.xcd-backdrop{
position:fixed;
inset:0;
z-index:99990;
background:rgba(12,18,30,.14);
backdrop-filter:blur(1px);
}
.xcd-popover{
position:fixed;
right:82px;
bottom:22px;
width:min(370px,calc(100vw - 112px));
max-height:min(620px,calc(100vh - 44px));
overflow:auto;
z-index:99993;
background:var(--xcd-surface);
border:1px solid var(--xcd-line);
border-radius:12px;
box-shadow:0 24px 56px rgba(16,24,40,.18);
color:var(--xcd-ink);
}
.xcd-popover[hidden],
.xcd-backdrop[hidden]{
display:none!important;
}
.xcd-popover__head{
position:sticky;
top:0;
z-index:2;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
padding:20px 20px 16px;
background:#fff;
border-bottom:1px solid var(--xcd-line);
}
.xcd-eyebrow{
margin:0 0 4px;
color:var(--xcd-blue);
font-family:"Inter","Be Vietnam Pro",sans-serif;
font-size:11px;
line-height:1.35;
letter-spacing:.11em;
font-weight:700;
}
.xcd-popover h2{
margin:0;
color:var(--xcd-ink);
font-family:"Be Vietnam Pro","Inter",sans-serif;
font-size:23px;
line-height:1.2;
font-weight:700;
}
.xcd-close{
width:32px;
height:32px;
flex:0 0 32px;
display:flex;
align-items:center;
justify-content:center;
appearance:none;
border:0;
border-radius:0;
background:transparent!important;
color:var(--xcd-ink)!important;
padding:0;
cursor:pointer;
box-shadow:none!important;
}
.xcd-close:hover,
.xcd-close:focus-visible{
color:var(--xcd-blue-dark)!important;
background:transparent!important;
}
.xcd-close:focus-visible{
outline:2px solid var(--xcd-blue);
outline-offset:2px;
}
.xcd-close svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
}
.xcd-popover__body{
padding:0 20px 20px;
}
.xcd-office{
padding:20px 0;
border-bottom:1px solid var(--xcd-line);
}
.xcd-office:last-child{
padding-bottom:0;
border-bottom:0;
}
.xcd-office h3{
margin:0 0 8px;
color:var(--xcd-ink);
font-family:"Be Vietnam Pro","Inter",sans-serif;
font-size:16px;
line-height:1.35;
font-weight:650;
}
.xcd-office__address,
.xcd-office__hours{
margin:0;
color:var(--xcd-muted);
font-family:"Inter","Be Vietnam Pro",sans-serif;
font-size:14px;
line-height:1.55;
}
.xcd-office__hours{
margin-top:8px;
}
.xcd-office__hours strong{
color:var(--xcd-ink);
font-weight:600;
}
.xcd-office__hours span{
color:var(--xcd-muted);
}
.xcd-office__actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.xcd-action{
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:6px;
font-family:"Inter","Be Vietnam Pro",sans-serif;
font-size:13px;
line-height:1;
font-weight:650;
text-decoration:none!important;
transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
.xcd-action--primary{
color:#fff!important;
background:var(--xcd-blue);
border:1px solid var(--xcd-blue);
}
.xcd-action--primary:hover{
background:var(--xcd-blue-dark);
border-color:var(--xcd-blue-dark);
}
.xcd-action--secondary{
color:var(--xcd-blue-dark)!important;
background:#fff;
border:1px solid #c8d3ef;
}
.xcd-action--secondary:hover{
background:var(--xcd-soft);
border-color:#aebfe9;
}
.xcd-dock.is-footer-constrained{
opacity:0;
pointer-events:none;
transform:translateY(8px);
}
body.xcd-office-open{
overflow:hidden;
}
@media (max-width:767px){
.xcd-dock{
right:max(14px,env(safe-area-inset-right));
bottom:calc(14px + env(safe-area-inset-bottom) + var(--xcd-footer-lift) + var(--xcd-collision-lift,0px));
gap:8px;
}
.xcd-item{
width:50px;
height:50px;
border-radius:9px;
}
.xcd-label{
display:none!important;
}
.xcd-popover{
right:12px;
left:12px;
bottom:78px;
width:auto;
max-height:min(70vh,560px);
border-radius:10px;
}
.xcd-popover__head{
padding:18px 18px 14px;
}
.xcd-popover__body{
padding:0 18px 18px;
}
.xcd-office{
padding:18px 0;
}
.xcd-office__actions{
display:grid;
grid-template-columns:1fr;
}
.xcd-action{
width:100%;
min-height:42px;
}
}
@media (max-width:380px){
.xcd-office__actions{
grid-template-columns:1fr;
}
}
@media (prefers-reduced-motion:reduce){
.xcd-item,
.xcd-label,
.xcd-dock{
transition:none!important;
}
} .xcd-footer-contact{
display:none;
width:100%;
margin:28px 0 4px;
padding:26px 0 2px;
border-top:1px solid rgba(148,163,184,.28);
color:inherit;
font-family:"Inter","Be Vietnam Pro",sans-serif;
}
.xcd-footer-contact.is-mounted{
display:block;
}
.xcd-footer-contact,
.xcd-footer-contact *{
box-sizing:border-box;
}
.xcd-footer-contact__grid{
display:grid;
grid-template-columns:minmax(180px,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);
gap:28px;
align-items:start;
}
.xcd-footer-contact__item{
min-width:0;
margin:0;
padding:0;
color:inherit!important;
font-family:"Inter","Be Vietnam Pro",sans-serif!important;
}
.xcd-footer-contact__heading{
display:grid;
grid-template-columns:22px minmax(0,1fr);
column-gap:10px;
align-items:start;
margin:0 0 10px;
}
.xcd-footer-contact__icon{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
margin-top:2px;
color:inherit!important;
opacity:.94;
}
.xcd-footer-contact__icon svg{
display:block;
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.xcd-footer-contact__eyebrow{
display:block;
margin:0 0 3px;
color:inherit!important;
opacity:.72;
font-family:"Inter","Be Vietnam Pro",sans-serif!important;
font-size:11px;
line-height:1.35;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.footer .xcd-footer-contact h3,
.xcd-footer-contact h3{
margin:0!important;
color:inherit!important;
font-family:"Be Vietnam Pro","Inter",sans-serif!important;
font-size:15px!important;
line-height:1.4!important;
font-weight:650!important;
letter-spacing:0!important;
}
.footer .xcd-footer-contact h3 a,
.xcd-footer-contact h3 a{
color:inherit!important;
font-family:"Be Vietnam Pro","Inter",sans-serif!important;
text-decoration:none!important;
}
.xcd-footer-contact__hotline h3{
font-size:18px!important;
}
.xcd-footer-contact__line,
.xcd-footer-contact__sub{
margin:0!important;
color:inherit!important;
opacity:.82;
font-family:"Inter","Be Vietnam Pro",sans-serif!important;
font-size:13px!important;
line-height:1.6!important;
}
.xcd-footer-contact__sub{
padding-left:32px;
}
.xcd-footer-contact__line + .xcd-footer-contact__line{
margin-top:4px!important;
}
.footer .xcd-footer-contact a,
.xcd-footer-contact a{
color:inherit!important;
font-family:"Inter","Be Vietnam Pro",sans-serif!important;
text-decoration:none!important;
text-underline-offset:3px;
}
.footer .xcd-footer-contact__line a:hover,
.footer .xcd-footer-contact__line a:focus-visible,
.xcd-footer-contact__line a:hover,
.xcd-footer-contact__line a:focus-visible{
text-decoration:underline!important;
}
.xcd-footer-contact__phone a{
font-weight:600!important;
}
@media(max-width:900px){
.xcd-footer-contact__grid{
grid-template-columns:1fr 1fr;
gap:24px 28px;
}
.xcd-footer-contact__hotline{
grid-column:1 / -1;
}
}
@media(max-width:640px){
.xcd-footer-contact{
margin-top:22px;
padding-top:22px;
}
.xcd-footer-contact__grid{
grid-template-columns:1fr;
gap:22px;
}
.xcd-footer-contact__hotline{
grid-column:auto;
}
.xcd-footer-contact__item + .xcd-footer-contact__item{
padding-top:20px;
border-top:1px solid rgba(148,163,184,.22);
}
}