.hp-notif{position:relative;display:inline-flex;align-items:center}.hp-notif-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:1px solid var(--hp-gray-200, #EBEBEB);border-radius:8px;color:var(--hp-gray-600, #4B5563);cursor:pointer;transition:all .2s}.hp-notif-trigger:hover{color:var(--hp-navy, #1A1A2E);border-color:var(--hp-navy, #1A1A2E)}.hp-notif-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hp-gold, #B8960C);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}.hp-notif-panel{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:340px;max-width:calc(100vw - 32px);max-height:420px;overflow-y:auto;background:#fff;border:1px solid var(--hp-gray-200, #EBEBEB);border-radius:12px;box-shadow:0 10px 30px #0000001f;z-index:1000}.hp-notif-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--hp-gray-100, #F3F4F6)}.hp-notif-title{font-size:14px;font-weight:600;color:var(--hp-navy, #1A1A2E)}.hp-notif-mark-all{background:none;border:none;color:var(--hp-gold, #B8960C);font-size:12px;font-weight:500;cursor:pointer}.hp-notif-list{list-style:none;margin:0;padding:0}.hp-notif-item{border-bottom:1px solid var(--hp-gray-100, #F3F4F6)}.hp-notif-item.is-unread{background:#b8960c0f}.hp-notif-item-link{display:flex;flex-direction:column;gap:2px;padding:12px 16px;text-decoration:none}.hp-notif-item-title{font-size:13px;font-weight:600;color:var(--hp-navy, #1A1A2E)}.hp-notif-item-body{font-size:12px;color:var(--hp-gray-500, #6B7280)}.hp-notif-empty{padding:24px 16px;text-align:center;font-size:13px;color:var(--hp-gray-500, #6B7280)}@media(max-width:768px){.hp-notif-mobile{display:inline-flex!important}}