fix(ui) : improve control visibility while preserving header styling

components/public/condition-switcher.tsx

@@ -35,7 +35,7 @@ export function ConditionSwitcher({
           {items.map((_, index) => (
             <Fragment key={index}>
               {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-7" /> : null}
-              <TabsTrigger value={String(index)} className="outline-primary m-2 max-sm:min-h-11">
+              <TabsTrigger value={String(index)} className="max-sm:min-h-11">
                 <ConditionTabIcon iconUrl={iconUrls?.[index]} />
                 <span className="font-medium text-lg">{labels?.[index] || `เงื่อนไข ${index + 1}`}</span>
               </TabsTrigger>

components/public/guide-page-shell.tsx

@@ -86,10 +86,10 @@ export function GuidePageShell({
               href={baseHref}
               aria-current={!section ? "page" : undefined}
               className={cn(
-                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md border px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 !section
-                  ? "bg-primary/15 font-semibold text-primary"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  ? "border-primary bg-primary/15 font-semibold text-primary"
+                  : "border-control-border bg-control text-foreground hover:border-control-border-hover hover:bg-control-hover",
               )}
               prefetch={false}
             >
@@ -108,10 +108,10 @@ export function GuidePageShell({
                 href={`${baseHref}/${item.slug}`}
                 aria-current={section === item.slug ? "page" : undefined}
                 className={cn(
-                  "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md border px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                   section === item.slug
-                    ? "bg-primary/15 font-semibold text-primary"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    ? "border-primary bg-primary/15 font-semibold text-primary"
+                    : "border-control-border bg-control text-foreground hover:border-control-border-hover hover:bg-control-hover",
                 )}
                 prefetch={false}
               >

components/public/public-navigation.tsx

@@ -30,7 +30,7 @@ export function PublicNavigation() {
   return <>
     <nav aria-label="เมนูหลัก" className="hidden items-center gap-1 lg:flex">
       {destinations.slice(1).map(({ href, label, icon }) =>
-        <Link key={href} href={href} aria-current={isCurrent(href) ? "page" : undefined}
+        <Link key={href} href={href} data-slot="button" data-variant="ghost" aria-current={isCurrent(href) ? "page" : undefined}
           className={buttonVariants({ variant: "ghost", size: "sm" })}>
           {icon ? <Image src={icon} alt="" width={24} height={24} className="size-6 object-contain" /> : <ChartNoAxesCombinedIcon data-icon="inline-start" aria-hidden="true" />}{label}
         </Link>)}
@@ -47,7 +47,7 @@ export function PublicNavigation() {
           </DrawerHeader>
           <nav aria-label="เมนูหลักบนมือถือ" className="grid gap-1 p-4">
             {destinations.map(({ href, label, icon }) =>
-              <DrawerClose key={href} render={<Link href={href} aria-current={isCurrent(href) ? "page" : undefined}
+              <DrawerClose key={href} nativeButton={false} render={<Link href={href} aria-current={isCurrent(href) ? "page" : undefined}
                 className="flex min-h-11 items-center gap-3 rounded-lg px-3 text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />}>
                 {icon ? <Image src={icon} alt="" width={20} height={20} className="size-5 object-contain" /> : href === "/analytics" ? <ChartNoAxesCombinedIcon aria-hidden="true" /> : <BookOpenIcon aria-hidden="true" />}{label}
                 {isCurrent(href) ? <span className="ml-auto text-xs text-primary">ปัจจุบัน</span> : null}

components/public/structured-directory.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import {
   ArrowDownAZIcon,
+  ArrowRightIcon,
   ArrowUpZAIcon,
   Clock3Icon,
   SearchIcon,
@@ -251,7 +252,10 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
                 </div>
                 <CardHeader className="min-w-0 flex-1 p-3 sm:p-4 sm:pt-5">
                   <div className="min-w-0 space-y-1">
-                    <CardTitle className="line-clamp-1">{guide.name}</CardTitle>
+                    <CardTitle className="flex min-w-0 items-center gap-2">
+                      <span className="truncate">{guide.name}</span>
+                      <ArrowRightIcon aria-hidden="true" className="size-4 shrink-0 text-primary" />
+                    </CardTitle>
                     <CardDescription className="line-clamp-2 sm:line-clamp-3">
                       {guide.overview}
                     </CardDescription>
@@ -305,7 +309,7 @@ function GuideToggleFilter({
     <div className={showLabels ? "flex flex-col gap-2" : "shrink-0 border-l pl-2"}>
       <ToggleGroup aria-label={label} variant="outline" size="sm" multiple value={value} onValueChange={onChange} className={showLabels ? "flex flex-wrap justify-start" : undefined}>
         {options.map((option) => (
-          <ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="max-sm:min-h-11 aria-pressed:border-primary aria-pressed:bg-transparent aria-pressed:text-primary">
+          <ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="max-sm:min-h-11">
             {optionIcon?.(option)}{showLabels ? optionLabels[option] ?? option : optionText?.(option)}
           </ToggleGroupItem>
         ))}