.card { background: var(--bg-card); padding: 22px; border-radius: 16px; box-shadow: var(--card-shadow); margin-bottom: 20px; border: var(--card-border); transition: transform 0.2s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.card h2 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-color); font-weight: 800; }

.action-btn { width: calc(100% - 40px); padding: 18px; font-size: 1.15rem; background: var(--gradient-action); color: white; border: none; border-radius: 16px; box-shadow: 0 4px 10px var(--primary-glow); cursor: pointer; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin: 0; transition: all 0.15s; }
.action-btn:active { transform: translateY(3px); box-shadow: none; }
.action-btn-fixed { position: absolute; bottom: 95px; left: 20px; z-index: 100; }

.icon-btn { background: none; border: none; font-size: 1.3rem; color: var(--primary-color); cursor: pointer; }
.icon-action-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e2e8f0; background: white; color: var(--primary-color); font-size: 1.1rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s; }
.icon-action-btn:hover { background: #f8fafc; transform: scale(1.1); }

.back-btn { background: #f1f5f9; border: none; width: 40px; height: 40px; border-radius: 50%; color: var(--text-color); font-size: 1.2rem; cursor: pointer; transition: background 0.2s; }
.back-btn:hover { background: #e2e8f0; }

@media (min-width: 768px) {
    .action-btn {
        max-width: 400px; /* Nút bấm không bao giờ dài quá 400px */
        margin-left: auto !important;
        margin-right: auto !important; /* Căn giữa nút */
    }
}