/* ICS arrows (site-wide, loaded by mu-plugins/ics-arrows.php).
   One token: --ics-arrow-opacity (rest). Chevrons, carets and select arrows: opacity or colour alpha only; colour and size unchanged.
   Hover / focus / open: --ics-arrow-opacity-active. Specificity: html body prefix beats older .5 rules. */
:root { --ics-arrow-opacity: .2; --ics-arrow-opacity-active: .35; }

/* Header menu: submenu carets (desktop) and mobile accordion arrows */
html body .brx-submenu-toggle button::after { opacity: var(--ics-arrow-opacity) !important; }
html body .brx-submenu-toggle svg.menu-item-icon { opacity: var(--ics-arrow-opacity) !important; }
html body .brx-submenu-toggle button:hover::after,
html body .brx-submenu-toggle button:focus-visible::after,
html body .brx-submenu-toggle button[aria-expanded="true"]::after { opacity: var(--ics-arrow-opacity-active) !important; }

/* Language switcher caret */
html body a.js-wpml-ls-item-toggle::after { opacity: var(--ics-arrow-opacity) !important; }
html body a.js-wpml-ls-item-toggle:hover::after,
html body a.js-wpml-ls-item-toggle:focus-visible::after { opacity: var(--ics-arrow-opacity-active) !important; }

/* FAQ / accordion chevrons */
html body .accordion-title-wrapper::after { opacity: var(--ics-arrow-opacity) !important; }
html body .accordion-title-wrapper:hover::after,
html body .brx-open > .accordion-title-wrapper::after { opacity: var(--ics-arrow-opacity-active) !important; }

/* Step cards chevron (/ho-tro/) */
html body #sup-cards .ics-step-card .ics-step-body::after { opacity: var(--ics-arrow-opacity) !important; }
html body #sup-cards .ics-step-card:hover .ics-step-body::after,
html body #sup-cards .ics-step-card[aria-expanded="true"] .ics-step-body::after { opacity: var(--ics-arrow-opacity-active) !important; }

/* Filter selects (library, news, events, documents): grey gradient arrow, alpha only */
html body .ics-fsel {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, rgba(128, 128, 128, var(--ics-arrow-opacity)) 0px), linear-gradient(135deg, rgba(128, 128, 128, var(--ics-arrow-opacity)) 50%, rgba(0, 0, 0, 0) 0px);
}

/* Form selects (contact, Đồng hành): SVG chevron stroke #302f29 at 20% */
html body #contact-form select,
html body #contact-card select,
html body #jn-native-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 5.5l6 6 6-6' fill='none' stroke='%23302f29' stroke-opacity='.2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ICS accordion title row (owner 2026-11-04): title and chevron stay on ONE row at every width.
   Title text takes the free width and wraps inside its own box; chevron keeps its size and sits at the right end.
   Colour, type and chevron opacity are unchanged (opacity stays on the --ics-arrow-opacity tokens above).
   Covers Bricks .accordion-title-wrapper (FAQ 2290 and any rebuilt items) and details.ics-sp-when > summary (/ho-tro/ steps). */
html body .accordion-title-wrapper,
html body details.ics-sp-when > summary {
  flex-wrap: nowrap !important;
  align-items: center;
  min-height: 44px;
}
html body .accordion-title-wrapper > :first-child,
html body details.ics-sp-when > summary > :first-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
}
html body .accordion-title-wrapper::after,
html body details.ics-sp-when > summary::after {
  flex: 0 0 auto !important;
  align-self: center;
  margin-left: var(--sp-s, 0.75rem);
}

/* v2 (2026-11-04, systemic #4): chevron and link hover states stuck after a tap on touch. Hover styles apply only with a fine hover pointer; where it cannot hover, the rest value is restored and open/expanded states keep the active value. The nav sub-menu link and the WPML toggle hover rules sit inline in Bricks header template 243 (not edited here); their touch reset is in this block. */
@media not all and (hover: hover) and (pointer: fine) {
  html body .brx-submenu-toggle button:hover::after,
  html body a.js-wpml-ls-item-toggle:hover::after,
  html body .accordion-title-wrapper:hover::after,
  html body #sup-cards .ics-step-card:hover .ics-step-body::after { opacity: var(--ics-arrow-opacity) !important; }
  html body .brx-submenu-toggle button[aria-expanded="true"]::after,
  html body .brx-open > .accordion-title-wrapper::after,
  html body #sup-cards .ics-step-card[aria-expanded="true"] .ics-step-body::after { opacity: var(--ics-arrow-opacity-active) !important; }
  #brxe-noa29x#brxe-noa29x .bricks-nav-menu .sub-menu li a:hover { background: transparent !important; text-decoration: none !important; }
  #brxe-noa29x#brxe-noa29x .bricks-nav-menu .sub-menu li a[aria-current="page"] { text-decoration: underline !important; }
  html body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover { background: transparent !important; }
}