/* ============================================================================
   lw-choice.css — component Ô CHỌN dùng chung: RADIO và CHECKBOX

   Nạp toàn cục ở layout/basic/header.blade.php và layout/admin/header.blade.php
   nên màn dùng KHÔNG phải import gì thêm. Viết tay theo hợp đồng markup dưới đây,
   hoặc dùng Blade component resources/views/components/choice.blade.php +
   components/choice-group.blade.php.

   Tách ra từ 3 màn /basic/tag (public/css/tag/tag-redesign.css: .lwt-check,
   .lwt-check-row, .lwt-radio-row) vì cùng một cái ô chọn đó màn nào cũng cần.
   Bà con gần: css/components/lw-picker.css — ô chọn NẰM TRONG danh sách 2 cột
   (mỗi dòng là một thẻ bo góc). File này là ô chọn ĐỨNG RIÊNG: trong ô bảng,
   trong form, trong một cụm vài lựa chọn.

   HỢP ĐỒNG MARKUP
   ---------------
   1) Ô chọn trần (ô đầu bảng, cột chọn hàng…) — chỉ cần đúng 1 class:

        <input type="checkbox" class="lw-choice" aria-label="すべて選択">

   2) Một dòng chọn có nhãn: LABEL bọc cả dòng để bấm vào chữ cũng tích được:

        <label class="lw-choice-row">
            <input type="radio" class="lw-choice" name="set_up_time" value="0">
            <span class="lw-choice-row__text">最初から</span>
        </label>

   3) Cụm nhiều lựa chọn — xếp dọc (mặc định) hoặc nằm ngang:

        <div class="lw-choice-group">…</div>              <!-- dọc -->
        <div class="lw-choice-group lw-choice-group--inline">…</div>   <!-- ngang -->

   4) Kiểu THẺ (mỗi dòng một ô bo góc có viền, dòng đang tích tô nền) — thêm
      lw-choice-row--card vào dòng. Dùng khi danh sách đứng riêng thành một khối.

   5) Kiểu VIÊN THUỐC (lw-choice-row--pill): cũng là thẻ có viền + tô nền khi tích, nhưng
      CO THEO CHỮ và nằm ngang cạnh nhau. Dùng cho cụm 2-3 lựa chọn ngắn (任意 / 必須,
      単日イベント / 期間イベント) — bày thành danh sách dọc chiếm cả bề ngang thì thừa.

   RADIO hay CHECKBOX chỉ khác đúng type của <input>, markup y hệt: CSS đỡ cả hai
   (radio bo tròn + chấm giữa, checkbox bo 5px + dấu tích).

   Núm chỉnh (đặt trên phần tử cha bất kỳ, KHÔNG sửa file này):
       --lw-choice-size : bề ngang/cao ô chọn (mặc định: checkbox 18px, radio 12px)
       --lw-choice-gap  : khoảng hở ô chọn ↔ chữ, cũng là hở giữa các dòng (8px)

   Màu lấy từ token --lw-* của lw-theme.css, luôn kèm giá trị dự phòng.
   Mọi class đều mang tiền tố lw-choice nên không đụng Bootstrap 3 / style.css.
   ========================================================================= */

/* ------------------------------------------------------------- chính cái ô */
/* Vẽ lại hoàn toàn (appearance:none) vì ô gốc của hệ điều hành to nhỏ mỗi máy một kiểu
   và accent-color chỉ đổi được mỗi màu nền. Dấu bên trong vẽ bằng background-image —
   không dùng :after để chạy được cả ở trình duyệt không cho pseudo trên <input>. */
.lw-choice {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    display: inline-block;
    width: var(--lw-choice-size, 18px);
    height: var(--lw-choice-size, 18px);
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--lw-border-strong, #D3DBD7);
    border-radius: 50%;
    background-color: var(--lw-surface, #FFFFFF);
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    /* phòng hờ: trình duyệt nào không nhận appearance:none thì ô mặc định vẫn ra màu app
       thay vì xanh dương hệ thống */
    accent-color: var(--lw-accent, #06C755);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

/* Bo góc theo TỈ LỆ chứ không phải số cứng: 5px trên ô 18px trông là hình vuông bo góc,
   nhưng vẫn 5px trên ô 12px thì gần thành hình tròn, lẫn với radio. .28 giữ đúng tỉ lệ cũ
   (18px ⇒ 5px, 12px ⇒ 3.4px). */
.lw-choice[type="checkbox"] { border-radius: calc(var(--lw-choice-size, 18px) * .28); }

/* Radio nhỏ hơn checkbox: 12px so với 18px. Hai thứ này khác nhau về vai trò — checkbox
   hay đứng thành cột chọn hàng trong bảng nên cần vùng bấm to, còn radio gần như luôn nằm
   trong <label> cả dòng (bấm đâu cũng tích được) nên ô nhỏ gọn hơn cho đỡ nặng mặt.
   Màn nào đặt --lw-choice-size thì CẢ HAI theo con số đó (reply/booking đang để 16px). */
.lw-choice[type="radio"] {
    width: var(--lw-choice-size, 12px);
    height: var(--lw-choice-size, 12px);
}

.lw-choice:hover { border-color: var(--lw-accent, #06C755); }

.lw-choice:checked {
    border-color: var(--lw-accent, #06C755);
    background-color: var(--lw-accent, #06C755);
}

/* RADIO đang chọn = VÀNH accent + CHẤM accent giữa, nền vẫn trắng — không phải đĩa đặc.
   Chốt theo thẻ .lwz-radio__card::before của màn ウェビナー設定 (zoom-admin.css:994) mà
   người dùng lấy làm chuẩn; đây cũng là kiểu radio quen thuộc nên đỡ bị nhầm với checkbox.
   Chấm vẽ bằng radial-gradient chứ không phải ảnh hay ::after: gradient lấy tâm theo chính
   ô nên luôn đúng giữa (không lệch nửa pixel như background-position:center), và <input>
   thì không phải trình duyệt nào cũng cho gắn pseudo-element.
   Bán kính tính theo --lw-choice-size để đổi cỡ ô là chấm tự đổi theo: .26 ⇒ chấm chiếm
   52% bề ngang ô (ô 12px ⇒ chấm 6.2px, vành trắng còn ~1.4px).
   `[type="radio"]` cho độ ưu tiên (0,3,0), thắng background-color của `.lw-choice:checked`
   (0,2,0) ở trên — checkbox vẫn giữ nền đặc + dấu tích trắng. */
.lw-choice[type="radio"]:checked {
    background-color: var(--lw-surface, #FFFFFF);
    background-image: radial-gradient(circle at 50% 50%,
        var(--lw-accent, #06C755) 0 calc(var(--lw-choice-size, 12px) * .26),
        transparent calc(var(--lw-choice-size, 12px) * .27));
}

.lw-choice[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 67% 67%;
}

/* Bootstrap 3 (chat_files/bootstrap.min.css) đặt
   `input[type=radio]:focus,input[type=checkbox]:focus{outline:5px auto -webkit-focus-ring-color}`
   ⇒ bấm chọn xong ô nào cũng đeo một vòng vuông ĐEN. Selector đó là (0,2,1), nên phải
   viết `input.lw-choice:focus` (cũng 0,2,1) — file này nạp SAU nên hoà specificity thì
   thắng. Viết `.lw-choice:focus` (0,2,0) là thua, khỏi cần tới !important. */
input.lw-choice:focus { outline: 0; }

input.lw-choice:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(6, 199, 85, .18);
}

.lw-choice:disabled {
    border-color: var(--lw-border, #E4EAE7);
    background-color: var(--lw-surface-2, #F7FAF8);
    cursor: not-allowed;
}

.lw-choice:disabled:checked {
    border-color: var(--lw-border-strong, #D3DBD7);
    background-color: var(--lw-border-strong, #D3DBD7);
}

/* Radio bị khoá mà đang chọn: giữ đúng kiểu vành + chấm, chỉ đổi sang màu xám. */
.lw-choice[type="radio"]:disabled:checked {
    background-color: var(--lw-surface-2, #F7FAF8);
    background-image: radial-gradient(circle at 50% 50%,
        var(--lw-border-strong, #D3DBD7) 0 calc(var(--lw-choice-size, 12px) * .26),
        transparent calc(var(--lw-choice-size, 12px) * .27));
}

/* --------------------------------------------------------------- một dòng */
/* .lw-choice-row là <label> nên bấm vào chữ cũng tích được ô.
   align-items:flex-start để nhãn dài xuống 2 dòng thì ô chọn vẫn nằm ngang dòng chữ
   ĐẦU TIÊN chứ không trôi ra giữa khối. */
.lw-choice-row {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--lw-choice-gap, 8px);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    /* Đệm đi qua biến để rule gỡ .checkbox-inline/.radio-inline ở dưới lấy lại đúng số đo
       của từng kiểu dòng mà không phải chép cứng con số.
       --lw-choice-optical: BÙ LỆCH QUANG HỌC của chữ Nhật. Hộp dòng canh chữ theo
       ascent/descent của font (đo được 14px/1px ở cỡ 13px), còn NÉT chữ CJK chỉ chiếm
       11px trên / 2px dưới đường chân — nên nét chữ nằm thấp hơn tâm hộp dòng
       ((14−1)/2 − (11−2)/2) = 2px. Ô chọn canh theo HỘP nên trông cao hơn chữ đúng 2px.
       Đệm trên bớt 2px / đệm dưới thêm 2px ⇒ kéo nguyên dòng chữ lên cho nét chữ về đúng
       tâm; ô chọn được đẩy xuống lại bằng `top` ở dưới. Dòng thường để 0 (không đổi). */
    --lw-choice-pad-y: 2px;
    --lw-choice-pad-x: 0px;
    --lw-choice-optical: 0px;
    --lw-choice-padding:
        calc(var(--lw-choice-pad-y) - var(--lw-choice-optical))
        var(--lw-choice-pad-x)
        calc(var(--lw-choice-pad-y) + var(--lw-choice-optical));
    padding: var(--lw-choice-padding);
    color: var(--lw-ink, #14211C);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    cursor: pointer;
    /* style.css đặt label{position:relative}: để nguyên thì mọi thứ position:absolute
       của trang bên trong nhãn sẽ neo nhầm vào đây. */
    position: static;
}

/* style.css có label:after{content:"";font-family:FontAwesome} ⇒ nhãn nào cũng mọc thêm
   một dấu mũi tên ma ở góc phải, phải gỡ. */
.lw-choice-row:after { content: none; display: none; }

/* Markup cũ hay còn class .checkbox-inline / .radio-inline của Bootstrap 3. Bootstrap dựng
   ô chọn theo kiểu "nhấc ra khỏi dòng":
     .checkbox-inline input[type=checkbox], .radio-inline input[type=radio]
       { position:absolute; margin-left:-20px }
     .checkbox-inline, .radio-inline { padding-left:20px }
     .radio-inline + .radio-inline { margin-left:10px }
   Trong một dòng flex thì ô chọn bị bốc khỏi dòng và dịch TRÁI 20px — lòi hẳn ra ngoài khung
   bao (thấy rõ ở màn イベント予約: ô tích nằm đè lên viền hộp), còn 2 lựa chọn cạnh nhau thì
   hở gấp đôi vì cộng thêm margin của Bootstrap vào gap của cụm.
   Selector của Bootstrap là (0,2,1) nên phải viết `input.lw-choice` cho đủ hạng; file này nạp
   sau nên hoà hạng là thắng. */
.lw-choice-row input.lw-choice {
    position: static;
    margin-left: 0;
    margin-top: 1px;
}

/* Ô chọn của dòng canh giữa: bỏ nhích 1px của dòng thường, rồi đẩy xuống đúng bằng phần
   đã kéo dòng chữ lên (xem --lw-choice-optical) để ô chọn ngang tầm NÉT chữ. Dùng `top`
   chứ không dùng margin: margin làm ô chọn cao thêm 2×2px, checkbox 18px sẽ đội cao viên
   thuốc từ 34px lên 36px. `position: relative` cũng gỡ luôn position:absolute của
   Bootstrap cho .radio-inline/.checkbox-inline. */
.lw-choice-row--card input.lw-choice,
.lw-choice-row--pill input.lw-choice {
    margin-top: 0;
    position: relative;
    top: var(--lw-choice-optical);
}

/* Bootstrap 3 đệm cho .checkbox-inline/.radio-inline hai hướng, cả hai đều phải gỡ:
     .checkbox-inline, .radio-inline                        { padding-left: 20px }   (0,1,0)
     .form-horizontal .checkbox-inline, … .radio-inline     { padding-top: 7px }     (0,2,0)
   Cái thứ hai thắng .lw-choice-row--pill (0,1,0) ⇒ viên thuốc trong <form class="form-horizontal">
   thành 7px trên / 6px dưới: cao 34.5px thay vì 34px và ruột tụt xuống nửa pixel (thấy ở
   イベント予約). Một rule (0,2,0) là đủ đè cả hai — file này nạp sau Bootstrap nên hoà hạng
   là thắng. Số đo lấy lại qua --lw-choice-pad-*, khỏi chép cứng. */
.lw-choice-row.checkbox-inline,
.lw-choice-row.radio-inline { padding: var(--lw-choice-padding); }

/* Redmine #40748 — style.css:  `input[type="checkbox"], input[type="radio"] { margin-right: 10px }`
   (0,1,1) THẮNG `.lw-choice { margin: 0 }` (0,1,0) ⇒ mọi ô chọn bị đẩy xa nhãn thêm 10px,
   thấy rõ ở cụm viên thuốc 任意/必須 của màn イベント予約 (chữ như bị dạt sang phải).
   Khoảng hở ô chọn ↔ chữ phải do --lw-choice-gap quyết, nên khoá margin bằng selector
   cùng hạng attribute (0,2,1). */
input.lw-choice[type="checkbox"],
input.lw-choice[type="radio"] { margin: 0; }

/* khoảng hở giữa các lựa chọn do .lw-choice-group quyết (gap), không cộng thêm margin cũ */
.lw-choice-group .lw-choice-row + .lw-choice-row { margin-left: 0; margin-top: 0; }

/* Ô chọn thấp hơn dòng chữ (~19.5px = 13px × 1.5) ⇒ đẩy xuống cho ngang tầm chữ dòng đầu:
   checkbox 18px lệch 1px, radio 12px lệch (19.5-12)/2 ≈ 4px.
   CHỈ áp cho dòng THƯỜNG (align-items:flex-start). Dòng kiểu thẻ/viên thuốc canh giữa
   (align-items:center) nên cộng thêm 4px là ô chọn tụt xuống 2px so với chữ — thấy rõ ở
   イベント予約 (メールアドレス / 電話番号 / 利用規約文章 / ご連絡事項).
   Phải loại trừ NGAY TẠI ĐÂY chứ không đè lại ở dưới: `.lw-choice-row input.lw-choice
   [type="radio"]` là (0,3,1), muốn đè thì rule của --card/--pill phải leo lên (0,3,1),
   mà leo thế là đè luôn số đo riêng của từng màn — .lwz-radio.lw-choice-row--card
   (zoom-admin.css:938, 2px) và .lwbe-slot-choice (booking-redesign.css:1087, 4px) đều
   chỉ (0,3,0). Loại trừ ngay tại đây thì --card/--pill rơi về đúng rule của chúng ở dưới
   và số đo riêng của màn vẫn thắng.
   Dùng :not(:where(...)) chứ không phải :not(...): :where() KHÔNG cộng hạng, nên ba
   selector dưới giữ nguyên hạng cũ (0,2,0) / (0,2,1) / (0,3,1). Viết :not() trần là mỗi
   cái cộng thêm (0,2,0) ⇒ leo lên (0,4,0)/(0,5,1) và đè mất .lwbe-check-line
   (booking-redesign.css:741, (0,3,0)) vốn đang thắng. */
.lw-choice-row:not(:where(.lw-choice-row--card, .lw-choice-row--pill)) > .lw-choice { margin-top: 1px; }
.lw-choice-row:not(:where(.lw-choice-row--card, .lw-choice-row--pill)) > .lw-choice[type="radio"],
.lw-choice-row:not(:where(.lw-choice-row--card, .lw-choice-row--pill)) input.lw-choice[type="radio"] { margin-top: 4px; }

.lw-choice-row__text {
    min-width: 0;
    font-weight: inherit;
}

.lw-choice-row.is-disabled,
.lw-choice-row:has(.lw-choice:disabled) {
    color: var(--lw-faint, #8F9C97);
    cursor: not-allowed;
}

/* --------------------------------------------------------- kiểu thẻ bo góc */
.lw-choice-row--card,
.lw-choice-row--pill {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    --lw-choice-pad-y: 9px;
    --lw-choice-pad-x: 11px;
    --lw-choice-optical: 2px;
    border: 1px solid var(--lw-border, #E4EAE7);
    border-radius: 8px;
    background: var(--lw-surface, #FFFFFF);
}

.lw-choice-row--card:hover,
.lw-choice-row--pill:hover {
    background: var(--lw-row-hover, #F4FAF6);
    border-color: var(--lw-border-strong, #D3DBD7);
}

.lw-choice-row--card > .lw-choice,
.lw-choice-row--pill > .lw-choice { margin-top: 0; }

/* Viên thuốc: cùng bộ mặt với --card nhưng co theo chữ, xếp ngang trong
   .lw-choice-group--inline. Số đo lấy theo .choice-pill của thư viện mockup. */
.lw-choice-row--pill {
    display: inline-flex;
    width: auto;
    min-height: 34px;
    --lw-choice-pad-y: 6px;
    --lw-choice-pad-x: 10px;
    gap: 7px;
}

/* Dòng đang tích. :has() không có ở trình duyệt quá cũ — lúc đó chỉ mất phần tô nền,
   ô radio/checkbox vẫn hiện đúng trạng thái nên không vỡ gì; màn nào cần chắc ăn thì
   tự gán thêm class .is-selected bằng JS/Vue. */
.lw-choice-row--card:has(.lw-choice:checked),
.lw-choice-row--pill:has(.lw-choice:checked),
.lw-choice-row--card.is-selected,
.lw-choice-row--pill.is-selected {
    /* !important vì bs_style.css:719 có rule TRẦN `.active{background:#ddd!important}`
       áp cho cả app; dòng đang chọn của nhiều màn cũ mang đúng class `active`. */
    background: var(--lw-accent-weak, #E4F7EC) !important;
    border-color: var(--lw-accent-line, #BCE8CD);
    color: var(--lw-accent, #06C755);
}

/* ------------------------------------------------------------------ cụm */
.lw-choice-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lw-choice-gap, 8px);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lw-choice-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* dòng kiểu thẻ thì phải chiếm trọn bề ngang cụm, không co theo chữ (viên thuốc thì ngược
   lại: co theo chữ, nên KHÔNG stretch) */
.lw-choice-group > .lw-choice-row--card { align-self: stretch; }

/* nhiều màn cũ bọc từng dòng trong <li> — gỡ trang trí mặc định của danh sách */
.lw-choice-group li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Ô nhập đi kèm một lựa chọn (vd radio "途中から始める" + ô số ngày): cho nằm cùng hàng
   với nhãn và cao bằng dòng, khỏi mỗi màn tự chế lại. */
.lw-choice-group input[type="text"],
.lw-choice-group input[type="number"] {
    width: 90px;
    min-height: 34px;
    height: auto;
}