/**
 * ============================================================================
 *  HE THONG TAP HUAN NHAN SU NOI BO - QLDT.NTTU
 *  Theme NTT (blue #1d4ed8 + red #c8102e + navy #0e2150) tren nen Bootstrap 5,
 *  ke thua design tokens tu template Internal Training Portal (campus direction).
 *
 *  Ban quyen: Phong Quan ly dao tao - Truong Dai hoc Nguyen Tat Thanh.
 *  Phat trien boi:
 *    - Tac gia: Nguyen Kieu Phat - Truong phong Quan ly dao tao
 *    - Email:   nguyenkieuphat@gmail.com
 *    - SDT:     0932613989
 * ============================================================================
 */

:root {
    /* ===== NTT brand palette (lay tu template Internal_Traininig_Portal/styles.css) ===== */
    --th-blue-50:  #eef4ff;
    --th-blue-100: #dbe8ff;
    --th-blue-200: #bcd3ff;
    --th-blue-500: #2563eb;
    --th-blue-600: #1d4ed8;   /* primary */
    --th-blue-700: #1b3fa8;   /* primary hover */
    --th-blue-900: #112a63;

    --th-red-50:  #fff0f0;
    --th-red-500: #e11d2a;    /* accent */
    --th-red-600: #c8102e;    /* accent hover */

    --th-navy:    #0e2150;    /* hero, footer */
    --th-navy-2:  #0a1838;    /* footer den hon */
    --th-gold:    #c4982f;    /* underline highlight */

    --th-green-500: #16a34a;
    --th-green-50:  #ecfdf3;
    --th-amber-500: #d97706;
    --th-amber-50:  #fffbeb;

    /* Slate scale */
    --th-s-50:  #f8fafc;
    --th-s-100: #f1f5f9;
    --th-s-200: #e6ebf2;
    --th-s-300: #cdd6e3;
    --th-s-400: #94a3b8;
    --th-s-500: #64748b;
    --th-s-600: #475569;
    --th-s-700: #334155;
    --th-s-800: #1e293b;
    --th-s-900: #0f172a;

    /* Token alias (giu API cu khong gay break) */
    --th-theme:      var(--th-blue-600);
    --th-theme-dark: var(--th-blue-700);
    --th-accent:     var(--th-red-500);
    --th-title:      var(--th-s-900);
    --th-body:       var(--th-s-600);
    --th-muted:      var(--th-s-500);
    --th-smoke:      var(--th-s-100);
    --th-smoke2:     var(--th-blue-50);
    --th-dark:       var(--th-navy);
    --th-dark2:      var(--th-navy-2);
    --th-border:     var(--th-s-200);
    --th-surface:    #ffffff;
    --th-surface-2:  var(--th-s-50);

    /* Ghi de bien Bootstrap */
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1b3fa8;
    --bs-link-hover-color: #112a63;
    --bs-body-color: #475569;
    --bs-body-font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
    --bs-border-color: #e6ebf2;

    /* Shadow & spacing */
    --th-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --th-shadow:    0 4px 16px -4px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.06);
    --th-shadow-lg: 0 18px 48px -12px rgba(15,23,42,.20);
}

body {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
    color: var(--th-body);
    background: var(--th-smoke);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold, .fw-semibold {
    font-family: "Be Vietnam Pro", system-ui, sans-serif;
    color: var(--th-title);
    letter-spacing: -.01em;
}
h1, h2 { font-weight: 800; letter-spacing: -.02em; }
h3, h4, h5 { font-weight: 700; }

a { text-decoration: none; }

/* ---------- Buttons (vuong goc theo campus direction) ---------- */
.btn {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 650;
    border-radius: 9px;
    padding: 10px 18px;
    transition: filter .15s, background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 13px 24px; border-radius: 11px; font-size: 15.5px; }
.btn-sm { padding: 7px 13px; border-radius: 7px; font-size: 13px; }

.btn-primary {
    --bs-btn-bg: var(--th-blue-600);
    --bs-btn-border-color: var(--th-blue-600);
    --bs-btn-hover-bg: var(--th-blue-700);
    --bs-btn-hover-border-color: var(--th-blue-700);
    --bs-btn-active-bg: var(--th-blue-700);
    --bs-btn-disabled-bg: var(--th-blue-600);
    --bs-btn-disabled-border-color: var(--th-blue-600);
    color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--th-blue-600);
    --bs-btn-border-color: var(--th-blue-200);
    --bs-btn-hover-bg: var(--th-blue-50);
    --bs-btn-hover-border-color: var(--th-blue-600);
    --bs-btn-hover-color: var(--th-blue-700);
    --bs-btn-active-bg: var(--th-blue-600);
}
.btn-danger, .btn-accent {
    background: var(--th-red-500);
    border-color: var(--th-red-500);
    color: #fff;
}
.btn-danger:hover, .btn-accent:hover {
    background: var(--th-red-600);
    border-color: var(--th-red-600);
    color: #fff;
    filter: brightness(1.04);
}
.btn-warning {
    --bs-btn-bg: var(--th-gold);
    --bs-btn-border-color: var(--th-gold);
    --bs-btn-hover-bg: #b3892b;
    --bs-btn-hover-border-color: #b3892b;
    color: #fff;
}
.btn-ghost {
    background: var(--th-surface-2);
    color: var(--th-title);
    border: 1px solid var(--th-border);
}
.btn-ghost:hover { background: var(--th-s-100); }
.btn-link { color: var(--th-blue-700); }
.btn-link:hover { color: var(--th-blue-900); }

/* ---------- Text / background helpers ---------- */
.text-primary { color: var(--th-blue-600) !important; }
.text-accent  { color: var(--th-red-600) !important; }
.bg-primary   { background-color: var(--th-blue-600) !important; }
.bg-soft      { background-color: var(--th-blue-50) !important; }
.bg-navy      { background-color: var(--th-navy) !important; color: #fff; }

/* ---------- Navbar (header public) ---------- */
.th-header {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--th-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.th-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 800;
    color: var(--th-title);
    line-height: 1.1;
    /* Bootstrap dat .navbar-brand { white-space: nowrap } -> ten he thong dai se day
       ca trang rong hon viewport tren mobile (tran ngang). Cho phep xuong dong. */
    white-space: normal;
    min-width: 0;
}
.th-brand-logo {
    width: 60px; height: 60px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--th-border);
    padding: 4px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
}
.th-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.th-brand-icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--th-blue-700);
    color: #fff;
    font-size: 22px;
    flex: 0 0 auto;
}
.th-brand-name { font-size: 1rem; line-height: 1.15; word-break: break-word; }
.th-brand-name small {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--th-muted);
    font-family: "Be Vietnam Pro", sans-serif;
    letter-spacing: .02em;
}
.th-header .nav-link {
    color: var(--th-s-600);
    font-weight: 600;
    font-size: 14.5px;
    padding: 9px 14px;
}
.th-header .nav-link:hover { color: var(--th-blue-700); }
.th-header .nav-user { color: var(--th-title); font-weight: 600; }

/* Header gon hon tren dien thoai (logo nho lai, ten he thong xuong dong gon) */
@media (max-width: 575.98px) {
    .th-brand-logo { width: 44px; height: 44px; }
    .th-brand-name { font-size: .88rem; }
    .th-brand-name small { font-size: .68rem; }
}

/* ---------- Hero (mac dinh - cac trang khong phai landing) ---------- */
.th-hero {
    position: relative;
    background: linear-gradient(120deg, var(--th-navy), var(--th-blue-700) 60%, var(--th-blue-600));
    color: #fff;
    padding: 56px 48px;
    overflow: hidden;
    box-shadow: var(--th-shadow-lg);
}
.th-hero h1, .th-hero h2 { color: #fff; }
.th-hero .lead { color: rgba(255,255,255,.9); }
.th-hero::after {
    content: "";
    position: absolute; right: -80px; top: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(196,152,47,.35), transparent 70%);
    border-radius: 50%;
}

/* ---------- Page header (breadcrumb) ---------- */
.th-page-head {
    background: linear-gradient(120deg, var(--th-navy), var(--th-blue-700));
    color: #fff;
    padding: 28px 32px;
    margin-bottom: 1.5rem;
}
.th-page-head h1, .th-page-head h2, .th-page-head h4 { color:#fff; margin:0; }
.th-page-head .breadcrumb { margin: 0; }
.th-page-head .breadcrumb a { color: var(--th-gold); }
.th-page-head .breadcrumb-item.active,
.th-page-head .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.7); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid color-mix(in srgb, var(--th-border) 60%, transparent);
    border-radius: 0;
    box-shadow: var(--th-shadow-sm);
    background: var(--th-surface);
}
.card-header { border-radius: 0 !important; background: var(--th-surface); border-bottom: 1px solid var(--th-border); }
.th-course-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s; overflow: hidden; }
.th-course-card:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-lg); border-color: var(--th-blue-200); }

/* ================== Course card (template Internal Training Portal) ================== */
.th-course-card {
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.th-course-card:hover { color: inherit; }

/* Thumb: gradient sọc chéo + play icon to chinh giua + thumb-tag goc trai duoi */
.th-course-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 12px, rgba(255,255,255,0) 12px 24px),
        var(--th-gradient, linear-gradient(135deg, var(--th-blue-600), var(--th-blue-700)));
    overflow: hidden;
}
.th-course-play-icon {
    font-size: 64px;
    opacity: .88;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}
.th-course-thumb-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.th-course-thumb-image::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45));
}
.th-course-thumb-image > * { position: relative; z-index: 1; }

/* Hang badges (program + mandatory) tren title cua card */
.th-card-badges {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: .55rem;
}
.th-cat-badge-mandatory {
    background: var(--th-red-50);
    color: var(--th-red-600);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    padding: 5px 10px; border-radius: 999px;
}
.th-cat-badge-mandatory::before {
    content: ""; width: 6px; height: 6px;
    background: var(--th-red-500); border-radius: 999px;
}
.th-thumb-tag {
    position: absolute;
    left: 12px; bottom: 12px;
    background: rgba(0,0,0,.42);
    color: #fff;
    font: 700 11px/1 ui-monospace, "SFMono-Regular", monospace;
    letter-spacing: .04em;
    padding: 6px 10px;
    border-radius: 2px;
    backdrop-filter: blur(2px);
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge category (mau theo variant) */
.th-cat-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: .55rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.th-badge-red    { background: var(--th-red-50);    color: var(--th-red-600); }
.th-badge-blue   { background: var(--th-blue-50);   color: var(--th-blue-700); }
.th-badge-violet { background: #f3eefe;             color: #5b21b6; }
.th-badge-cyan   { background: #ecfeff;             color: #0e7490; }
.th-badge-green  { background: var(--th-green-50);  color: var(--th-green-500); }
.th-badge-gold   { background: #fef7e6;             color: #c4982f; }

.th-course-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .55rem;
    color: var(--th-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.7em;
}

/* Mo ta clamp 3 dong (theo yeu cau: 2-3 dong, dai hon thi an) */
.th-course-desc {
    font-size: 13.5px;
    color: var(--th-muted);
    line-height: 1.55;
    margin: 0 0 .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.65em;        /* 3 dong x 1.55em */
}

.th-course-meta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--th-muted); font-weight: 600;
    border-top: 1px solid var(--th-border);
    padding-top: 10px;
    margin-top: auto;            /* day xuong cuoi */
}
.th-course-meta span { display: inline-flex; align-items: center; gap: 5px; }

.th-course-progress { font-size: 12.5px; }
.th-course-progress-label { color: var(--th-muted); font-weight: 600; }

.th-course-action .btn {
    font-weight: 600;
    padding: 9px 16px;
}

/* ================== Program card (template Internal Training Portal) ================== */
.th-program-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.th-program-card:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-lg); border-color: var(--th-blue-200); }

/* Thumb 16:10: anh bia upload (background-image) hoac gradient + icon */
.th-program-thumb-link { display: block; }
.th-program-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 12px, rgba(255,255,255,0) 12px 24px),
        var(--th-gradient, linear-gradient(135deg, var(--th-blue-600), var(--th-blue-700)));
    overflow: hidden;
}
.th-program-thumb-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.th-program-thumb-image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.3));
}
.th-program-thumb-icon {
    font-size: 64px;
    opacity: .85;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}

.th-program-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .6rem;
    color: var(--th-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.th-program-desc {
    font-size: 14px;
    color: var(--th-muted);
    line-height: 1.55;
    margin: 0 0 .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.65em;
}
.th-program-meta { font-size: 12.5px; color: var(--th-muted); margin-top: .25rem; }
.th-program-actions .btn { font-weight: 600; }

/* Notice file link (tep thong bao BGH dinh kem) */
.th-program-notice {
    background: var(--th-amber-50);
    color: var(--th-amber-500);
    padding: 8px 12px;
    border-left: 3px solid var(--th-amber-500);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.th-program-notice:hover {
    background: #fff5dc;
    color: var(--th-amber-500);
}
.th-program-notice-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

/* Section title chinh giua */
.th-section-head {
    text-align: center;
    margin: 3rem 0 1.75rem;
    position: relative;
}
.th-section-head h2 {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--th-title);
    margin: 0;
    text-transform: uppercase;
}
.th-section-head h2::after {
    content: "";
    display: block;
    width: 64px; height: 4px;
    background: var(--th-red-500);
    margin: 12px auto 0;
}
.th-section-head .lead {
    color: var(--th-muted);
    margin-top: .75rem;
    font-size: 15px;
}

/* ---------- Badges (theo template) ---------- */
.badge {
    font-weight: 650;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}
.badge.bg-primary { background-color: var(--th-blue-50) !important; color: var(--th-blue-700) !important; }
.badge.bg-secondary { background-color: var(--th-s-100) !important; color: var(--th-s-600) !important; }
.badge.bg-success { background-color: var(--th-green-50) !important; color: var(--th-green-500) !important; }
.badge.bg-danger  { background-color: var(--th-red-50) !important; color: var(--th-red-600) !important; }
.badge.bg-warning { background-color: var(--th-amber-50) !important; color: var(--th-amber-500) !important; }
.badge.bg-info    { background-color: var(--th-blue-50) !important; color: var(--th-blue-700) !important; }

/* Allow eyebrow style (small caps mau xanh) */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--th-blue-700);
    background: var(--th-blue-50);
    padding: 7px 13px;
}
.eyebrow::before {
    content: ""; width: 7px; height: 7px;
    background: var(--th-red-500);
    display: inline-block;
}

/* ---------- Progress ---------- */
.progress {
    background-color: var(--th-s-200);
    border-radius: 999px;
    height: 8px;
}
.progress-bar { background-color: var(--th-blue-600); border-radius: 999px; }
.progress-bar.bg-success { background-color: var(--th-green-500) !important; }
.progress-bar.bg-danger { background-color: var(--th-red-500) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 9px;
    padding: .6rem .9rem;
    border-color: var(--th-border);
    font-size: 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--th-blue-500);
    box-shadow: 0 0 0 4px var(--th-blue-100);
}
/* Bootstrap chua san padding-right 2.25rem cho .form-select de ve mui ten len khoang do.
   Khai padding bang shorthand o tren da xoa mat khoang nay, nen chu dai chui xuong duoi
   mui ten. Tra lai khoang trong ben phai; ban -sm dung khoang hep hon cho can doi. */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.form-select-lg { padding-right: 2.75rem; }
/* Select nhieu dong (multiple/size) khong co mui ten nen khong can chua cho */
.form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: .9rem; }

/* ---------- Bang tien nhieu cot (bang chi cua dot thanh toan) ----------
   Nhieu cot so lien nhau, tieu de dai phai xuong hai dong nen chu to va sat nhau se
   dinh vao nhau, nhin khong ro cot nao ra cot nao. Thu nho tieu de, cho no tut xuong
   day o va them mot vach ngan rat nhat giua cac cot. */
.table-money thead th {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--th-s-500, #64748b);
    letter-spacing: .1px;
    padding: .55rem .6rem;
    vertical-align: bottom;
    white-space: normal;
}
.table-money thead th + th { border-left: 1px solid var(--th-s-200); }
/* O so lieu cung can khoang tho tuong ung de thang cot voi tieu de */
.table-money tbody td, .table-money tfoot td { padding-left: .6rem; padding-right: .6rem; }
.input-group .form-control { border-radius: 9px 0 0 9px; }
.input-group .btn { border-radius: 0 9px 9px 0; }

/* ---------- List group ---------- */
.list-group-item-action:hover { background: var(--th-blue-50); }
.list-group-item.active { background-color: var(--th-blue-600); border-color: var(--th-blue-600); }

/* ---------- Footer (lay style landing footer cho mach lac) ---------- */
.th-footer {
    background: var(--th-navy-2);
    color: #aab8d6;
    margin-top: 3rem;
}
.th-footer h4 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }
.th-footer a { color: #aab8d6; }
.th-footer a:hover { color: #fff; }
.th-footer .th-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.th-footer .th-brand-logo { background: #fff; box-shadow: none; }

/* ---------- Admin sidebar / top-nav (campus direction) ---------- */
.sidebar { background: #fff !important; border-right: 1px solid var(--th-border); }
.sidebar a { color: var(--th-s-600); border-radius: 0 !important; padding: 10px 12px; margin: 0 .5rem; font-weight: 600; font-size: 14.5px; }
.sidebar a.active, .sidebar a:hover { background: var(--th-blue-50) !important; color: var(--th-blue-700) !important; }
.sidebar .nav-head { color: var(--th-muted) !important; font-size: 11px; letter-spacing: .08em; font-weight: 700; }

/* nav pills/tabs */
.nav-tabs { border-bottom: 1px solid var(--th-border); }
.nav-tabs .nav-link {
    color: var(--th-s-600);
    border: 0;
    font-weight: 600;
    padding: 10px 16px;
}
.nav-tabs .nav-link:hover { color: var(--th-blue-700); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--th-blue-700);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--th-red-500);
    border: 0;
}

/* ---------- Alerts (vuong goc, brand tone) ---------- */
.alert { border-radius: 0; border-width: 1px; }
.alert-success { background: var(--th-green-50); color: var(--th-green-500); border-color: color-mix(in srgb, var(--th-green-500) 30%, transparent); }
.alert-danger  { background: var(--th-red-50); color: var(--th-red-600); border-color: color-mix(in srgb, var(--th-red-500) 30%, transparent); }
.alert-info    { background: var(--th-blue-50); color: var(--th-blue-700); border-color: color-mix(in srgb, var(--th-blue-500) 25%, transparent); }
.alert-warning { background: var(--th-amber-50); color: var(--th-amber-500); border-color: color-mix(in srgb, var(--th-amber-500) 30%, transparent); }