/*
 * TFA Pricing — CSS tối thiểu của plugin. Cố ý chỉ có một nhiệm vụ.
 *
 * Skin của từng trang (tên class, màu, bo góc, animation) KHÔNG nằm ở đây và không bị đụng tới.
 * File này chỉ hiện thực data-tfa-only: phần tử chỉ hiện ở đúng tier được khai báo.
 *
 * Làm bằng CSS thuần thay vì JS là có chủ đích: nó đúng ngay từ lần render đầu của server,
 * nên không phụ thuộc JS đã chạy hay chưa (WP Rocket delay JS trên site này chỉ chạy inline
 * script sau tương tác đầu tiên). Đổi data-tfa-tier trên root là CSS tự cập nhật theo.
 *
 * Dùng:  <div data-tfa-only="hvc">…</div>            chỉ hiện ở tier hvc
 *        <div data-tfa-only="hvc original">…</div>   hiện ở hvc hoặc original
 */

.tfa-pricing[data-tfa-tier="hvm"] [data-tfa-only]:not([data-tfa-only~="hvm"]),
.tfa-pricing[data-tfa-tier="hvc"] [data-tfa-only]:not([data-tfa-only~="hvc"]),
.tfa-pricing[data-tfa-tier="original"] [data-tfa-only]:not([data-tfa-only~="original"]) {
	display: none !important;
}

/*
 * Nút chuyển sang một mức KHÔNG CÒN BÁN thì ẩn hẳn.
 *
 * Mot muc ngung ban (san pham ve private hoac draft) bien mat khoi payload, nen bam vao nut
 * cua no khong xay ra gi ca. De lai mot cai tab nhin nhu bam duoc ma bam khong phan ung la
 * loi giao dien, khong phai chuyen nho. Server khai muc con ban trong data-tfa-sold.
 *
 * Chi ap dung cho nut NAM TRONG khoi. Bo nut dung chung nhieu khoi (thuoc tinh group) nam
 * ngoai moi khoi, va no dieu khien nhieu san pham cung luc nen khong the an theo mot san pham.
 */
.tfa-pricing[data-tfa-sold]:not([data-tfa-sold~="hvm"]) [data-tfa-switch="hvm"],
.tfa-pricing[data-tfa-sold]:not([data-tfa-sold~="hvc"]) [data-tfa-switch="hvc"] {
	display: none !important;
}

/*
 * Cụm hạn ưu đãi: chỉ hiện khi mức đang xem THẬT SỰ có ngày kết thúc.
 *
 *   <span data-tfa-when="deadline">Ưu đãi đến hết <b data-tfa-field="sale_to">{{p.sale_to}}</b></span>
 *   <span data-tfa-when="no-deadline">Ưu đãi áp dụng tới khi hết suất</span>
 *
 * Vì sao phải bọc cả cụm chứ không chỉ để trống con số: nhãn "Ưu đãi đến hết" là chữ của trang,
 * plugin không sở hữu nó. Hết khuyến mãi thì field trả rỗng còn cái nhãn ở lại, và khách đọc
 * thấy một câu cụt đuôi. Bọc cả cụm thì nhãn đi theo con số.
 *
 * Làm bằng CSS thuần, cùng lý do với data-tfa-only: đúng ngay từ HTML server trả về, không đợi
 * JS (WP Rocket trên site này hoãn JS tới lúc có tương tác đầu tiên).
 *
 * layout="toggle": cờ nằm trên root, JS cập nhật khi đổi mức.
 * layout="cards" : cờ nằm trên chính thẻ data-tfa-card, server dán sẵn, không đổi bao giờ.
 *
 * Đừng trộn hai kiểu: một thẻ data-tfa-card nằm trong khối layout="toggle" sẽ chịu cả hai cờ,
 * và cờ của root vẫn ẩn được cum bên trong thẻ. data-tfa-only cũng vấp đúng chỗ này.
 * Thẻ ghim mức thì dùng layout="cards", đó là việc của nó.
 */
.tfa-pricing[data-tfa-deadline="no"] [data-tfa-when~="deadline"],
.tfa-pricing[data-tfa-deadline="yes"] [data-tfa-when~="no-deadline"],
.tfa-pricing [data-tfa-card][data-tfa-deadline="no"] [data-tfa-when~="deadline"],
.tfa-pricing [data-tfa-card][data-tfa-deadline="yes"] [data-tfa-when~="no-deadline"] {
	display: none !important;
}