/* =====================================================
   luyen-thi-viet-hsk.css
   CSS dùng chung cho tất cả view Luyện thi Viết HSK
   Thứ tự: 1) Nền + biến  2) Các khối giao diện  3) Responsive
           4) Tinh chỉnh khi nằm trong layout website
           5) Chặn CSS website đè lên class trùng tên
           6) Watermark
   ===================================================== */

/* ═════════ 1) NỀN + BIẾN ═════════ */
:root {
    --azhsk-blue: #0870a8;
    --azhsk-blue-dark: #045a89;
    --azhsk-blue-soft: #eaf7fd;
    --azhsk-blue-pale: #f5fbfe;
    --azhsk-orange: #ef9348;
    --azhsk-orange-soft: #fff3e9;
    --azhsk-yellow: #fff000;
    --azhsk-yellow-soft: #fffbd4;
    --ink: #263746;
    --muted: #6d8494;
    --line: #cfe2ec;
    --paper: #ffffff;
    --page: #eef8fc;
    --ok: #278553;
    --bad: #c84b3f;
    --shadow: 0 8px 28px rgba(8,112,168,.10);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: linear-gradient(180deg,#f8fdff 0,#eef8fc 230px,#eaf5fa 100%);
    color: var(--ink);
    font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif;
}

button {
    font: inherit
}

    button:focus-visible, .token:focus-visible {
        outline: 3px solid rgba(255,240,0,.95);
        outline-offset: 2px;
    }

/* Khung ngoài (JS tự bọc .topbar + .layout vào .app nếu trang chưa có) */
.app {
    width: min(1320px,100%);
    margin: 20px auto 40px;
    background: var(--paper);
    border: 1px solid #d5e8f1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(8,112,168,.10);
}

/* ═════════ 2) CÁC KHỐI GIAO DIỆN ═════════ */

/* ── Topbar ── */
.topbar {
    height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg,#eefaff,#dff4fd);
    border-bottom: 1px solid #bfdeec;
}

.timer {
    color: var(--azhsk-orange);
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.section-title {
    color: var(--azhsk-blue);
    font-size: 17px;
    font-weight: 800;
    flex: 1;
}

.submit-btn {
    min-width: 138px;
    height: 32px;
    color: white;
    border: 1px solid var(--azhsk-blue-dark);
    border-radius: 6px;
    background: linear-gradient(#1598d7,#0870a8);
    box-shadow: 0 2px 0 rgba(4,90,137,.20);
    cursor: pointer;
    font-weight: 700;
}

    .submit-btn:hover {
        filter: brightness(1.04)
    }

/* ── Layout ── */
.layout {
    display: grid;
    grid-template-columns: 230px minmax(0,1fr);
}

/* ── Sidebar ── */
.sidebar {
    background: linear-gradient(180deg,#f8fdff,#f0f9fd);
    border-right: 1px solid #cfe2ec;
}

.structure {
    padding: 12px 9px 18px
}

.structure-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--azhsk-blue-dark);
    font-weight: 800;
    margin-bottom: 9px;
}

.view {
    color: var(--azhsk-orange);
    font-size: 13px
}

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 9px
}

.tab {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    border: 1px solid #9bcee5;
    border-radius: 4px;
    color: #6c91a6;
    background: white;
    font-weight: 700;
}

    .tab.active {
        color: white;
        border-color: var(--azhsk-blue);
        background: var(--azhsk-blue);
    }

.part-title {
    margin: 10px 2px 6px;
    color: #4a7087;
    font-weight: 800;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
}

.nav-btn {
    height: 29px;
    border-radius: 7px;
    border: 1px solid #89c9e5;
    color: var(--azhsk-blue-dark);
    background: linear-gradient(#fff,#e8f8ff);
    cursor: pointer;
    font-weight: 700;
}

    .nav-btn.active {
        color: white;
        background: var(--azhsk-blue);
        border-color: var(--azhsk-blue-dark);
    }

    .nav-btn.done:not(.active) {
        border-color: var(--azhsk-orange);
        box-shadow: inset 0 -3px 0 var(--azhsk-yellow);
    }

/* ── QR Promo sidebar ── */
.qr-promo {
    margin: 18px 5px 0;
    text-align: center;
}

.qr-promo-title {
    margin: 0 0 10px;
    padding: 8px 5px;
    text-align: center;
    line-height: 1.4;
    background: linear-gradient(135deg,#fff8d6,#fff1b8);
    border: 1px solid #f2c94c;
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(239,147,72,.15);
}

    .qr-promo-title a {
        color: #e05a00;
        font-size: 17px;
        font-weight: 900;
        text-decoration: none;
        display: inline-block;
        animation: promoGlow 1.2s ease-in-out infinite alternate;
    }

@keyframes promoGlow {
    from {
        color: #e05a00;
        text-shadow: 0 0 6px rgba(224,90,0,.4);
        transform: scale(1);
    }

    to {
        color: #ff2200;
        text-shadow: 0 0 14px rgba(255,34,0,.75),0 0 28px rgba(255,180,0,.5);
        transform: scale(1.06);
    }
}

.qr-promo-title a:hover {
    color: #c43d00;
    text-decoration: underline;
}

.qr-promo-image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #cfe2ec;
    border-radius: 6px;
    background: #fff;
}

.qr-promo-text {
    margin: 10px 0 0;
    color: #e05b4f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

/* ── Main ── */
.main {
    min-width: 0;
    background: #fff
}

.main-inner {
    padding: 16px 18px 34px
}

.exam-heading {
    border: 1px solid #cfe2ec;
    background: linear-gradient(180deg,#fff,#f6fcff);
    border-radius: 10px;
    padding: 13px 18px 12px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

    .exam-heading:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(var(--azhsk-yellow) 0 40%,var(--azhsk-orange) 40% 70%,var(--azhsk-blue) 70%);
    }

    .exam-heading h1 {
        margin: 0;
        color: var(--azhsk-blue-dark);
        font-size: 27px;
        letter-spacing: .16em;
    }

    .exam-heading h2 {
        margin: 5px 0 0;
        color: var(--azhsk-blue);
        font-size: 20px;
    }

.instruction {
    margin: 0;
    color: #445e6f;
    font-size: 17px;
    font-weight: 700;
}

.example {
    margin-bottom: 15px;
    border: 1px solid #d0e4ee;
    background: white;
    border-radius: 9px;
    overflow: hidden;
}

.block-title {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: linear-gradient(90deg,var(--azhsk-yellow-soft),#fff 36%,var(--azhsk-blue-pale));
    border-bottom: 1px solid #d6e8f0;
    color: var(--azhsk-blue-dark);
    font-weight: 800;
}

.example-body {
    padding: 13px
}

.example-source {
    color: #374d5b;
    font-size: 17px;
    line-height: 1.9;
}

.example-answer {
    margin-top: 8px;
    padding: 9px 12px;
    background: #f0f9fd;
    border-left: 4px solid var(--azhsk-orange);
    color: var(--azhsk-blue-dark);
    font-size: 18px;
    font-weight: 700;
}

/* ── Work card ── */
.work-card {
    border: 1px solid #cfe2ec;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.question-head {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: linear-gradient(180deg,#eefaff,#e2f5fd);
    border-bottom: 1px solid #c8e2ee;
}

.question-no {
    color: var(--azhsk-blue-dark);
    font-size: 18px;
    font-weight: 800;
}

.mini-actions {
    display: flex;
    gap: 7px
}

.mini-btn {
    min-height: 30px;
    border: 1px solid #9bcde3;
    color: var(--azhsk-blue-dark);
    background: white;
    border-radius: 6px;
    padding: 0 11px;
    cursor: pointer;
    font-weight: 700;
}

    .mini-btn:hover {
        background: var(--azhsk-blue-soft)
    }

.question-body {
    padding: 14px
}

.zone-label {
    color: #738b9a;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 5px 2px;
}

/* ── Token zones ── */
.token-row, .answer-row {
    min-height: 52px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #cfdfe8;
    background: #fbfdfe;
}

.answer-row {
    margin-top: 12px;
    min-height: 58px;
    background: var(--azhsk-blue-pale);
    border: 1px dashed #81bddb;
}

    .answer-row:empty:before {
        content: "请把词条拖到这里";
        color: #98adba;
        font-size: 13px;
    }

/* ── Token ── */
.token {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 13px;
    color: white;
    background: linear-gradient(180deg,#1694cf,var(--azhsk-blue));
    border: 1px solid var(--azhsk-blue-dark);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 2px 3px rgba(8,112,168,.10);
    font-size: 17px;
    white-space: nowrap;
}

    .token:active {
        cursor: grabbing
    }

    .token.dragging {
        opacity: .18
    }

    .token[data-punctuation="true"] {
        min-width: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-weight: 900;
    }

/* ── Drag ghost & placeholder ── */
.ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: .97;
    box-shadow: 0 10px 24px rgba(8,80,120,.25);
}

.placeholder {
    min-width: 66px;
    min-height: 34px;
    border: 2px dashed var(--azhsk-orange);
    border-radius: 5px;
    background: var(--azhsk-yellow-soft);
}

.drop-active {
    outline: 2px solid rgba(239,147,72,.55);
    background: #fffdf0;
}

/* ── Pager ── */
.pager {
    display: flex !important;
    align-items: center;
    position: relative;
    min-height: 36px;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

    .pager .status {
        flex: 1;
        text-align: left;
    }

.pager-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
}

.status {
    color: #6d8898;
    font-size: 14px
}

/* ── Inline result ── */
.inline-result {
    display: none;
    margin-top: 10px;
    border: 1px solid #cfe2ec;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

    .inline-result.show {
        display: block
    }

.inline-result-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: linear-gradient(90deg,#fffbd9,#fff 44%,#edf9fe);
    border-bottom: 1px solid #d8e7ee;
}

.inline-result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--azhsk-blue-dark);
    font-weight: 900;
}

.inline-score {
    color: #6a8190;
    font-size: 13px;
    font-weight: 700;
    font-family: "Times New Roman","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}

.inline-result-body {
    padding: 13px 15px 16px
}

.answer-section-title {
    color: var(--azhsk-blue-dark);
    font-weight: 900;
    margin: 0 0 7px;
    font-family: "Times New Roman","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}

.inline-result .answer-card {
    background: #f8fcfe;
    border-left: 4px solid var(--azhsk-orange);
    padding: 12px 14px;
    margin: 9px 0 11px;
}

.inline-result.show-pinyin .answer-pinyin {
    display: block
}

.inline-result-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

/* ── Badges ── */
.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 800;
}

.ok {
    background: #e9f7ef;
    color: var(--ok)
}

.no {
    background: #fff0ed;
    color: var(--bad)
}

/* ── Answer card ── */
.answer-card {
    background: #f8fcfe;
    border-left: 4px solid var(--azhsk-orange);
    padding: 10px 12px;
    margin: 9px 0;
}

.answer-cn {
    color: var(--azhsk-blue-dark);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.55;
}

.answer-pinyin {
    display: none;
    margin-top: 2px;
    color: #7a6e2b;
    font-size: 12.5px;
    line-height: 1.45;
}

.answer-vi {
    margin-top: 5px;
    color: #3f4e58;
    font-size: 16px;
    line-height: 1.6;
    font-family: "Times New Roman",serif;
}

.explain-label {
    color: var(--azhsk-orange);
    font-weight: 900;
    margin-top: 13px;
    font-family: "Times New Roman","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}

.grammar {
    margin: 7px 0 0 20px;
    padding: 0;
    color: #000;
    font-family: "Times New Roman","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}

    .grammar li {
        margin: 5px 0;
        font-size: 15px;
        line-height: 1.65;
        color: #000;
    }

/* ── Font size control ── */
.font-control {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #506f82;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
}

.font-size-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--azhsk-blue-dark);
    min-width: 26px;
    height: 28px;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 800;
}

    .font-size-btn:hover {
        background: rgba(255,255,255,.72)
    }

    .font-size-btn.active {
        color: var(--azhsk-orange);
        background: #fff;
        box-shadow: inset 0 -2px 0 var(--azhsk-yellow);
    }

/* ── Answer button ── */
.top-exam-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.answer-btn {
    min-width: 76px;
    height: 32px;
    border: 1px solid var(--azhsk-orange);
    border-radius: 6px;
    color: #9d5a13;
    background: linear-gradient(180deg,#fffdf3,#fff2c9);
    box-shadow: 0 2px 0 rgba(239,147,72,.15);
    cursor: pointer;
    font-weight: 800;
}

    .answer-btn:hover:not(:disabled) {
        background: linear-gradient(180deg,#fff9d9,#ffeeb0);
    }

    .answer-btn:disabled {
        opacity: .42;
        cursor: not-allowed;
        filter: grayscale(.18);
    }

    .answer-btn.active {
        color: #fff;
        background: linear-gradient(180deg,#f3a25c,var(--azhsk-orange));
        border-color: #d97d30;
    }

/* ── Submitted state ── */
.app.submitted #bankRow .token {
    color: #2f6f91;
    background: linear-gradient(180deg,#f7fcff,#e7f5fb);
    border-color: #9ecfe5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    opacity: 1;
    cursor: default;
}

.app.submitted #answerRow .token {
    color: #fff;
    background: linear-gradient(180deg,#1694cf,var(--azhsk-blue));
    border-color: var(--azhsk-blue-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 2px 3px rgba(8,112,168,.10);
    opacity: 1;
}

/* ── Score banner ── */
.score-banner {
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #d4eaf5;
    background: linear-gradient(135deg,#fffef0 0%,#fff8e8 40%,#edf9fe 100%);
    box-shadow: 0 4px 18px rgba(8,112,168,.10);
    animation: bannerIn .45s cubic-bezier(.18,.89,.32,1.28) both;
}

@keyframes bannerIn {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.score-banner-inner {
    padding: 20px 22px 18px;
    text-align: center;
}

.score-congrats {
    font-size: 20px;
    font-weight: 800;
    color: var(--azhsk-blue-dark);
    margin-bottom: 14px;
    line-height: 1.4;
}

    .score-congrats .flower {
        font-size: 26px;
        display: block;
        margin-bottom: 4px;
    }

.score-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.score-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #fff;
    border: 1px solid #c5e3f2;
    border-radius: 10px;
    padding: 12px 24px;
    min-width: 130px;
    box-shadow: 0 2px 8px rgba(8,112,168,.07);
}

.score-chip-label {
    color: #6a8898;
    font-size: 13px;
    font-weight: 700;
    font-family: "Times New Roman","Microsoft YaHei",sans-serif;
}

.score-chip-value {
    color: var(--azhsk-orange);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
}

    .score-chip-value span {
        font-size: 16px;
        font-weight: 700;
        color: #8a9fab;
    }

.score-chip.points .score-chip-value {
    color: var(--azhsk-blue);
}

/* ── Celebration ── */
.answer-celebration-layer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
}

.answer-confetti {
    position: fixed;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    will-change: transform,opacity;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

    .answer-confetti.round {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

@media (prefers-reduced-motion:reduce) {
    .answer-confetti {
        display: none
    }
}

/* ── Font scale (大 / 中 / 小) ── */
.app {
    --exam-scale: 1;
    --answer-cn-size: 19px;
    --answer-vi-size: 16px;
    --pinyin-size: 12.5px;
    --explain-size: 15px;
}

    .app.font-large {
        --exam-scale: 1.46;
        --answer-cn-size: 27px;
        --answer-vi-size: 22px;
        --pinyin-size: 16px;
        --explain-size: 20px;
    }

    .app.font-small {
        --exam-scale: .84;
        --answer-cn-size: 16px;
        --answer-vi-size: 13.5px;
        --pinyin-size: 10.5px;
        --explain-size: 12.5px;
    }

.main .exam-heading h1 {
    font-size: calc(27px * var(--exam-scale))
}

.main .exam-heading h2 {
    font-size: calc(20px * var(--exam-scale))
}

.main .instruction, .main .example-source, .main .example-answer,
.main .token, .main .question-no {
    font-size: calc(17px * var(--exam-scale))
}

.main .answer-cn {
    font-size: var(--answer-cn-size);
    line-height: 1.55;
}

.main .answer-vi {
    font-size: var(--answer-vi-size);
    line-height: 1.6;
}

.main .answer-pinyin {
    font-size: var(--pinyin-size);
    line-height: 1.45;
}

.main .grammar, .main .grammar li {
    font-size: var(--explain-size);
    line-height: 1.65;
}

.main .answer-section-title, .main .explain-label {
    font-size: calc(var(--explain-size) * 1.02);
}

.main .inline-score {
    font-size: calc(var(--explain-size) * 0.9);
}

/* ═════════ 3) RESPONSIVE ═════════ */
@media (max-width:900px) {
    .layout {
        grid-template-columns: 1fr
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid #cfe2ec
    }

    .structure {
        padding: 9px
    }

    .main-inner {
        padding: 10px
    }

    .app {
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

@media (max-width:560px) {
    .topbar {
        padding: 0 10px;
        gap: 8px
    }

    .timer {
        font-size: 14px
    }

    .section-title {
        display: none
    }

    .submit-btn {
        min-width: 105px
    }

    .exam-heading {
        padding: 12px
    }

        .exam-heading h1 {
            font-size: 23px
        }

    .token {
        font-size: 16px;
        padding: 5px 10px
    }

    .top-exam-actions {
        gap: 5px
    }

    .answer-btn {
        min-width: 58px;
        padding: 0 8px
    }

    .font-control {
        font-size: 13px
    }

    .font-size-btn {
        min-width: 23px;
        padding: 0 2px
    }
}

/* ═════════ 4) TINH CHỈNH KHI NẰM TRONG LAYOUT WEBSITE ═════════ */
.app .layout {
    min-height: 0;
    align-items: stretch;
}
    /* khung cao vừa đủ nội dung, hết khoảng trắng */
    .app .layout > .sidebar {
        align-self: stretch;
        height: auto;
        position: static;
    }
/* cột trái kéo dài hết chiều cao */

/* ═════════ 5) CHẶN CSS WEBSITE (style.css / bootstrap...) ĐÈ LÊN CLASS TRÙNG TÊN ═════════ */
.app {
    font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC","Segoe UI",Arial,sans-serif;
}

    .app p {
        font-family: inherit;
    }
    /* <p> không bị đổi sang font có chân */
    .app .qr-promo-text {
        font-family: "Segoe UI",Arial,"Microsoft YaHei",sans-serif;
    }

    /* Tiêu đề "书写第一部分" trên thanh trên cùng */
    .app .topbar .section-title {
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        flex: 1;
        font-size: 17px !important;
        font-weight: 800;
        line-height: 1.4 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        text-align: left !important;
        color: var(--azhsk-blue);
    }

        .app .topbar .section-title::before,
        .app .topbar .section-title::after {
            content: none !important;
            display: none !important;
        }

    /* Thanh tiêu đề "例如" */
    .app .example .block-title {
        margin: 0 !important;
        padding: 0 12px !important;
        min-height: 34px;
        font-size: 16px !important;
        line-height: 1.4 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        text-align: left !important;
        font-weight: 800;
        color: var(--azhsk-blue-dark);
    }

        .app .example .block-title::before,
        .app .example .block-title::after {
            content: none !important;
            display: none !important;
        }

    /* Bootstrap 5.2+ có class .placeholder riêng (mờ 50%, con trỏ chờ) - trả về đúng ô kéo thả của bài */
    .app .placeholder {
        opacity: 1;
        cursor: default;
    }

/* ═════════ 6) WATERMARK AZHSK ═════════ */
.exam-watermark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990; /* thấp hơn từ đang kéo (9999) và pháo giấy (10000) */
    pointer-events: none;
    user-select: none;
    background-repeat: repeat;
    background-size: 200px 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Ctext x='100' y='60' text-anchor='middle' dominant-baseline='middle' transform='rotate(-20 100 60)' font-family='Segoe UI, Arial, sans-serif' font-size='10' font-weight='600' letter-spacing='1.5' fill='rgba(60,90,110,0.09)'%3EAZHSK%3C/text%3E%3C/svg%3E");
}