/* Mstar UI primitives inspired by shadcn/ui's open-code approach.
   Plain CSS and semantic HTML so the same markup can be used in WordPress. */
:root{
  --ui-radius:10px;
  --ui-border:#c7dfcd;
  --ui-ring:#02773e;
  --ui-surface:#fff;
  --ui-control-height:46px;
}

.ui-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:44px;
  padding:10px 20px;
  border:1px solid transparent;
  border-radius:var(--ui-radius);
  font-family:var(--body);
  font-weight:700;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ui-button:active{transform:translateY(0)}
.header-cta.ui-button{min-height:42px;padding:10px 15px}
.ui-button.button-outline{border-color:#bad3c0}
.ui-button.btn-outline-light{border-color:#a7c6b1}
.ui-button.btn-outline-dark{border-color:var(--green)}
.ui-button[disabled],.ui-button[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.ui-button:focus-visible,.ui-input:focus-visible,.ui-disclosure>summary:focus-visible{
  outline:3px solid var(--ui-ring);
  outline-offset:3px;
}
.ui-card{
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:var(--ui-surface);
}
.field .ui-input{
  display:block;
  width:100%;
  min-height:var(--ui-control-height);
  padding:10px 13px;
  border:1px solid #abcab4;
  border-radius:var(--ui-radius);
  background:#fff;
  color:var(--ink);
  font:400 .91rem/1.4 var(--body);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field .ui-input:hover{border-color:#7aa88a}
.field .ui-input:focus-visible{border-color:var(--ui-ring);box-shadow:0 0 0 3px rgba(2,119,62,.13)}
.field .ui-input::placeholder{color:#66766b;opacity:1}
.field textarea.ui-input{min-height:112px;resize:vertical}
.field select.ui-input{cursor:pointer}
.ui-select{position:relative;width:100%}
.ui-select.is-enhanced>select{position:absolute;width:1px;height:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;pointer-events:none}
.ui-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:var(--ui-control-height);padding:10px 14px;border:1px solid #abcab4;border-radius:var(--ui-radius);background:#fff;color:var(--ink);font:500 .91rem/1.4 var(--body);text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.ui-select-trigger:hover{border-color:#7aa88a;background:#fbfdfb}
.ui-select-trigger:focus-visible,.ui-select.is-open .ui-select-trigger{outline:none;border-color:var(--ui-ring);box-shadow:0 0 0 3px rgba(2,119,62,.13)}
.ui-select-trigger[aria-invalid="true"]{border-color:#b83a39;box-shadow:0 0 0 3px rgba(184,58,57,.11)}
.ui-select-trigger.is-placeholder{color:#66766b;font-weight:400}
.ui-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-trigger::after{content:"";flex:none;width:8px;height:8px;margin-right:3px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.ui-select.is-open .ui-select-trigger::after{transform:translateY(2px) rotate(225deg)}
.ui-select-list{position:absolute;z-index:30;top:calc(100% + 7px);left:0;width:100%;max-height:min(330px,52vh);padding:7px;border:1px solid #c7dfcd;border-radius:12px;background:#fff;box-shadow:0 16px 32px rgba(0,0,0,.16);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#a9cbb1 transparent;scrollbar-width:thin}
.ui-select-list[hidden],.ui-select-error[hidden]{display:none}
.ui-select.opens-up .ui-select-list{top:auto;bottom:calc(100% + 7px)}
.ui-select-group+.ui-select-group{margin-top:6px;padding-top:6px;border-top:1px solid #e6eee8}
.ui-select-group-label{display:block;padding:7px 10px 5px;color:#526b59;font:700 .69rem/1.4 var(--body);letter-spacing:.045em;text-transform:uppercase}
.ui-select-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:500 .87rem/1.4 var(--body);text-align:left;cursor:pointer}
.ui-select-option:hover,.ui-select-option:focus-visible{outline:none;background:#edf6ee;color:#075b31}
.ui-select-option[aria-selected="true"]{background:#e6f3e9;color:#075b31;font-weight:700}
.ui-select-option[aria-selected="true"]::after{content:"";width:10px;height:6px;margin-right:3px;border-left:2px solid #087440;border-bottom:2px solid #087440;transform:rotate(-45deg)}
.ui-select-error{margin:3px 0 0;color:#a83030;font-size:.78rem;line-height:1.4}
.ui-disclosure{border-bottom:1px solid var(--line)}
.ui-disclosure>summary{cursor:pointer}
.ui-disclosure>summary:hover{color:var(--green)}
@media(prefers-reduced-motion:reduce){.ui-button,.field .ui-input,.ui-select-trigger,.ui-select-trigger::after{transition:none}}

/* Compact right-edge contact dock, with labels revealed on hover or focus. */
.contact-float{
  position:fixed;
  z-index:60;
  left:auto;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.contact-float [hidden]{display:none!important}
.contact-float-list{display:grid;gap:9px}
.contact-float .contact-action{
  position:relative;
  display:block;
  width:52px;
  min-width:52px;
  min-height:52px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
}
.contact-action-label{
  position:absolute;
  top:50%;
  right:calc(100% + 12px);
  display:grid;
  gap:2px;
  width:160px;
  padding:10px 13px;
  border:0;
  border-radius:12px;
  background:#fff;
  color:#14261c;
  box-shadow:0 5px 16px rgba(0,0,0,.12);
  opacity:0;
  pointer-events:none;
  transform:translate(7px,-50%);
  transition:opacity .18s ease,transform .18s ease;
}
.contact-action-label strong{font:700 .8rem/1.3 var(--body)}
.contact-action-label small{color:#506457;font:500 .69rem/1.35 var(--body)}
.contact-action:hover .contact-action-label,.contact-action:focus .contact-action-label{
  opacity:1;
  transform:translate(0,-50%);
}
.contact-action-icon{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#16a66b;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.17);
  transition:transform .18s ease;
}
.contact-action:hover .contact-action-icon{transform:translateY(-2px)}
.contact-action-icon svg,.contact-details svg,.contact-line-action svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-action-icon svg{width:24px;height:24px}
.contact-action--zalo .contact-action-icon{background:#0874e8}
.contact-zalo-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:27px;
  border-radius:9px 9px 9px 3px;
  background:#fff;
  color:#0665c9;
  font:800 .66rem/1 var(--body);
  letter-spacing:-.04em;
}
.contact-float .contact-toggle{
  position:relative;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#013d20;
  color:#fff;
  box-shadow:0 5px 17px rgba(0,0,0,.2);
  cursor:pointer;
  transition:background-color .18s ease,transform .18s ease;
}
.contact-float .contact-toggle:hover{background:#02773e;transform:translateY(-2px)}
.contact-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-toggle .contact-close{display:none}
.contact-toggle[aria-expanded="true"] .contact-chat{display:none}
.contact-toggle[aria-expanded="true"] .contact-close{display:block}
.contact-float a:focus-visible,.contact-float button:focus-visible{outline:3px solid #8cc63f;outline-offset:3px}
.contact-action-icon::after,.contact-toggle[aria-expanded="false"]::after{
  content:"";
  position:absolute;
  inset:-3px;
  border:2px solid rgba(140,198,63,.9);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:contact-green-wave 3.6s ease-out infinite;
}
.contact-action--zalo .contact-action-icon::after{animation-delay:1.2s}
.contact-toggle[aria-expanded="false"]::after{animation-delay:2.4s}
@keyframes contact-green-wave{
  0%,8%{opacity:0;transform:scale(.96)}
  18%{opacity:.78;transform:scale(1.05)}
  68%,100%{opacity:0;transform:scale(1.5)}
}
.contact-details a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.contact-details svg{flex:none;color:#02773e}
.contact-lines .contact-line-action{display:inline-flex;align-items:center;gap:9px;min-height:42px}
.contact-line-action svg{flex:none;color:#02773e}
.contact-line-action[href*="zalo.me"] svg,.contact-details a[href*="zalo.me"] svg{color:#0068ff}
.footer-social a{width:44px;height:44px}
.footer-social a[href*="zalo.me"]{color:#fff}
.footer-social a[href*="zalo.me"]:hover,.footer-social a[href*="zalo.me"]:focus-visible{border-color:var(--lime);color:#fff}
@media(max-width:700px){
  body{padding-bottom:0}
  .contact-float{
    left:auto;
    right:max(12px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .contact-float-list{gap:8px}
  .contact-float .contact-action,.contact-action-icon,.contact-float .contact-toggle{width:48px;min-width:48px;min-height:48px;height:48px}
  .contact-action-icon svg{width:22px;height:22px}
  .contact-action-label{display:none}
}
@media(max-height:520px){.contact-float-list{gap:5px}.contact-float .contact-action,.contact-action-icon,.contact-float .contact-toggle{width:42px;min-width:42px;min-height:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.contact-action-icon,.contact-action-label,.contact-float .contact-toggle{transition:none}.contact-action-icon::after,.contact-toggle[aria-expanded="false"]::after{animation:none;display:none}}
@media print{.contact-float{display:none}}