/**
 * Giao diện công khai do plugin sinh: hồ sơ thương hiệu + khối toplist.
 *
 * Mobile-first: mọi khai báo mặc định là điện thoại, chỉ dùng min-width để
 * mở rộng. Không khai báo font-family — kế thừa từ theme.
 */

.dgth-brand,
.dgth-toplist-item {
    --dgth-accent: #0a5c36;
    --dgth-line: #e3e3e3;
    --dgth-muted: #5c5c5c;
    --dgth-soft: #f0f7f3;
}

/* --- Đầu hồ sơ -------------------------------------------------------- */

.dgth-brand__name { font-size: 26px; line-height: 1.25; margin: 0 0 4px; }
.dgth-brand__loc { color: var(--dgth-muted); margin: 0 0 12px; font-size: 14px; }

.dgth-brand__score { margin: 0 0 4px; }
.dgth-brand__score-value { font-size: 40px; font-weight: 700; color: var(--dgth-accent); line-height: 1; }
.dgth-brand__score-max { font-size: 16px; color: var(--dgth-muted); }
.dgth-brand__score--none { color: var(--dgth-muted); font-style: italic; }

.dgth-brand__verified { font-size: 13px; color: var(--dgth-muted); margin: 0 0 12px; }
.dgth-brand__summary { font-size: 17px; }

/* Nhãn cảnh báo — cố ý nổi bật, đây là cam kết minh bạch không phải trang trí */
.dgth-brand__sponsored,
.dgth-brand__overdue,
.dgth-brand__disqualified {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    margin: 0 0 12px;
}
.dgth-brand__sponsored { background: #fff8e5; border: 1px solid #f0d78c; }
.dgth-brand__overdue { background: #fff4e5; border: 1px solid #f0c18c; }
.dgth-brand__disqualified { background: #fcf0f1; border: 1px solid #e6a2a4; }

.dgth-brand__section { margin: 32px 0; }
.dgth-brand__section > h2 { font-size: 20px; margin: 0 0 12px; }

/* --- Bảng điểm 6 trục ------------------------------------------------- */

.dgth-axis { width: 100%; border-collapse: collapse; font-size: 14px; }
.dgth-axis th { text-align: left; font-weight: 600; padding: 8px 8px 8px 0; }
.dgth-axis th small { color: var(--dgth-muted); font-weight: 400; }
.dgth-axis td { padding: 8px 0; white-space: nowrap; }
.dgth-axis td:last-child { width: 45%; padding-left: 12px; }

.dgth-axis__bar {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--dgth-line);
    position: relative;
    overflow: hidden;
}
.dgth-axis__bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v, 0%);
    background: var(--dgth-accent);
}

/* --- Bảng dữ liệu ----------------------------------------------------- */

.dgth-facts { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; font-size: 15px; }
.dgth-facts dt { font-weight: 600; color: var(--dgth-muted); font-size: 13px; }
.dgth-facts dd { margin: 0 0 10px; }

/*
 * Bảng giá / giờ mở cửa: cuộn ngang trong khung riêng trên điện thoại,
 * KHÔNG để tràn làm vỡ layout. Và luôn là <table> thật, không phải ảnh —
 * AI search đọc được bảng, không đọc được ảnh chụp bảng.
 */
.dgth-price,
.dgth-hours,
.dgth-toplist-table table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    -webkit-overflow-scrolling: touch;
}
.dgth-price th, .dgth-price td,
.dgth-hours th, .dgth-hours td,
.dgth-toplist-table th, .dgth-toplist-table td {
    border: 1px solid var(--dgth-line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.dgth-price th,
.dgth-toplist-table th { background: var(--dgth-soft); }
.dgth-hours th { width: 120px; background: var(--dgth-soft); }

.dgth-toplist-table caption,
.dgth-axis caption {
    text-align: left;
    font-size: 13px;
    color: var(--dgth-muted);
    padding-bottom: 6px;
}

.dgth-note { font-size: 13px; color: var(--dgth-muted); }
.dgth-brand__branches { padding-left: 18px; }

.dgth-brand__method {
    background: var(--dgth-soft);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
}
.dgth-brand__method p { margin: 0; }

/* --- Khối trả lời nhanh ----------------------------------------------- */

/*
 * Đoạn AI search trích dẫn. Làm nổi bật có chủ đích: người đọc quét trang
 * cũng cần thấy câu trả lời ngay, không phải đọc hết mở đầu.
 */
.dgth-answer {
    background: var(--dgth-soft, #f0f7f3);
    border-left: 4px solid var(--dgth-accent, #0a5c36);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    margin: 0 0 24px;
}
.dgth-answer p { margin: 0; font-size: 16px; }

/* --- FAQ --------------------------------------------------------------- */

.dgth-faq { margin: 36px 0; }
.dgth-faq h2 { font-size: 20px; }

.dgth-faq__item {
    border-bottom: 1px solid var(--dgth-line, #e3e3e3);
    padding: 4px 0;
}
.dgth-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;   /* vùng chạm >= 40px trên điện thoại */
    list-style: none;
}
.dgth-faq__item summary::-webkit-details-marker { display: none; }
.dgth-faq__item summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: var(--dgth-accent, #0a5c36);
    font-weight: 700;
}
.dgth-faq__item[open] summary::before { content: "−"; }
.dgth-faq__item > div { padding: 0 0 10px 18px; }

/* --- Nhật ký chỉnh sửa ------------------------------------------------- */

.dgth-changelog {
    margin: 32px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--dgth-line, #e3e3e3);
    font-size: 14px;
    color: var(--dgth-muted, #5c5c5c);
}
.dgth-changelog h2 { font-size: 16px; margin: 0 0 8px; }
.dgth-changelog ul { margin: 0; padding-left: 18px; }

/* --- Khối toplist trong bài ------------------------------------------- */

.dgth-toplist-item {
    border-top: 2px solid var(--dgth-soft);
    padding-top: 20px;
    margin-top: 28px;
}
.dgth-toplist-item h2 { font-size: 21px; }
.dgth-score { color: var(--dgth-accent); }

.dgth-toplist-item__cons {
    background: #fcf7f7;
    border-left: 3px solid #d9a2a4;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
}
.dgth-toplist-item__cons h3,
.dgth-toplist-item__pros h3 { font-size: 15px; margin: 0 0 6px; }

.dgth-toplist-item__fit,
.dgth-toplist-item__price { font-size: 14px; }
.dgth-toplist-item__more { font-weight: 600; }

/* --- Mở rộng cho màn hình lớn ----------------------------------------- */

@media (min-width: 720px) {
    .dgth-brand__name { font-size: 32px; }
    .dgth-facts { grid-template-columns: 180px 1fr; }
    .dgth-facts dt { padding-top: 2px; }

    .dgth-price,
    .dgth-hours,
    .dgth-toplist-table table { display: table; }
}