/*
 * Lớp cấu trúc tối thiểu. Giao diện mặc định nằm trong preset.css.
 * Khi lưu CSS ở Bảo hành răng sứ > Tùy biến, CSS đã lưu sẽ thay preset.css.
 */
.labo-warranty-lookup,.labo-warranty-lookup *{box-sizing:border-box}
.labo-warranty-search{display:flex;width:100%;align-items:stretch}
.labo-warranty-search__input{min-width:0;flex:1}
.labo-warranty-search__button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.labo-warranty-search__icon{display:block;flex:0 0 auto}
.labo-warranty-card{position:relative;width:100%;line-height:1}
.labo-warranty-card__image{display:block;width:100%;height:auto;margin:0;padding:0}
.labo-warranty-card__overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.labo-warranty-collapse{display:flex;align-items:center;justify-content:center;cursor:pointer}
.labo-warranty-collapse svg{display:block}
.labo-warranty-details-grid{display:grid}
.labo-warranty-detail{display:grid;align-items:center}
.labo-warranty-detail__label{display:flex;align-items:center;min-width:0}
.labo-warranty-detail__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.labo-warranty-detail__icon svg{display:block;width:100%;height:100%}
.labo-warranty-detail__value--positions{display:flex;flex-wrap:wrap;align-items:center}
.labo-warranty-message{width:100%}

/* Khu vực nhân viên */
.labo-warranty-staff{width:100%}
.labo-warranty-staff__grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}
.labo-warranty-staff__panel{background:#fff;border:1px solid #e2e2e2;padding:20px;border-radius:8px;margin-bottom:20px;color:#222}
.labo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.labo-form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.labo-form-grid input,.labo-form-grid textarea,.labo-import-form input,.labo-staff-search input{width:100%;box-sizing:border-box;padding:10px;border:1px solid #d8d8d8;border-radius:5px;background:#fff;color:#222}
.labo-field-full{grid-column:1/-1}
.labo-record-form button,.labo-import-form button,.labo-staff-search button,.labo-inline-form button{cursor:pointer;padding:9px 14px;border:1px solid #ccc;border-radius:5px;background:#f7f7f7;color:#222}
.labo-record-form .button-primary{background:#2271b1;color:#fff;border-color:#2271b1}
.labo-staff-search{display:flex;gap:8px;margin-bottom:15px}
.labo-table-wrap{overflow-x:auto}
.labo-staff-table{width:100%;border-collapse:collapse;min-width:700px}
.labo-staff-table th,.labo-staff-table td{padding:10px;border-bottom:1px solid #e6e6e6;text-align:left}
.labo-inline-form{display:inline;margin-left:8px}
@media(max-width:767px){.labo-warranty-staff__grid,.labo-form-grid{grid-template-columns:1fr}.labo-field-full{grid-column:auto}}


/* v1.2.1: Trên mobile, 4 vị trí răng luôn theo ma trận 2x2: 1-2 / 3-4.
   Dùng !important để quy tắc cấu trúc vẫn áp dụng nếu người dùng đã lưu preset CSS v1.2.0. */
@media(max-width:767px){
  .labo-warranty-detail.labo-warranty-detail--positions .labo-warranty-detail__value--positions{
    display:grid!important;
    grid-template-columns:max-content max-content!important;
    grid-auto-flow:row!important;
    gap:6px!important;
    justify-content:start;
    align-items:center;
  }
}