/* Audio Buyback · Premium compact category directory · v1.3
   Namespaced so the original HTML, admin and premium footer remain unchanged. */
.abh-hub, .abh-hub * { box-sizing: border-box; }
.abh-hub {
  --abh-gold: #f4d18c;
  --abh-gold-soft: #c9a56d;
  --abh-ivory: #fff9ec;
  --abh-muted: #b9b5af;
  --abh-line: rgba(233, 202, 153, .18);
  isolation: isolate;
  scroll-margin-top: 90px; /* Prevent the existing sticky header from covering the section heading. */
  position: relative;
  overflow: hidden;
  width: 100%;
  color: var(--abh-ivory);
  background:
    radial-gradient(ellipse 820px 390px at 103% 3%, rgba(119, 29, 28, .22), transparent 68%),
    radial-gradient(ellipse 730px 370px at -8% 105%, rgba(170, 107, 43, .14), transparent 72%),
    linear-gradient(132deg, #100e0d 0%, #18100f 51%, #100d0d 100%);
  padding: 47px 0 43px;
  border-top: 1px solid #5a382a;
  border-bottom: 1px solid #6f4b32;
  font-family: 'Noto Sans Thai', Tahoma, 'Segoe UI', sans-serif;
  line-height: 1.48;
}
.abh-hub:before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .37;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 109px, rgba(255,255,255,.022) 110px),
    repeating-linear-gradient(0deg, transparent 0, transparent 109px, rgba(255,255,255,.016) 110px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}
.abh-hub:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0, #a56c3e 25%, #f7d99d 50%, #ba6938 75%, transparent 100%);
}
.abh-hub .abh-symbols {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
.abh-hub .abh-shell {width:min(1240px, calc(100% - 44px));margin-inline:auto;position:relative;z-index:1;}

/* Editorial header: strong and short, with a discreet service index. */
.abh-hub .abh-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(20px,4vw,55px);
  align-items:center;
  padding:0 0 21px;
}
.abh-hub .abh-header-copy {min-width:0;}
.abh-hub .abh-kicker {
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-bottom:12px;color:var(--abh-gold);font-size:10px;letter-spacing:2px;font-weight:800;
}
.abh-hub .abh-kicker-glyph {font-size:17px;line-height:1;letter-spacing:0;}
.abh-hub .abh-kicker-divider {height:1px;width:25px;background:linear-gradient(90deg,#d5b07d,transparent);}
.abh-hub h2#abh-title {
  margin:0 0 9px;
  color:var(--abh-ivory);
  font-size:clamp(26px,2.65vw,38px);
  line-height:1.32;
  letter-spacing:-.6px;
  font-weight:900;
  text-wrap:balance;
  text-align:left;
  text-shadow:none;
}
.abh-hub h2#abh-title span {color:var(--abh-gold);}
.abh-hub .abh-header-copy p {
  margin:0;
  max-width:730px;
  color:#cac3bd;
  font-size:clamp(13px,1.18vw,15px);
  line-height:1.8;
  font-weight:400;
  text-align:left;
}
.abh-hub .abh-summary-panel {
  background:linear-gradient(135deg,rgba(255,239,207,.08),rgba(121,70,41,.09));
  border:1px solid rgba(245,210,150,.20);
  padding:16px 18px 13px;
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.08),0 12px 30px rgba(0,0,0,.09);
}
.abh-hub .abh-summary-top {display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.65px;font-weight:900;color:var(--abh-gold-soft);}
.abh-hub .abh-summary-shine {font-size:17px;color:#e7bf82;letter-spacing:0;line-height:1;}
.abh-hub .abh-stat-pair {display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:19px;margin:11px 0 10px;}
.abh-hub .abh-stat-pair>div {display:flex;align-items:baseline;gap:9px;min-width:0;}
.abh-hub .abh-stat-pair strong {font:800 clamp(28px,2.7vw,37px)/1 'Segoe UI',Arial,sans-serif;letter-spacing:-1.8px;color:#f8e7c9;}
.abh-hub .abh-stat-pair div span {font-size:11px;line-height:1.3;color:#cec2b0;}
.abh-hub .abh-stat-divider {width:1px;height:28px;background:rgba(239,210,156,.21);}
.abh-hub .abh-summary-note {font-size:10px;color:#aaa49b;display:flex;gap:7px;align-items:center;white-space:nowrap;border-top:1px solid rgba(245,210,150,.10);padding-top:9px;}
.abh-hub .abh-status-dot {flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#9bcda1;box-shadow:0 0 0 3px rgba(139,212,150,.07);}

/* Tight section divider. */
.abh-hub .abh-directory-line {
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  margin:0 0 13px;
  border-top:1px solid var(--abh-line);
  padding-top:14px;
  font-size:12px;font-weight:800;color:#f1dfc4;
}
.abh-hub .abh-directory-line>span:first-child {display:flex;align-items:center;gap:10px;}
.abh-hub .abh-directory-line i {width:5px;height:17px;background:linear-gradient(#f5d99a,#ae763f);border-radius:2px;}
.abh-hub .abh-directory-line>span:last-child {font-size:10px;letter-spacing:1.8px;color:#af997d;font-weight:800;white-space:nowrap;}

/* Compact 3 x 2 collection cards. Native details keeps all SEO links in the DOM. */
.abh-hub .abh-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:13px;}
.abh-hub .abh-card {
  min-width:0;
  background:linear-gradient(142deg,rgba(69,48,43,.65),rgba(31,26,25,.96) 48%,rgba(26,23,23,.92));
  border:1px solid rgba(238,203,147,.20);
  border-radius:15px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 11px 28px rgba(0,0,0,.14);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  position:relative;
}
.abh-hub .abh-card:before {content:'';pointer-events:none;position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(224,155,92,.76),rgba(246,209,145,.18) 64%,transparent);}
.abh-hub .abh-card:nth-child(3n+2) {background:linear-gradient(142deg,rgba(75,41,39,.62),rgba(31,24,25,.96) 48%,rgba(24,22,23,.93));}
.abh-hub .abh-card:nth-child(3n) {background:linear-gradient(142deg,rgba(53,45,39,.72),rgba(28,26,25,.96) 48%,rgba(22,21,20,.95));}
@media(hover:hover) {
  .abh-hub .abh-card:hover {transform:translateY(-2px);border-color:rgba(248,209,142,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 36px rgba(0,0,0,.24);}
}
.abh-hub .abh-card[open] {grid-column:1/-1;border-color:rgba(244,199,122,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 45px rgba(0,0,0,.23);}
.abh-hub .abh-card summary {
  display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none;
  padding:14px 17px 14px;
  min-height:157px;
  color:#fff;
  user-select:none;
  outline:none;
  text-align:left;
}
.abh-hub .abh-card summary::-webkit-details-marker {display:none;}
.abh-hub .abh-card summary::marker {content:'';}
.abh-hub .abh-card summary:focus-visible {outline:2px solid #f8d99d;outline-offset:-4px;border-radius:14px;}
.abh-hub .abh-card-top {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin-bottom:7px;}
.abh-hub .abh-card-index {font:800 10px/1.2 'Segoe UI',Arial,sans-serif;letter-spacing:1.45px;color:#c6a780;}
.abh-hub .abh-card-index b {font-size:12px;color:#f5daa5;}
.abh-hub .abh-card-index i {font-style:normal;color:#7d6e64;}
.abh-hub .abh-card-icon {width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--abh-gold);background:linear-gradient(150deg,rgba(251,208,135,.11),rgba(241,171,99,.025));border:1px solid rgba(236,196,139,.18);}
.abh-hub svg {fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.abh-hub .abh-card-icon svg {width:18px;height:18px;}
.abh-hub .abh-card-title {display:block;color:#fff8eb;font-size:clamp(15px,1.3vw,18px);line-height:1.4;letter-spacing:-.17px;font-weight:800;min-height:25px;}
.abh-hub .abh-card-description {display:block;color:#bbb0a3;font-size:11px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;line-height:1.5;}
.abh-hub .abh-card-bottom {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;}
.abh-hub .abh-link-count {font-size:11px;color:#d6bc98;}
.abh-hub .abh-link-count b {color:#fce0a6;font:700 14px/1 'Segoe UI',Arial,sans-serif;margin-right:3px;}
.abh-hub .abh-expander {width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(244,210,151,.55);border-radius:50%;background:rgba(229,181,106,.10);color:var(--abh-gold);transition:background .2s ease,transform .2s ease,color .2s ease;}
.abh-hub .abh-expander svg {width:15px;height:15px;stroke-width:2;transition:transform .2s ease;}
.abh-hub .abh-card[open] .abh-expander {background:var(--abh-gold);color:#1d1613;transform:rotate(45deg);}
.abh-hub .abh-card[open] summary {min-height:126px;padding-bottom:11px;}
.abh-hub .abh-card[open] .abh-card-description {white-space:normal;}
.abh-hub .abh-card-drawer {padding:0 16px 16px;animation:abh-rise .2s ease-out;}
.abh-hub .abh-drawer-head {display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(240,205,149,.19);margin-bottom:10px;padding-top:14px;font-size:13px;color:#f0d5ab;font-weight:800;}
.abh-hub .abh-drawer-head small {font-size:11px;font-weight:500;color:#9f9184;white-space:nowrap;}
.abh-hub .abh-link-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
.abh-hub .abh-link-grid a {
  min-width:0;display:flex;align-items:center;gap:8px;text-decoration:none;
  padding:10px 11px;
  border:1px solid rgba(246,213,171,.13);
  background:rgba(5,5,5,.28);
  border-radius:9px;
  color:#e9e0d4;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.abh-hub .abh-link-grid a:before {content:'↗';font:700 12px/1 Arial,sans-serif;flex:0 0 auto;color:#d8b681;}
.abh-hub .abh-link-grid a:hover, .abh-hub .abh-link-grid a:focus-visible {background:rgba(230,189,114,.17);color:#fff;border-color:rgba(246,204,143,.56);outline:none;}
@keyframes abh-rise {from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Compressed, useful CTA to finish the section rather than leaving empty space. */
.abh-hub .abh-contact-strip {
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(242,207,146,.2);
  border-radius:13px;
  margin-top:14px;
  padding:11px 12px 11px 16px;
  background:linear-gradient(90deg,rgba(173,117,60,.13),rgba(255,255,255,.035) 52%,rgba(111,56,43,.13));
}
.abh-hub .abh-contact-mark {flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#f6d197;background:rgba(244,198,125,.12);border:1px solid rgba(244,198,125,.22);}
.abh-hub .abh-contact-mark svg {width:20px;height:20px;}
.abh-hub .abh-contact-copy {display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.abh-hub .abh-contact-copy b {color:#fff2dc;font-size:13px;font-weight:800;line-height:1.5;}
.abh-hub .abh-contact-copy>span {color:#bcb2a5;font-size:11px;}
.abh-hub .abh-contact-actions {display:flex;align-items:center;gap:9px;flex-shrink:0;}
.abh-hub .abh-contact-actions a {text-decoration:none;font-weight:800;white-space:nowrap;}
.abh-hub .abh-contact-phone {color:#ead2aa;font-size:12px;padding:8px;}
.abh-hub .abh-contact-phone:hover {color:#fff;}
.abh-hub .abh-contact-line {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:39px;background:linear-gradient(135deg,#f5dda9,#dcae6c);color:#24170f;border-radius:8px;font-size:12px;padding:0 15px;box-shadow:0 4px 13px rgba(0,0,0,.15);border:1px solid #f8ddb3;transition:filter .18s ease,transform .18s ease;}
.abh-hub .abh-contact-line svg {width:15px;height:15px;stroke-width:2;}
.abh-hub .abh-contact-line:hover {filter:brightness(1.09);transform:translateY(-1px);}
.abh-hub .abh-contact-actions a:focus-visible {outline:2px solid #fff;outline-offset:3px;}

@media(max-width:1020px) {
  .abh-hub .abh-header {grid-template-columns:minmax(0,1fr) 215px;gap:18px;}
  .abh-hub .abh-summary-panel {padding:13px;}
  .abh-hub .abh-stat-pair {gap:10px;}
  .abh-hub .abh-stat-pair>div {gap:5px;}
  .abh-hub .abh-stat-pair strong {font-size:29px;}
  .abh-hub .abh-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .abh-hub .abh-link-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:720px) {
  .abh-hub {padding:33px 0 32px;}
  .abh-hub .abh-shell {width:calc(100% - 30px);}
  .abh-hub .abh-header {grid-template-columns:1fr;gap:17px;padding-bottom:20px;}
  .abh-hub .abh-kicker {gap:7px;letter-spacing:1.15px;font-size:9px;margin-bottom:9px;}
  .abh-hub .abh-kicker-divider {width:13px;}
  .abh-hub h2#abh-title {font-size:clamp(23px,4.6vw,31px);margin-bottom:7px;}
  .abh-hub .abh-header-copy p {font-size:12px;line-height:1.7;}
  .abh-hub .abh-summary-panel {display:flex;align-items:center;gap:17px;padding:10px 13px;}
  .abh-hub .abh-summary-top {font-size:9px;letter-spacing:1px;flex:1;min-width:0;}
  .abh-hub .abh-summary-shine,.abh-hub .abh-summary-note {display:none;}
  .abh-hub .abh-stat-pair {gap:14px;flex:0 0 auto;margin:0;}
  .abh-hub .abh-stat-pair>div {display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
  .abh-hub .abh-stat-pair strong {font-size:23px;}
  .abh-hub .abh-stat-pair div span {font-size:9px;}
  .abh-hub .abh-stat-divider {height:29px;}
  .abh-hub .abh-directory-line {margin-bottom:12px;padding-top:12px;font-size:11px;}
  .abh-hub .abh-directory-line>span:last-child {font-size:9px;letter-spacing:1px;}
  .abh-hub .abh-grid {grid-template-columns:1fr;gap:9px;}
  .abh-hub .abh-card summary {min-height:94px;padding:13px 14px 12px 56px;}
  .abh-hub .abh-card-top {position:absolute;inset:13px auto auto 12px;margin:0;}
  .abh-hub .abh-card-index {display:none;}
  .abh-hub .abh-card-icon {width:32px;height:32px;}
  .abh-hub .abh-card-title {font-size:15px;line-height:1.45;min-height:0;}
  .abh-hub .abh-card-description {font-size:10px;margin-top:3px;}
  .abh-hub .abh-card-bottom {padding-top:6px;}
  .abh-hub .abh-link-count {font-size:10px;}
  .abh-hub .abh-link-count b {font-size:12px;}
  .abh-hub .abh-expander {width:22px;height:22px;}
  .abh-hub .abh-card[open] summary {min-height:94px;padding-bottom:12px;}
  .abh-hub .abh-link-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .abh-hub .abh-contact-strip {flex-wrap:wrap;gap:9px;padding:12px;margin-top:11px;}
  .abh-hub .abh-contact-mark {width:31px;height:31px;flex-basis:31px;}
  .abh-hub .abh-contact-copy b {font-size:12px;}
  .abh-hub .abh-contact-copy>span {font-size:10px;}
  .abh-hub .abh-contact-actions {width:100%;margin-top:2px;}
  .abh-hub .abh-contact-actions a {flex:1;text-align:center;}
  .abh-hub .abh-contact-phone {font-size:11px;}
  .abh-hub .abh-contact-line {min-height:36px;font-size:11px;}
}
@media(max-width:370px) {
  .abh-hub .abh-shell {width:calc(100% - 22px);}
  .abh-hub .abh-kicker {letter-spacing:.6px;}
  .abh-hub .abh-summary-panel {gap:7px;}
  .abh-hub .abh-summary-top {font-size:8px;}
  .abh-hub .abh-stat-pair {gap:8px;}
  .abh-hub .abh-stat-pair strong {font-size:21px;}
  .abh-hub .abh-directory-line>span:last-child {display:none;}
  .abh-hub .abh-link-grid {grid-template-columns:1fr;}
  .abh-hub .abh-contact-actions {gap:4px;}
  .abh-hub .abh-contact-phone {padding:6px 3px;}
  .abh-hub .abh-contact-line {padding:0 9px;gap:6px;}
}
@media(prefers-reduced-motion:reduce) {
  .abh-hub .abh-card,.abh-hub .abh-expander,.abh-hub .abh-expander svg,.abh-hub .abh-contact-line,.abh-hub .abh-link-grid a {transition:none!important;animation:none!important;}
}
/* At modern phone widths, two carefully proportioned tiles create a fuller,
   shorter directory without squeezing the links when a category opens. */
@media(min-width:380px) and (max-width:720px) {
  .abh-hub .abh-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .abh-hub .abh-card summary {min-height:148px;padding:12px;}
  .abh-hub .abh-card-top {position:static;inset:auto;justify-content:space-between;min-height:27px;margin-bottom:11px;}
  .abh-hub .abh-card-index {display:inline;font-size:8px;letter-spacing:.8px;}
  .abh-hub .abh-card-index b {font-size:10px;}
  .abh-hub .abh-card-index i {display:none;}
  .abh-hub .abh-card-icon {width:29px;height:29px;}
  .abh-hub .abh-card-icon svg {width:16px;height:16px;}
  .abh-hub .abh-card-title {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;line-height:1.4;min-height:40px;}
  .abh-hub .abh-card-description {display:none;}
  .abh-hub .abh-card-bottom {padding-top:12px;}
  .abh-hub .abh-card[open] summary {min-height:148px;padding-bottom:12px;}
}
