/* About · company records (patterns/gioi-thieu-doc.php): centred heading over a folder with four notes around it.
   At rest (no script, editor) the folder is open and the notes are out. assets/js/sections/ab-doc.js tucks them in when
   the section comes into view and pulls them out one by one (.is-in on a note, .is-pull / .is-shut on the folder), and
   makes the folder a button that closes and reopens them. Phones: the notes are a plain list under the folder. */
.ab-doc{
  --ab-doc-btn-w:calc(var(--s-9) * 2.5);
  --ab-doc-btn-h:calc(var(--s-9) * 1.8);
  --ab-doc-stage-h:calc(var(--s-9) * 5);
  --ab-doc-note-w:calc(var(--s-9) * 2.6);
  --ab-doc-dy:calc(var(--s-9) * 1.4);
  --ab-doc-line:calc(var(--s-1) / 2);
  --ab-doc-lid:-28deg;
  --ab-doc-tuck:.3;
  --ab-doc-shadow:0 20px 50px var(--shadow);
  --ab-doc-ring:2px;
  --ab-doc-ledge:0 3px 0 var(--accent-edge);
  --ab-doc-r1:-3deg;
  --ab-doc-r2:2deg;
  --ab-doc-r3:2deg;
  --ab-doc-r4:-2deg;
  --ab-doc-z-note:1;
  --ab-doc-z-front:1;
  --ab-doc-z-btn:2;
  --ab-doc-now:0s;
}
.ab-doc .page > *,.ab-doc__head > *,.ab-doc__folder > *,.ab-doc__btn > *,.ab-doc__front > *,.ab-doc__notes > *,.ab-doc__note > *,.ab-doc__acts > *,.ab-doc__reach > *,.ab-doc__hours > *{margin:0}
.ab-doc__in{display:grid;gap:var(--gap-head);justify-items:center}

/* heading */
.ab-doc__head{display:grid;gap:var(--gap-text);justify-items:center;text-align:center}
.ab-doc__head h2{font-size:var(--t-2xl)}
.ab-doc__head h2 strong{font-weight:inherit;color:var(--accent)}
.ab-doc__head p:not(.mono){max-width:var(--measure);color:var(--ink-2)}

/* folder: back (the box itself) with its tab, a sheet of paper, the front cover that tilts open */
.ab-doc__folder{position:relative;display:grid;place-items:center;width:100%;min-height:var(--ab-doc-stage-h);container-type:inline-size}
.ab-doc__btn{position:relative;z-index:var(--ab-doc-z-btn);width:var(--ab-doc-btn-w);height:var(--ab-doc-btn-h);border-radius:var(--r-card);background:var(--accent-edge);perspective:calc(var(--s-9) * 8)}
.ab-doc__btn[role="button"]{cursor:pointer}
.ab-doc__btn:focus-visible{outline:var(--ab-doc-ring) solid var(--accent);outline-offset:var(--s-1)}
.ab-doc__btn::before{content:"";position:absolute;left:0;top:calc(var(--s-5) * -1);width:40%;height:var(--s-6);border-radius:var(--r-card) var(--r-card) 0 0;background:var(--accent-edge)}
.ab-doc__btn::after{content:"";position:absolute;inset:var(--s-3) var(--s-4) var(--s-4);border-radius:var(--r-pill);
  background:
    linear-gradient(var(--rule), var(--rule)) var(--s-4) var(--s-4) / calc(100% - var(--s-4) - var(--s-7)) var(--ab-doc-line) no-repeat,
    linear-gradient(var(--rule), var(--rule)) var(--s-4) calc(var(--s-4) + var(--s-3)) / calc(100% - var(--s-4) - var(--s-7)) var(--ab-doc-line) no-repeat,
    linear-gradient(var(--rule), var(--rule)) var(--s-4) calc(var(--s-4) + var(--s-5)) / calc(100% - var(--s-4) - var(--s-7)) var(--ab-doc-line) no-repeat,
    var(--card);
  transform:translateY(calc(var(--s-5) * -1));transition:transform var(--dur-m) var(--ease-out)}
.ab-doc__front{position:absolute;inset:var(--s-5) 0 0;z-index:var(--ab-doc-z-front);display:grid;align-content:end;justify-items:start;gap:var(--s-1);padding:var(--s-5);border-radius:var(--r-card);background:var(--accent-fill);color:var(--on-accent);text-align:left;transform-origin:50% 100%;transform:rotateX(var(--ab-doc-lid));transition:transform var(--dur-morph) var(--ease-out)}
.ab-doc__name{font:700 var(--t-l)/1.2 var(--font-display)}
.ab-doc__count{font-size:var(--t-xs);opacity:.85}
.ab-doc__folder.is-pull .ab-doc__btn::after{transform:translateY(calc(var(--s-8) * -1))}
.ab-doc__folder.is-shut .ab-doc__btn::after,.ab-doc__folder.is-shut .ab-doc__front{transform:none}

/* notes: out around the folder; .is-in = tucked inside it */
.ab-doc__note{--ab-doc-sx:-1;--ab-doc-sy:-1;--ab-doc-r:var(--ab-doc-r1);--ab-doc-dx:min(calc(var(--s-9) * 3.4), calc(50cqi - var(--s-9) * 1.3 - var(--s-4)));
  position:absolute;left:50%;top:50%;z-index:var(--ab-doc-z-note);display:grid;gap:var(--s-1);width:var(--ab-doc-note-w);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);box-shadow:var(--ab-doc-shadow);text-align:left;
  transform:translate(calc(-50% + var(--ab-doc-sx) * var(--ab-doc-dx)), calc(-50% + var(--ab-doc-sy) * var(--ab-doc-dy))) rotate(var(--ab-doc-r));
  transition:transform calc(var(--dur-morph) * 1.2) var(--ease-out),opacity var(--dur),visibility var(--ab-doc-now)}
.ab-doc__note:nth-child(2){--ab-doc-sx:1;--ab-doc-r:var(--ab-doc-r2)}
.ab-doc__note:nth-child(3){--ab-doc-sy:1;--ab-doc-r:var(--ab-doc-r3)}
.ab-doc__note:nth-child(4){--ab-doc-sx:1;--ab-doc-sy:1;--ab-doc-r:var(--ab-doc-r4)}
.ab-doc__note.is-in{opacity:0;visibility:hidden;transform:translate(-50%, calc(-50% - var(--s-9))) scale(var(--ab-doc-tuck));transition:transform var(--dur-morph) var(--ease-out),opacity var(--dur),visibility var(--ab-doc-now) var(--dur-morph)}
.ab-doc__folder.is-snap .ab-doc__note,.ab-doc__folder.is-snap .ab-doc__front,.ab-doc__folder.is-snap .ab-doc__btn::after{transition:none}
.ab-doc__v{font:600 var(--t-m)/1.35 var(--font-body)}
.ab-doc__sub,.ab-doc__hours{font-size:var(--t-xs);color:var(--ink-2)}
.ab-doc__note a{color:var(--accent)}
.ab-doc__acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
/* "Chép MST" and "Tra cứu": small ghost buttons on a brand ledge, as in the design (no copy icon; the arrow after
   "Tra cứu" = shared class ic-arrow). The extra .ab-doc outranks base's outline-button rules (its padding, and its
   hover that drops the ledge) and the copy block's own small-button look */
.ab-doc .ab-doc__acts .dg-copy__btn,.ab-doc .ab-doc__look > .wp-block-button__link{min-height:var(--ctl-s);padding:0 var(--s-4);border:1px solid var(--rule);border-radius:var(--r);font:600 var(--t-s)/1 var(--font-body);box-shadow:var(--ab-doc-ledge)}
.ab-doc .ab-doc__acts .dg-copy__btn:hover,.ab-doc .ab-doc__look > .wp-block-button__link:hover{border-color:var(--ink-2);box-shadow:var(--ab-doc-ledge)}
.ab-doc .ab-doc__acts .dg-copy__btn svg{display:none}
.ab-doc .ab-doc__look > .wp-block-button__link{color:var(--accent)}
/* phone and email (bound buttons) read as plain underlined links: phone in the value style, email as the small line.
   The font sits on the button wrapper so the line box matches the text (no taller strut from the note's line height);
   .ab-doc outranks core's "body .is-layout-flex{display:flex}" on the buttons block */
.ab-doc .ab-doc__reach{display:grid;gap:var(--s-1);justify-items:start}
.ab-doc__reach .wp-block-button__link{display:inline-flex;align-items:center;min-height:var(--s-5);padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--accent);font:inherit;white-space:normal;text-decoration:underline;transform:none}
.ab-doc__reach .wp-block-button__link:hover,.ab-doc__reach .wp-block-button__link:active{box-shadow:none;transform:none}
.ab-doc__phone{font:600 var(--t-m)/1.35 var(--font-body)}
.ab-doc__mail{font-size:var(--t-xs)}
.ab-doc__hours{display:flex;flex-wrap:wrap;gap:0 var(--s-1)}

@media (max-width: 767px){
  .ab-doc__folder{min-height:0;gap:var(--gap-head);padding-top:var(--s-6)}
  .ab-doc__notes{display:grid;gap:var(--gap-grid);width:100%}
  .ab-doc__note,.ab-doc__note.is-in{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;transition:none}
}
@media (prefers-reduced-motion: reduce){
  .ab-doc__front,.ab-doc__btn::after,.ab-doc__note,.ab-doc__note.is-in{transition:none}
}