/* ==========================================================================
   feature-tip.css — tooltip "?" cạnh TỪNG DÒNG tính năng trên thẻ giá.
   Task v1.1.2-002. Nạp qua $extraStyles ở index.php + page/pricing.php.

   🔴 File này KHÔNG định nghĩa một họ tooltip mới.

   Component gốc là `.page-header-info` / `.info-icon-btn` /
   `.page-header-info-panel` — UI_COMPONENT_LIBRARY.md §2.20, CSS thật ở
   css/style.css:6631-6712 (task 108, mở rộng ở task 144). §2.20 nói thẳng:
   "đây là ví dụ tham chiếu cho lần sửa kế tiếp: ĐỪNG BỊA TOOLTIP — tái dùng
   component này và chọn cấp gắn theo việc chữ giải thích cho MỘT TRANG hay
   bổ nghĩa cho MỘT con số cụ thể."

   Ở đây chữ giải thích bổ nghĩa cho ĐÚNG MỘT dòng tính năng ⇒ gắn `?` ngay
   cạnh từng dòng, không gộp vào một panel chung ở đầu trang.

   Vì sao <details> chứ không phải CSS hover: không cần JS, Tab tới được,
   Enter/Space bật/tắt, và CHẠM ĐƯỢC trên mobile — chính là lý do task 108
   chọn nó thay cho tooltip hover-only. css/style.css được
   page/_parts/header.php:157 nạp TOÀN CỤC nên 3 class trên có sẵn ở cả 2
   trang; file này chỉ chứa phần OVERRIDE VỊ TRÍ cho ngữ cảnh "trong thẻ giá".
   ========================================================================== */

/* Containing block cho panel là cả DÒNG, không phải cái nút 22px. */
.pricing-features li {
    position: relative;
}

/* Component gốc đặt <details> là position:relative, nên panel neo vào chính
   cái nút. Trả nó về static để containing block leo lên <li> ở trên. */
.feature-tip {
    position: static;
}

/* .pricing-card có text-align:center; panel là chữ giải thích nhiều dòng nên
   phải căn trái để đọc được. */
.feature-tip .page-header-info-panel {
    top: calc(100% - 6px);
    /* left+right cùng 0 ⇒ panel LUÔN rộng đúng bằng dòng, tức đúng bằng bề
       ngang phần nội dung của thẻ. Không thể tràn ngang ở BẤT KỲ viewport nào.
       Đây là lý do không dùng `width: min(360px, 90vw)` của bản gốc: 360px
       tràn khỏi thẻ 254px, và ở thẻ Agency (ngoài cùng bên phải) sẽ tràn ra
       khỏi cả trang. */
    right: 0;
    width: auto;
    text-align: left;
    padding: 14px 16px;
    line-height: 1.5;
}

.feature-tip .page-header-info-panel p {
    margin: 0;
    font-size: 13px;
}

/* Nút "?" đứng cạnh chữ, không đội dòng lên. */
.feature-tip .info-icon-btn {
    width: 18px;
    height: 18px;
    font-size: 11px;
    flex: 0 0 auto;
}

/* 🔴 `display: inline`, KHÔNG PHẢI `inline-flex` — bug thật đã nhìn thấy trên
   ảnh chụp 1440x900 (probe task v1.1.2-002), không phải lo xa:

   `.pricing-features li::before` chèn dấu "✓" dưới dạng pseudo-element INLINE.
   Khi `.pf-line` là `inline-flex`, nó thành một hộp nguyên khối không tách
   được; nhãn dài ("Phát Hiện Gian Lận Nhiều Tầng" trong thẻ rộng ~254px) đẩy
   cả hộp đó xuống dòng dưới và bỏ dấu "✓" NẰM MỘT MÌNH trên dòng trên, căn
   giữa, trông như một dòng rỗng. Xảy ra ở cả 3 thẻ.

   `display: inline` cho "✓" + chữ + nút "?" chảy chung như một dòng văn bản:
   chữ xuống dòng bình thường, "✓" luôn dính với từ đầu tiên, "?" bám cuối từ
   cuối. `.info-icon-btn` đã có sẵn `vertical-align: middle` nên nút vẫn thẳng
   hàng với chữ. */
.pf-line {
    display: inline;
}

@media (max-width: 480px) {
    /* 🔴 CỐ Ý ghi đè fallback của component gốc (css/style.css:6707-6712), vốn
       đặt `position:static; width:100%` ở ngưỡng này.

       Fallback đó là một defect ĐÃ ĐƯỢC GHI NHẬN trong UI_COMPONENT_LIBRARY.md
       §2.20: `width:100%` phân giải theo containing block của panel, mà ở bản
       gốc containing block là hộp inline-flex ~22px của <details> — nên trên
       điện thoại panel thành một cột hẹp ~150px, cao lêu nghêu.

       Trong scope này panel neo vào <li> (position:static ở trên) và dùng
       left/right:0, nên giữ absolute là ĐÚNG và không dính defect đó.
       Defect gốc để nguyên — sửa nó đụng ~10 trang report/admin, cần một task
       polish riêng (đã ghi ở task doc §14 mục 3). */
    .feature-tip .page-header-info-panel {
        position: absolute;
        width: auto;
        margin-top: 0;
    }
}

/* ==========================================================================
   Icon gói trên .pricing-card (task v1.1.2-002 §7)
   3 icon cùng một hình gốc (khiên) + một dấu tăng dần: trơn → ✓ → +
   ⇒ đọc ra thành thang bậc ngay cả ở kích thước nhỏ, cạnh nhau.
   ========================================================================== */
.pricing-plan-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    line-height: 1;
}