.post-content ul {
list-style: disc;
margin: 1rem 0;
padding-left: 1.5rem;
}
.post-content ol {
list-style: decimal;
margin: 1rem 0;
padding-left: 1.5rem;
}
.post-content li {
margin: .4rem 0;
}.pbm-trial {
position: relative;
overflow: hidden;
padding: 5rem 1.5rem;
}
.pbm-trial__grid {
position: absolute;
inset: 0;
opacity: 0.6;
pointer-events: none;
}
.pbm-trial__glow {
position: absolute;
left: 50%;
top: 0;
width: 820px;
max-width: 100%;
height: 420px;
transform: translateX(-50%);
border-radius: 9999px;
background: oklch(0.57 0.075 72 / 0.10);
filter: blur(64px);
pointer-events: none;
}
.pbm-trial__layout {
position: relative;
max-width: 72rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 3rem;
align-items: start;
}
.pbm-trial__intro {
padding-top: 1rem;
}
.pbm-trial__badge {
display: inline-block;
padding: 0.375rem 0.875rem;
border: 1px solid oklch(0.57 0.075 72 / 0.30);
border-radius: 9999px;
background: oklch(0.57 0.075 72 / 0.06);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
}
.pbm-trial__title {
margin-top: 1.5rem;
font-family: var(--font-display);
font-size: clamp(2.25rem, 5vw, 3.25rem);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.025em;
text-wrap: balance;
}
.pbm-trial__subtitle {
margin-top: 1.5rem;
max-width: 36rem;
font-size: 1.125rem;
line-height: 1.625;
color: var(--muted-foreground);
text-wrap: pretty;
}
.pbm-trial__steps {
margin: 2.5rem 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pbm-trial__step {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.pbm-trial__step-num {
display: inline-flex;
flex-shrink: 0;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: var(--radius-xl, 1rem);
font-family: var(--font-display);
font-weight: 700;
background: oklch(0.57 0.075 72 / 0.10);
color: var(--primary);
transition: background-color 0.2s, color 0.2s;
}
.pbm-trial__step.is-on .pbm-trial__step-num {
background: var(--primary);
color: var(--primary-foreground);
}
.pbm-trial__step-title {
font-family: var(--font-display);
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
}
.pbm-trial__step-desc {
margin-top: 0.25rem;
font-size: 0.875rem;
line-height: 1.625;
color: var(--muted-foreground);
}
.pbm-trial__card {
border: 1px solid var(--border);
border-radius: var(--radius-2xl, 1.35rem);
background: var(--card);
padding: 2rem;
box-shadow: 0 1px 0 1px oklch(0.57 0.075 72 / 0.14), 0 24px 50px -22px oklch(0.4 0.06 60 / 0.4);
}
@media (max-width: 480px) {
.pbm-trial { padding: 3.5rem 1rem; }
.pbm-trial__card { padding: 1.5rem 1.25rem; }
}
.pbm-trial__alert {
margin-top: 1rem;
border: 1px solid;
border-radius: var(--radius-lg, 0.75rem);
padding: 0.875rem 1.25rem;
font-size: 1rem;
line-height: 1.5;
}
.pbm-trial__alert[hidden] {
display: none;
}
.pbm-trial__alert--success {
margin-top: 0;
border-color: #86efac;
background: #f0fdf4;
color: #166534;
}
.pbm-trial__alert--error {
border-color: oklch(0.6 0.19 33 / 0.40);
background: oklch(0.95 0.03 40);
color: oklch(0.47 0.16 33);
}
.pbm-trial__form {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.pbm-trial__select {
appearance: none;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23776a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
}
.pbm-trial__form button[disabled] {
opacity: 0.6;
cursor: progress;
}
.pbm-trial__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pbm-trial__otp {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid oklch(0.57 0.075 72 / 0.40);
border-radius: var(--radius-lg, 0.75rem);
background: oklch(0.57 0.075 72 / 0.10);
padding: 1rem 1.25rem;
}
.pbm-trial__otp-code {
font-family: var(--font-display);
font-size: clamp(1.75rem, 6vw, 2.25rem);
line-height: 2.5rem;
font-weight: 700;
letter-spacing: 0.08em;
word-break: break-all;
}
.pbm-trial__copy {
flex-shrink: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md, 0.6rem);
background: var(--background);
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--foreground);
cursor: pointer;
transition: border-color 0.2s;
}
.pbm-trial__copy:hover {
border-color: var(--primary);
}
.pbm-trial__zalo {
margin-top: 1.5rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
@media (max-width: 420px) {
.pbm-trial__zalo { grid-template-columns: 1fr; justify-items: center; }
}
.pbm-trial__qr {
text-align: center;
}
.pbm-trial__qr-frame {
border: 1px solid var(--border);
border-radius: var(--radius-lg, 0.75rem);
background: #fff;
padding: 0.625rem;
}
.pbm-trial__qr-frame img {
display: block;
width: 148px;
height: 148px;
}
.pbm-trial__qr-caption {
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--muted-foreground);
}
.pbm-trial__howto {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
font-size: 0.875rem;
line-height: 1.625;
color: var(--muted-foreground);
}
.pbm-trial__howto li {
display: flex;
gap: 0.5rem;
}
.pbm-trial__howto li > span:first-child {
font-weight: 600;
color: var(--primary);
}
.pbm-trial__howto b {
color: var(--foreground);
}
.pbm-trial__actions {
margin-top: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pbm-trial__restart {
border: 0;
background: none;
padding: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
cursor: pointer;
}
.pbm-trial__restart:hover {
color: var(--foreground);
}