/* MAS-CONTACT-P01-FIX04: editable independent contact dock palette, shared PC & mobile.
   Load after FIX03 to retain the approved compact dimensions / bottom positioning. */
.mas-cdock {
  --mc-background:#0C4A37;
  --mc-border:#D4AF37;
  --mc-text:#FFF9EE;
  --mc-accent:#D4AF37;
  --mc-call:#638E81;
  --mc-zalo:#2879DF;
  --mc-whatsapp:#25D366;
  --mc-webchat:#BB9046;
  --mc-more:#FFF7E8;
}
/* Desktop: individual dark-green pill buttons down the lower right, champagne hairline. */
@media (min-width:761px) {
 .mas-cdock .mas-cdock-item {
   background:var(--mc-background);
   border:1px solid var(--mc-border);
   box-shadow:0 8px 22px rgba(3,43,29,.23);
   color:var(--mc-text);
 }
 .mas-cdock .mas-cdock-caption {color:var(--mc-text);}
 .mas-cdock .mas-cdock-whatsapp {
   box-shadow:0 8px 25px rgba(3,43,29,.27),0 0 0 1px var(--mc-accent);
 }
 .mas-cdock .mas-cdock-whatsapp .mas-cdock-icon {
   box-shadow:0 0 0 2px var(--mc-accent);
 }
}
/* Palette for the five channel icons, applied on every viewport. */
.mas-cdock .mas-cdock-call .mas-cdock-icon {background:var(--mc-call);color:#fff;}
.mas-cdock .mas-cdock-zalo .mas-cdock-icon {background:var(--mc-zalo);color:#fff;}
.mas-cdock .mas-cdock-whatsapp .mas-cdock-icon {background:var(--mc-whatsapp);color:#fff;}
.mas-cdock .mas-cdock-webchat .mas-cdock-icon {background:var(--mc-webchat);color:#fff;}
.mas-cdock .mas-cdock-more .mas-cdock-icon {background:var(--mc-more);color:var(--mc-background);}
.mas-cdock .mas-cdock-item:focus-visible {outline:3px solid var(--mc-accent);outline-offset:3px;}

/* Mobile: one premium green shell, subtle gradient, champagne border, creamy captions.
   Geometry remains controlled by FIX02/FIX03 (no forced height, gap or positioning). */
@media (max-width:760px) {
 .mas-cdock .mas-cdock-nav {
   background:var(--mc-background);
   background:linear-gradient(135deg,var(--mc-background) 0%,color-mix(in srgb,var(--mc-background) 88%,#041b13) 100%);
   border-color:var(--mc-border);
   box-shadow:0 9px 28px rgba(3,43,29,.35),inset 0 1px 0 rgba(255,255,255,.12);
 }
 .mas-cdock .mas-cdock-nav::before {
   box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
 }
 .mas-cdock .mas-cdock-item,
 .mas-cdock .mas-cdock-item:hover {
   background:transparent;
   border-color:transparent;
   box-shadow:none;
 }
 .mas-cdock .mas-cdock-caption,
 .mas-cdock .mas-cdock-whatsapp .mas-cdock-caption {color:var(--mc-text);}
 .mas-cdock .mas-cdock-icon {box-shadow:0 3px 11px rgba(0,0,0,.15);}
 .mas-cdock .mas-cdock-whatsapp .mas-cdock-icon {
   border-color:#fff;
   box-shadow:0 0 0 2.5px var(--mc-accent),0 7px 20px rgba(0,0,0,.23);
 }
 .mas-cdock .mas-cdock-whatsapp .mas-cdock-icon::before {
   border-color:var(--mc-accent);
 }
}
@media (prefers-reduced-motion:reduce) {
 .mas-cdock .mas-cdock-item {transition:none;}
}